JET Data Visualizations: FAQ

Version 17

    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 Oracle JET v3.0.0.

     

    treemapNodeContent.png

    sunburstDrill.gif

     

    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.

    diagramDnD2.gif

    ganttDependencyLines.png

     

    JET 2.2.0

    The gantt chart now supports row labels:

    ganttRowLabels.png

     

    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, box plot 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 What's New in Oracle JET v2.1.0.

     

    gantt.png
    boxPlot.pngpyramid.png
    thematicMapLinks.pngdiagramContainers.png
    treemapModern1.png

    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 What's New in Oracle JET v2.0.2

    chartDnD.gif

    chartCustomFill.pngthematicMapMapProvider.png

     

    JET 2.0.1

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

    donutCenterContent.pngstatusMeterCenterContent.png

     

    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 word wrap for chart categorical axis labels, zoom direction for scatter and bubble charts, total labels for stacked bar charts, and animation for timeline. For more information, see What's New in Oracle JET 2.0.0.

     

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

    pictoCalendar.png

    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: Introduction to JET Data Visualization and Charting

     

    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: Associated Views: Cross Component Interactivity for Data Visualizations

     

    Data Sets

     

    Which visualization should I use for percentage data sets?

    Parts of a Whole: Visualizations for Percentage Data Sets

    percentages1.png

     

    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:

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

    Introduction to Gauges Part 2: Circular Status Meter

     

    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 to Create Colorful Bar Charts

    barColors2.png

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

    Categorical Axis: Text-Wrapping Feature

     

    chartWordWrap.png

     

    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?

    Customizing Center Content within Charts and Gauges

    donutCenterContent.png

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

    Custom Shape and Image Markers within Charts

    customMarkerShape.png

     

    How do I customize the pie chart slice labels?

    Pie Chart Slice Labels

     

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

    Chart Custom Fill and Stroke

     

    How do I display integers on the yAxis?

    How to Configure Charts for Integer Data

    yAxisIntegersAfter.png

     

    Diagram

    How do I create a diagram layout?

    Creating a Diagram Layout in JET

    DiagramTreeLayout.png

    How do I adjust the diagram viewport?

    Setting Diagram Viewport

     

    Gauge

     

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

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

    gaugeAnim.gif

    Introduction to Gauges Part 2: Circular Status Meter

    gaugeCircular.png

     

    How do I customize the circular status meter center content?

    Customizing Center Content within Charts and Gauges

    statusMeterCenterContent.png

     

    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: Two-Way Data Binding JET Components with Knockout

    optionChange: JSDoc: Class: ojStatusMeterGauge

    gaugeKnockoutTutorial.gif