What's New

JET 3.0.0

In JET 3.0.0, we've added a data visualization gallery with links to use cases, components, and featured demos. We've also added several enhancements to the sunburst and treemap, providing support for custom HTML content in the sunburst root node and treemap leaf nodes, as well as data exploration features like drilling and expand/collapse. For treemap leaf nodes, label wrapping is now supported and enabled by default, improving the readability of most treemaps. Several performance improvements were also implemented, focusing on large data bar and categorical axis charts. For more information, please see .

JET 2.3.0

• Drag and drop support is now available for diagram, allowing dragging of diagram nodes to other nodes, links, the background, and other components. Built using HTML5 drag and drop, this feature also supports dragging from other components, and will be exposed on more components in future releases.
• Gantt chart has been enhanced to support dependency lines, reference lines, and the custom tooltip functionality available in the other visualizations.
• Timeline has been updated to use the standard visualization scrollbars.

JET 2.2.0

The gantt chart now supports row labels:

JET 2.1.0

JET 2.1.0 is our biggest update to the visualizations yet, introducing the new gantt chart and time axis components, and pyramid chart types, container support on diagram, link support on thematic map, and a updated and more modern visual design for treemap. We've also added more performance improvements, especially for categorical axis and large bar, bubble, and scatter charts, as well several other fixes and enhancements. For more information, please see

JET 2.0.2

JET 2.0.2 includes more performance improvements, along with chart drag and drop, custom fill and stroke support for charts, custom basemap support for thematic map via GeoJSON, and several other small features. For more information, see

JET 2.0.1

JET 2.0.1 includes several data visualization features along with performance improvements and bug fixes. For more information, see:

JET 2.0.0

In the recent JET 2.0.0 release, we've introduced the Picto Chart visualization as well as several enhancements to our existing visualizations, including , , total labels for stacked bar charts, and animation for timeline. For more information, see .

See for ideas and samples on how to build calendars and other time based visualizations using the picto chart.

Overview

What visualizations are available in JET?

JET includes dozens of different visualization options, including:

• Charts: Bar, Line, Area, Scatter, Bubble, Pie, Box Plot, Funnel, Pyramid, and Stock Charts. Horizontal, Vertical, Polar Variants. Spark Charts for compact display of trends.

• Gauges: Horizontal and Circular Status Meter, Rating (Star) Gauge, LED Gauge

• Diagram: Supports custom layouts allowing for creation of arbitrary node and link graphs.

• Gantt

• Legend: For use on dashboards with multiple components.

• NBox

• Picto Chart

• Sunburst

• Tag Cloud

• Thematic Map

• Timeline

• Treemap

The best place to get started is the JET cookbook: Oracle JET - Data Visualizations

Why use JET visualizations?

Each JET visualization supports animation, accessibility, internationalization, test automation, and a range of interactivity features. These interaction features are designed so that visualizations can interact with each other to provide analytic capabilities beyond the sum of their parts.

More details about these high level features can be found here:

How do I get started?

Go to www.oraclejet.org for download links, the get started guide, demos, and everything else you'll need.

Common

Best Practices

What are the best practices when using multiple data visualizations?

The visualizations should not conflict with each other, and they should interact with each other to leverage each visualization's capabilities:

• Use consistent colors and styling: If salary is shown in one chart as blue, don't show it as green in another chart.
• Use a single legend for shared styles: Don't repeat legend information in each component.
• Enable cross-component data analysis: Highlighting and filtering can be enabled across components.

For details on what JET provides to support these best practices, see:

Data Sets

Which visualization should I use for percentage data sets?

Which visualization should I use for a single data value?

Consider using stylized text or the gauges. We'll be writing about popular gauge configurations in our blog:

Performance

Resources

For JET in general, we recommend starting with the Optimizing Performance section of the JET dev guide. For the individual components, there is a performance best practices section in each component's js doc. For example, here are the best practices for chart.

Optimization Tips

Chart

How do I color each bar differently in a bar chart?

How do I control label wrapping and truncation for a categorical axis chart?

How do I create trend lines?

Any inbuilt support for trend lines and sliders on the graph

How do I customize the donut chart center content?

How do I customize the markers on a bubble or scatter chart?

How do I customize the pie chart slice labels?

Pie Chart Slice Labels

How do I customize styling beyond what the API currently supports?

How do I display integers on the yAxis?

Diagram

How do I create a diagram layout?

How do I adjust the diagram viewport?

Gauge

How do I configure the status meter gauge to look the way I want?

How do I customize the circular status meter center content?

How do I support input on the status meter or rating gauges?

Set readOnly to false, and use knockout or the optionChange listener to react to the value changes:
knockout:

optionChange: JSDoc: Class: ojStatusMeterGauge