Skip navigation

To measure the impact of performance improvements and help guard against regressions, we run a suite of performance tests with each JET release. The test results are displayed in a table, where each row has a test link, times for the last few releases, the percentage delta for the last release, and a spark chart showing the trend over all previous releases. As we've introduced new components and functionality, the results table now has over 200 rows, each of which renders a spark chart. Even though each spark chart renders quickly (6-7ms), rendering 200 of them produces an noticeable delay.

performance.png

Instead of waiting for all the spark charts, we can defer their rendering by wrapping the spark data array in a Promise. Since the Promise will be fulfilled asynchronously, the table content will be rendered before the spark charts, allowing the user to start using the table much sooner:

<div data-bind="ojComponent: {
  component: 'ojSparkChart',
...
  trackResize: 'off',
  items: Promise.resolve([
    $data['0.7.0'],
    $data['1.0.0'], $data['1.0.1'], $data['1.0.2'],
    $data['1.1.0'], $data['1.1.1'], $data['1.1.2'],
    $data['1.2.0'], $data['2.0.0'], $data['2.0.1'], $data['2.0.2'],
    $data['trunk'], time
  ])
}" style="width: 140px; height: 30px;">
</div>



 

While we had actually added Promise support to help with rendering data that needs to be fetched or manipulated, this is a neat trick that can also be used with our other visualization components. It can also be used in more creative ways, such as to only defer (or further delay) the rendering of offscreen content or to render a simplified data set that becomes more detailed on a hover or click.

 

For more details, see the JS documentation for the spark chart:

http://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojSparkChart.html#items

v2.0.2 of Oracle JET is a minor release consisting of bug fixes and a few new features in the Data Visualization area.

 

There were a total of 115 bugs and Enhancement Requests (ER) completed in the last two months. For a list of bug fixes that impact external code, please refer to the Release Notes on the Oracle JET Website.

One of the biggest new features added in this release is the ability to import your own base maps in the JET ThematicMap component. An overview of what's new in the Data Visualization components area is provided below.

 

The creation of a new Oracle JET application using the command lines tools, or the NetBeans wizards will all build an application using this new release automatically.  Zip packages are also available from the OTN Download page.


For help with migrating from a previous version of Oracle JET, please visit the Migration Guide as well as a video about migration on the Oracle JET YouTube Channel


 

New Data Visualization Features in JET 2.0.2

Custom Fills and Strokes

Custom fills and strokes can now be applied to the chart data and reference objects using the new style and className options. These new options correspond to the style and styleClass DOM attributes and override any other styling set through the component options, enabling the use of custom gradients, patterns, filters, and other SVG style properties.

chartCustomFill.png

Drag and Drop

Drag and drop support has been added to chart, allowing dragging of the data items, series, and group objects and dropping to the plot area, axes, and legend. Built using HTML5 drag and drop, this feature also supports dragging to and from other components.

chartDnD.gif

Thematic Map Basemaps

GeoJSON can now be used to define custom basemaps for thematic map, and built in basemaps can now be loaded explicitly using RequireJS.

thematicMapMapProvider.png

Tooltip Knockout Templates

In addition to the JavaScript renderer for custom HTML content in tooltips, knockout template support is now available. This is especially useful for sharing tooltip customizations across visualizations that display different aspects of the same data set.

Other Enhancements

  • The whenReady API has been implemented for diagram, gauge, legend, picto chart, spark chart, sunburst, tag cloud, thematic map, and treemap. Previously added for chart, data grid, and list view in the v2.0.0 release, this API returns a Promise that resolves when the component is ready, such as after rendering and animations are complete.
  • The chart's drilling and selection event listeners have been enhanced to include the original data, seriesData, and groupData objects as fields on the uiobject. These fields can be used to retrieve the value and other information about the targeted data item.
  • Diagram panning can now be restricted to a single direction (horizontal or vertical) and node label alignment can now be customized.
  • Performance has been improved for rating gauges, categorical axis charts, and stacked charts.


Overview and best practices for Data Visualizations in JET is provided in the JET Data Visualizations FAQ.