Wednesday Apr 20, 2016

New Data Visualization Features in JET 2.0.1

Oracle JET 2.0.1 was released on April 18th and includes the following new data visualization features:

Custom Center Content for Donut Chart

Custom center content is now supported for donut chart. This allows arbitrary HTML content to be specified through a knockout template or a JavaScript renderer.


Custom Center Content for Circular Status Meter Gauge

Custom center content is now supported for circular status meter gauge. This allows arbitrary HTML content to be specified through a knockout template or a JavaScript renderer.

Custom Marker Shapes and Images

Custom marker shapes and images are now supported in Chart, Diagram, NBox, and Thematic Map. Support was added for Picto Chart, LED Gauge, and Rating Gauge in the v2.0.0 release, and this feature is now available for all applicable data visualizations.

Bar Chart Rendering Performance

Performance has been improved for large data sets. The chart has also been enhanced to better deal with large numbers of series, especially for bar charts.

Thematic Map Automatic Marker Sizing

Thematic Map now supports automatic sizing of markers whose relative size is specified through the new value property.This is similar to the support in bubble charts, making it much easier to configure markers for responsive layouts.

NBox Custom Count Labels

A custom count label can now be specified for each NBox cell, allowing the application to display total number and percentage of markers in the cell, which is especially useful for overflow cases.

Other Enhancements

  • Chart: Tooltip and converter support has been added to the donut chart center label.
  • Tag Cloud: A color attribute is now supported on tag cloud items, providing a convenience API that is consistent with data items in other components.
  • Thematic Map: Thematic Map tooltips can now be customized for regions that aren't associated with data.

Overview and best practices for Data Visualizations in JET is provided in the JET Data Visualizations FAQ. For more information visit Oracle JET website, and post your questions on Oracle JET forum.

Wednesday Apr 06, 2016

New Data Visualization Features in Oracle MAF 2.3

Oracle Mobile Application Framework 2.3 release is now available and contains a number of new features, including support for Windows platform and built-in integration with MCS Analytics. Consult this blog article for a complete list of new features.

The new Data Visualization features include:

  • Range Charts: Range area and range bar charts help visualize datasets with varying low/high values.

  • Hierarchical labels can now be used to display hierarchical data on the categorical axis charts. For more details about hierarchical labels, please see this blog article on the Oracle JET blog.

  • Ability to individually style the categorical axis labels allows for emphasizing specific groups, which is a lot more useful than styling the labels as a whole. Tooltips are now also supported for categorical axis labels.

  • Standalone legend can now be used with shared attribute groups to display colors consistently across data visualization components. This helps with achieving one of the primary best practices related to using multiple data visualizations, which is that all components should consistently represent the data and that they should behave as a cohesive dashboard rather than a set of independent components.

  • Support for specifying labels and label styles for markers on the GeographicMap component
  • A number of enhancements are now supported in Gauge components:
    • Status Meter Gauge: Ability to specify border and color for plot area, string title, corner radius and border, displaying indicator wider than the plot area
    • Circular Status Meter Gauge: Ability to control the radius, start angle and angle extent

    • Support for human shapes for Rating Gauge and Led Gauge
    • Vertical orientation for Rating Gauge

For more details on Gauge configuration consult JET blog articles Introduction to Gauges Part 1: Status Meter Options and Best Practices and Introduction to Gauges Part 2: Circular Status Meter.

Tuesday Mar 01, 2016

Oracle JET 2.0.0: Now Available Open Source with New Data Visualization Features

Oracle JET 2.0.0 was just released and is now available as open source on GitHub!

JET 2.0.0 includes a number of new Data Visualization features, including:

Picto Chart

A new PictoChart visualization lets the user visualize numeric values using images. Common in infographics, this component provides a more interesting and effective way to present numerical information than traditional tables and lists. The JET PictoChart supports the same animation and interactivity features as our other visualizations, including selection, highlighting, and filtering, and we think it will be an essential ingredient in producing compelling dashboards.


For an in-depth look at PictoChart, read this JET blog article: Introduction to PictoChart.

New Charting Features

New charting features include:

  • Ability to zoom and scroll the chart only in one direction


  • Ability to display total count for the bar in stacked bar chart

  • Ability to wrap label text on chart axis labels

  • Ability to display different data series and chart type in chart "zoom & scroll" window.
  • Support for categories on reference objects, allowing the reference objects to participate in the highlighting and filtering across data visualizations

There are many more new data visualization and framework features in JET 2.0.0. For a complete list of new features, read the blog article "What's New in Oracle JET 2.0.0" and consult the JET release notes.

For a series of in-depth articles on JET Data Visualizations consult JET Data Visualizations FAQ.

Thursday Feb 11, 2016

Customizing Tile Size in Masonry Layout

Masonry Layout is a new layout that displays its contents in a grid, like a dashboard. It was introduced in ADF 12.2.1, MAF 2.2, and JET 1.1.2.This article focuses on customizing the masonry layout tile sizes in ADF.

In ADF, masonry layout can take any ADF Faces component as a child, respectively called a tile. Tiles can span columns and rows. When the UI is provided, users can insert, delete, reorder and resize the tiles. When the available display space changes, the masonry layout rearranges the tiles to fit into the new display size.

masonry layout work better app

In this blog post and video, Shay Shmeltzer shows how to use masonry layout in JDeveloper 12.2.1.

As mentioned in the video, masonry layout uses built in styleClasses for the size of masonry tiles.

The style class names are in the format of AFMasonryTileSize1x1 with support for the following tile sizes: 1x1, 1x2, 1x3, 2x1, 2x2, 2x3, 3x1, and 3x2.

One of the questions frequently asked by the customers of this layout is how do we change the default size of the tiles?

Answer: The application can customize card sizes per instance of the masonryLayout through skinning. 

The application developer can define card sizes to be different based on additional app-defined style classes.  For example, the application developer could define a different set of card sizes when the "AppSmall" style class is applied to the masonryLayout:

 .AppSmall .AFMasonryTileSize1x1 {
   width: 100px;
   height: 100px;
   margin: 5px;
 }
 .AppSmall .AFMasonryTileSize2x1 {
   width: 210px;
   height: 100px;
   margin: 5px;
 }

 ..and so on

Then, in the jspx page, the application developer would use the following code:

 <af:masonryLayout id="ml1" styleClass="AppSmall">
   <af:panelGroupLayout id="pgl1" styleClass="AFMasonryTileSize1x1">
   </af:panelGroupLayout>
 </af:masonryLayout>

Please note that the app must define a complete set of AFMasonryTileSize*x* style classes for all column and row spans so that all sizes are consistent within the set for each instance of the masonryLayout.  

For more information, please consult the chapter "Displaying Contents in a Dynamic Grid Using a masonryLayout Component" in the "Organizing Content on Web Pages" section of Fusion Middleware Guide to Developing User Interfaces with Oracle ADF Faces.

We also recommend to look at code samples for Masonry Layout and Masonry Layout Behavior in the hosted ADF Faces 12c Component Demo.

Thursday Feb 04, 2016

Data Visualizations FAQ and New Data Visualization Articles on the JET Blog

Check out the latest data visualization articles on the Oracle JET Blog!

The Data Visualization FAQ provides pointers to answers to many questions about DVT components, such as which visualizations to use for which data sets, best practices, and more.

For our ADF and MAF customers, here are some very relevant articles that will help you with the common issues across the frameworks:

1. Which visualization should I use for percentage data sets?

Blog article: Parts of a Whole: Visualizations for Percentage Data Sets


2. How do I show integers on the Y axis?

Blog article: How to Configure Charts for Integer Data

Please note: The article talks about using minStep attribute in JET. For ADF or MAF users, the corresponding attribute on the yAxis tag is minimumIncrement.

3. How do I format my status meter gauge?

Blog article: Introduction to Gauges Part 1: Status Meter Options and Best Practices

Please note: the articles talk about formatting in JET, but all the functionality is also supported in ADF and MAF.

Wednesday Nov 25, 2015

Chart Tips: Coloring by Group and Displaying Attribute Groups in the Legend

This article talks about how to color the chart data by group using attribute groups, how to display the attribute group colors in the chart legend, and how to hide the axis tick labels.[Read More]

Monday Nov 02, 2015

Oracle OpenWorld 2015: JET and Data Visualizations

There were many great sessions and announcements at Oracle OpenWorld 2015, but for me the most exciting was the announcement of Oracle Javascript Extension Toolkit (JET). Oracle JET is our new development framework, targeted at intermediate to advanced JavaScript developers working on client-side applications. It's a collection of open source JavaScript libraries along with a set of Oracle contributed JavaScript libraries that make it as simple and efficient as possible to build applications that consume and interact with Oracle products and services, especially Oracle Cloud Services.

JET was formally announced by our VP Chris Tonas in his general session: Revolutionizing Application Development with Oracle Cloud on Tuesday, October 27th.

Chris showed how a business user ("citizen developer") can use Oracle Application Builder Cloud Service to connect to data from Oracle Sales Cloud and develop a custom application without writing any code. He talked about how this application can then further be extended by developing a custom component in JET using Developer Cloud. For this session we developed a demo in JET using our Data Visualization components to show a sales forecasting scenario. Brian Fry (ABCS and Tools PM) showed how a developer can edit code in Developer Cloud, and then Chris showed how to bring this custom forecasting UI back into Application Builder Cloud Service.

Chris explained how with the introduction of JET we now provide the right technology for the right person:


There were several great sessions focused solely on JET by JET PM John Brock (JB) and Netbeans/JET PM Geertjan Wielenga. I attended their session on Wednesday: Embracing JavaScript: Experience the New Oracle JavaScript Extension Toolkit [CON8091] in which JB gave an overview of JET and showed all the great collateral that is now available on the JET website, including an overview of the JET cookbook and how to use it to learn to code in JET.

Geertjan showed a great demo of Oracle JET plugin for Netbeans, which he also described in this blog article.

Another session that was nicely attended was Oracle Alta UI Design: Implementing Oracle’s Best Practices in Your Applications [CON8296] presented by Laura Akel (Alta/ADF/MAX PM) and Richard Wright (UX). Laura and Richard explained how the Alta UI is the unifying theme across our UI frameworks: ADF, JET, and MAF. Laura gave a great demo of our sample WorkBetter application that was designed and built to showcase the Oracle Alta UI. She showed the latest features in MAF 2.2.0, ADF 12.2.1 and JET v1.1.2. Richard talked about the updated Oracle Alta UI site, the Alta guidelines, and the key principles of implementing an Alta UI.

Our data visualization session: Creating Stunning, Mobile-First User Interfaces with Oracle Data Visualizations [CON8185] that was presented by Hugh Zhang, Jairam Ramanathan (JET/DVT development managers) and myself was also heavily focused on JET. We started by giving an introduction to JET and showing the forecasting demo from Chris Tonas's general session in more detail.

Jairam Ramanathan (JET/DVT development manager) showed a new demo which we called Data Visualization Explorer. He used a data set about popular programming languages that Chris also talked about in his general session, and a data set about basketball, which tied well into Thomas Kurian's keynote.
He talked about the importance of choosing the right visualization, sharing colors across components, and mentioned how new Oracle Data Visualizations Cloud Service (announced during Larry Ellison's and Thomas Kurian's keynotes) uses our data visualization and the JET framework, which is also the case with the latest Enterprise Manager Cloud services.
Jairam than handed over to Hugh Zhang (JET/DVT development manager), who showed how to get started with JET quick start template. He showed first how to write a simpler example in JET with a gauge and two-way binding, and then showed how to set up associated views with highlighting. Hugh then showed the JET website and data visualization examples in the JET cookbook, and how one can change the code in cookbook examples and see the changes right away.

We concluded our session by talking about the new Data Visualizations features in ADF 12.2.1 and MAF 2.2.0. which were just released, and how we can now easily expose functionality across development frameworks because we have a shared layer in Oracle Data Visualizations.

Hands-On Labs

JB and Geertjan held two hands-on labs: Getting Started with Oracle JavaScript Extension Toolkit, which were both full. The hands-on lab script teaches you how to get started with Oracle JET using NetBeans IDE 8.1. The full script for the hands-on labs is available on the JET website here.

Development Tools PMs Shay Shmeltzer, Laura Akel, and I held a hands-on lab titled Build Responsive Web Applications with Oracle ADF [HOL10380], which focused on using the new masonry layout and data visualization features in ADF 12.2.1. This lab was also very well attended and we received many requests for the script.

Demogrounds

We had many customers visit us at the demogrounds for Application Development Framework, Mobile Application Framework, and JET that were next to each other. JET booth had a lot of interest, and we had great representation at the booth by JET development (Amy Dai, Jairam and Hugh) along with our PM team. Below is a photo of John Brock (JB) JET PM and Katarina Obradovic-Sarkic (author of this post) at the JET demogrounds booth.

Laura Akel (Alta/ADF/MAX PM) talking to Oracle Ace Director Lucas Jellema of AMIS at the ADF Faces booth:


On one end of the Moscone South demogrounds there were showcase booths, which were an even better way to present to customers. Here is a photo of Denis Tyrell, Mobile and Tools PM Director, demoing how to build an application with Mobile Application Accelerator (MAX), part of the Mobile Cloud Service (not yet released) at the Mobile Showcase booth:

Leave us a comment if you are looking for any materials that we presented at OpenWorld and hope to see you again next year!

Friday Oct 23, 2015

New Data Visualization Features in JDeveloper and ADF 12.2.1

JDeveloper and ADF 12.2.1 is now available for download on Oracle Technology Network. The following new features have been introduced in the UI layer:

  • Alta Skin is now enabled by default in all the ADF Faces and Data Visualization components. Alta skin is an essential component of the new Oracle Alta UI design system. For more information on Oracle Alta UI please refer to the newly redesigned Alta design patterns website.
  • Masonry Layout is a new layout that displays its contents in a grid, like a dashboard. It can take any ADF Faces component as a child, respectively called a tile. Tiles can span columns and rows. When the UI is provided, users can insert, delete, reorder and resize the tiles. When the available display space changes, the masonry layout rearranges the tiles to fit into the new display size.


  • New Data Visualization Component: NBox is used to visualize and compare data across two dimensions. It is commonly used to visualize and compare employee performance. A new data-binding dialog at design time for the NBox component is also available.


  • Pie Chart Enhancements:The innerRadius attribute on the Pie Chart lets the users create a "donut" chart look. There are also new attributes to control pie slice gaps, label positioning, and using pie slice explosion as a selection effect.


  • Funnel Chart has replaced a now deprecated Funnel Graph. Funnel charts are typically used to visualize a process where the different sections of the funnel represent different stages in the process, for example stages in a sales cycle.


  • Polar coordinate system: Several Chart types now support a new coordinateSystem attribute that specifies if the chart uses Cartesian or Polar coordinates. A polar chart has a radial y-axis and a tangential x-axis. Polar coordinate system can be used for bar, line, area, combination, scatter, and bubble charts. Polygonal grid shape (commonly known as "radar") is supported for polar line and area charts.
    • Polar charts are recommended for directional data. (e.g. air drag vs. boat angle)

    • Polar charts are also recommended for categorical data where all categories are equally important. (e.g performance appraisal categories)

Below are examples of Polar Bar and Polar Line Charts. Polar line has a polygonal shape grid also known as radar chart:

  •  Here are examples of scatter and bubble polar charts:


  • Thematic Map - Map Provider feature allows Thematic Map to be configured to retrieve geographic data from any data source through the MapProvider APIs, including Oracle eLocation services.The MapProvider APIs  allow the custom basemap to be configured and treated like a built-in basemap with all the same functionality including drilling, short/long labels, custom region supprt, pointLocation projections, etc.


  • New Charting Design Time UI provides the ability for an end user to view a dynamic chart sample while binding data to various sections of the chart.
  • New NBox design time is now available:

  • The Diagram visualization, available since 12.1.3 release, now has support for design-time creation and data-binding:


You can read about other new features in JDeveloper and key themes for the release in this post by Shay Shmeltzer and the New Features document, and play with the ADF Faces Rich Client demo to learn more about the new features in ADF Faces and Data Visualization components.


Thursday Oct 22, 2015

Visit Us at OpenWorld 2015!


If you are coming to Oracle OpenWorld and JavaOne this year, here is a list of sessions and hands-on labs related to Data Visualization in our frameworks and tools that we don't want you to miss.

OpenWorld Conference Sessions

General Session: Revolutionizing Application Development with Oracle Cloud [GEN9500] is going to be presented by our VP Chris Tonas on Tuesday at 11am in Moscone South - 103.

The following Conference Sessions are all going to be in Moscone South:

  • Oracle Alta UI Design: Implementing Oracle’s Best Practices in Your Applications [CON8296], Monday, 1:30pm, Room 274
  • Don’t Develop—Compose Your Mobile Applications Easily with Oracle Mobile Cloud Service [CON9489], Tuesday, 4pm, Room 270
  • Next-Generation JavaScript, REST, and HTML5 Development with Oracle [CON8469], Tuesday 4pm, Room 304
  • Meet the Experts: Oracle’s Development Tools and Frameworks [MTE10022], Tuesday, 6pm, Room 300
  • Embracing JavaScript: Experience the New Oracle JavaScript Extension Toolkit [CON8091], Wednesday, 12:15pm, Room 304

Our session below has Data Visualization as the primary focus:

  • Creating Stunning, Mobile-First User Interfaces with Oracle Data Visualizations [CON8185], Wednesday, 4:15pm, Room 304

JavaOne Conference Sessions

The following sessions will be presented at JavaOne:

  • HTML5 and JavaScript Clients in an Enterprise Application World [CON7767], Tuesday, 11am,  Hilton - Imperial Ballroom B
  • Coding for Desktop and Mobile with HTML5 and Java EE 7 [CON7773], Tuesday, 5:30pm,  Hilton - Yosemite A/B/C

Hands-On Labs

The following hands on labs focus on Data Visualizations in our different frameworks and are both located in Hotel Nikko - Nikko Ballroom III (3rd Floor):

  • Build Responsive Web Applications with Oracle ADF [HOL10380], Monday, 5pm
  • Getting Started with Oracle JavaScript Extension Toolkit [HOL10407], Wednesday, 8:45 am and Thursday, 12:30pm

Demo Grounds

Visit us at at the following demo booths in the Fusion Middleware Demogrounds:

  • Application Development Framework/Mobile Application Framework
  • Oracle JavaScript Extension Toolkit

See a complete list of development tools and frameworks sessions here.

We are looking forward to seeing you there!


Thursday Mar 19, 2015

Data Visualizations at Visualizing Information Design Jam

Oracle Data Visualizations were featured in a great Oracle event organized by Laurie Pattison and our colleagues at the AppsUX innovation team:

The goal of this event was to bring together different teams within Oracle, and with a lot of help and guidance from the UX team, think about how to make our product more visually engaging and come up with ideas for new visualizations.

In preparation for this event we did several training sessions, one of which was my presentation on what are the opportunities to use data visualizations and how to choose your visualization techniques.

Laurie did a great session on the process for designing a data visualization, starting with thinking about who your users are and what are the business problems they are trying to address. Read her blog post A Data Visualization Design Approach on this topic at the Apps UX Innovation Events blog.

Donna Scheele presented on how to create visually engaging UIs using Alta concepts and also blogged about this topic on the Middleware UX blog.

16 teams across Fusion Apps, Middleware and Database participated in the event. All teams came prepared with a business problem they were trying to solve in the form of an elevator pitch.  Mentors were available to work with teams in advance to solidify the pitch into something actionable that could be reasonably be accomplished in less than two days. Given that they only had 3 minutes to present at the end of the jam, both mentors and judges reviewed the pitches in detail in advance for the appropriate context.
The design jam started with a design workshop given by visual design and data visualization experts in AppsUX, John Cartan and Julia Blyumen. After this 3 hour workshop, the participants were ready to start designing, and they only had a little more than a day to come up with their new design.

To find out more about the event and the winning designs, read this report on the event by Laurie Pattison on the Apps UX Innovation Events Blog.

mentors

Mentors (from left to right): Julia Blyumen, Katy Massucco, John Cartan, from AppsUX, me (Katia Obradovic-Sarkic, DVT), Laurie Pattison (blog), Erika Webb (AppsUX), Soraya Younossi, Donna Scheele (blog) from Middleware UX, Serguei Orozco, Mindi Cummins (AppsUX).

The Visualizing Information Design Jam was a great success and many teams came up with new designs that we will hopefully see in the Oracle products soon. 

Friday Feb 27, 2015

Charts Tips: Zoom and Scroll with the Overview Window, Colors using Attribute Groups

The new Charts introduced in ADF 12.1.3 and MAF 2.0.x offer superior performance and user experience, including:

  • Client-side layout and interactivity
  • Redesigned zoom and scroll
  • Marquee zoom and selection
  • Redesigned Time axis
  • Improved data labeling

chart zooming and scrolling

Did you know how to turn on the overview window for zooming and scrolling, like shown in the image above?

Let's take you through some simple steps to enable zooming and scrolling and the overview window.

Assuming you created a simple bar chart displaying employee salaries, to enable zooming and scrolling, in the Property Inspector under the Behavior section, set the zoomAndScroll to live.

bar properties

Setting the zoomAndScroll property to "live" enables scrolling on the Chart using a thin scrollbar, but does not enable the full overview window.

To enable the display of the overview window, you need to insert the overview facet on the Chart:

Next, insert the dvt:overview tag into the overview facet:


Run the page and test your new zoom and scroll overview window:

bar zoom and scroll

If you would like to make the bar colors alternate using the built-in Alta color styles, insert the dvt:attributeGroups tag and set the type to color.

<dvt:attributeGroups id="ag1" type="color" value="#{row.LastName}" />

The attribute groups value varies by row.lastName, which means that each bar displaying employee salaries by last name will be rendered in different color:


Our employee salary chart is now displayed with a set of built-in Alta colors and with the zooming and scrolling overview window enabled.

Monday Jan 12, 2015

WorkBetter Alta Sample Now Available!

The Oracle ADF team is happy to announce the release of the Oracle Alta WorkBetter ADF application sample, which demonstrates best practices in applying Oracle Alta UI design patterns.

The WorkBetter sample demonstrates how to use many Data Visualization components such as: Charts, Gauges, Geomap, Treemap, Sunburst, and Timeline. It also contains code samples for how to implement interactivity with Data Visualization components, for example how to use selection on the bar chart to navigate to a new page.

You can now download the complete source code for this sample application, so you can further learn how to develop cool user interfaces with Oracle ADF Faces that implement the Oracle Alta UI design patterns.

The image below shows how a small form factor Treemap is used inside the ListView rows to visualize employee compensation.

Work Better Treemap

The latest version of the WorkBetter demo application is hosted here so you can play with it.

Please send us your feedback and post any questions on this blog!

Friday Jan 09, 2015

A Guide to Diagram – Part 11 - Selected Node Information

A short article in the diagram series showing how you can obtain information about the node that a user has just clicked on in your event handlers.[Read More]

Wednesday Nov 26, 2014

A Guide to Diagram – Part 10 - Inter-Group Links

This article continues the diagram series with a focus on the advanced topic of routing cross container links in your diagrams[Read More]

Friday Oct 17, 2014

Controlling Your Diagram Viewport

When you start to build your own diagrams you may be wondering how to control the "initial" view of the diagram inside of the component.  By default, the initial view that you see will be sized correctly to see the entirety of the diagram - all nodes will be visible.  However, what if you need more control? Well there are two approaches you can take, the first a simple declarative approach and the second which involves your layout code. 

Looking at the simple approach first.  If you look at the diagramNodes component you will see a property called centerRowKey. This property can be set to an EL expression which needs to evaluate to the rowKey of the node that you want to center on - typically you can use this in combination with node selection (see: Guide to Diagram Part 11- Selected Node Information) to allow a user to re-focus the diagram to the clicked node.  

 Need More Control?

Now centerRowKey is perfectly suitable for most situations, however, what if you need more control?  An example of this might be where you want to start the view of the diagram off in a zoomed state - just focusing on a particular subset of nodes for example. 

Fortunately there are a  couple of JavaScript APIs that you can call from your layout code that come in handy here. 

  1. The getComponentSize() function on the layoutContext.  This returns a DvtDiagramRectangle object which encodes the base width and the height of the diagram component. Note, however, that the logical size of the diagram may be smaller / different from this depending on it's shape relative to the  component
  2. The setViewport( DvtDiagramRectangle) function, also on the layoutContext.

 Both of these use DvtDiagramRectangle which is an object with the properties .x,.y,.w and .h, you can hopefully guess what each of those properties holds! A new DvyDiagramRectangle object can be created using the code:

var vp = new DvtDiagramRectangle(xpos, ypos,  width, height) 

For the task in hand, the setViewport() function is what we are interested in. You can think of it as drawing a scaled rectangle over the entirety of the diagram. If you proportionally reduce the size of the viewport then that will zoom in on the diagram. So you use the width and height attributes of the DvtDiagramRectangle that you pass to control the scaling, and then the x and y position to place the zoomed viewport relative to the base diagram. 

For example - lets say I want to zoom into the centre of a diagram that is defined as  a rectangle diagRect, I would use:

layoutContext.setViewport(new DvtDiagramRectangle((diagRec.w/4),
                                                  (diagRect.h/4),
                                                  (diagRect.w/2),
                                                  (diagRec.h/2)));

Alternatively the following would apply the same zoom level but show the top left hand quadrant of the diagram:

layoutContext.setViewport(new DvtDiagramRectangle((diagRec.w/2),
                                                  0,
                                                  (diagRect.w/2),
                                                  (diagRec.h/2)));

The one thing to watch out for here is not to assume that the  rectangle returned by getComponentSize is actually the size of your diagram, it is not.  It provides the basic size in pixels of the physical diagram component.  The diagram (nodes and links) itself is sized based on your layout and then scaled to provide a best fit in the available space in that physical component. Accordingly if you want to set the viewport, it pays to keep track of how wide and high your diagram actually grows to as you add nodes and links.  You can then work out the scaling factor that will have to be used to "fit" that into the physical component and then you will have the information that you need to manipulate the view port.

About

Oracle Data Visualizations provide a broad range of beautiful, interactive components for viewing and understanding data. This blog covers topics on the new features in Oracle Data Visualization components and how-to articles on advanced functionality.

Search

Categories
Archives
« May 2016
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    
       
Today