Skip navigation
ANNOUNCEMENT: community.oracle.com is currently Read only due to planned upgrade until 28-Sep-2020 9:30 AM Pacific Time. Any changes made during Read only mode will be lost and will need to be re-entered when the application is back read/write.

Oracle JET

3 Posts authored by: Pangus Ho-Oracle
Pangus Ho-Oracle

Chart Drag & Drop

Posted by Pangus Ho-Oracle Aug 30, 2016

Drag and drop is a new ojChart feature that was introduced in JET 2.0.2. In addition to dragging between charts, this feature also supports dragging to and from other components. Similar to the other JET components, it is built using the HTML5 drag and drop.

chartDnD.gif

ojChart supports dragging of data items (i.e. bars, bubbles, etc.), series objects (i.e. legend items), and group objects (i.e. categorical axis labels). To set up a chart as a drag source, you only need to set the dataTypes attribute of either items, series, or groups option inside dnd.drag. The dataTypes are the MIME types to use for the data context JSON in the dataTransfer object. The chart objects (items, series, or groups) with the dataTypes specified will automatically become draggable.

 

HTML:

<div id="bubbleChart1" data-bind="ojComponent: {
    component: 'ojChart',
    type: 'bubble',
    series: bubbleSeries,
    groups: bubbleGroups,
    dnd: {
      drag: {
        items: {
          dataTypes: ['text/bubblechart']
        }
      }
    }
}">
</div>

 

The chart will automatically populate the dataTransfer object with the data context JSON of the dragged items using dataTransfer.setData() method. You can retrieve the JSON using dataTransfer.getData() method. Here's an example of how the data context JSON may look like for a bubble chart item:

[
  {
    id: 'Series 1; Group B'    
    series: 'Series 1',
    group: 'Group B',
    x: 40,
    y: 24,
    z: 12,
    seriesData: {...},
    groupData: [...],
    data: {...}
  } 
]

 

ojChart also supports dropping onto its plot area, legend, and axes. To set up a chart as a drop target, you only need to specify the drop callback and the dataTypes for either plotArea, legend, xAxis, or yAxis option inside dnd.drop. If the dataTypes in the dataTransfer matches the specified dataTypes in chart option, then the chart will accept the drop.

 

HTML:

<div id="bubbleChart2" data-bind="ojComponent: {
    component: 'ojChart',
    type: 'bubble',
    series: bubbleSeries,
    groups: bubbleGroups,
    dnd: {
      drop: {
        plotArea: {
          dataTypes: ['text/bubblechart'],
          drop: dropCallback
        }
      }
    }
}">
</div>

 

JS:

this.dropCallback = function (event, ui) {
  var data = event.dataTransfer.getData("text/bubblechart");
  if (data) {
    var dataContext = JSON.parse(data)[0];

    // Update the chart to react to the drop
    ...
  }
};

 

In the future releases of JET, we will also expose the drag and drop features for other data visualization components.

 

For more information and demos, please visit the following JET Cookbook pages:

 

For complete API documentation, please visit the JET JSDoc.

Pangus Ho-Oracle

Box Plot

Posted by Pangus Ho-Oracle Aug 29, 2016

Box plot is a new chart type that was introduced in JET 2.1.0. Box plots are most commonly used to visualize the statistical distributions of groups of values. In each box plot shape, the box displays first quartile, second quartile (i.e. median), and third quartile values, while the whiskers display the minimum and maximum values. Outlier values can also be displayed using additional point markers.

Screen Shot 2016-08-26 at 4.35.37 PM.png

To create a basic box plot such as above, you only need to create an ojChart with {type: 'boxPlot'} and supply the low, q1, q2, q3, and high values for each data item. Outlier values can be specified by providing a nested items array for each data item.

 

HTML

<div id="boxPlot" data-bind="ojComponent: {
        component: 'ojChart', 
        type: 'boxPlot',
        series: boxPlotSeries, 
        groups: boxPlotGroups
}">
</div>

 

JS

self.boxPlotSeries = ko.observableArray([
    {name: 'Series 1', items : [
        {low: 3, q1: 8, q2: 12, q3: 17, high: 28, items: [40, 50]},
        {low: 21, q1: 24, q2: 36, q3: 44, high: 65, items: [15]},
        {low: 7, q1: 16, q2: 23, q3: 32, high: 49},
        {low: 8, q1: 12, q2: 16, q3: 27, high: 49, items: [61]}
    ]}
]);

self.boxPlotGroups = ko.observableArray(['Group A', 'Group B', 'Group C', 'Group D']);

 

The style of every part of the box plot shape can be customized. For example, it's possible to color the top and bottom segments of the boxes differently, or to render the whiskers with different colors and thicknesses. The styling attributes are listed in the JET JSDoc.

 

It's also possible to use a box plot series within a combo chart. In the example below, a line series is added to a box plot in order to display the mean values.

 

Screen Shot 2016-08-26 at 5.01.02 PM.png

 

Similar to the other chart types, box plot also supports a range of interactivity features, such as selection, filtering, highlighting, zoom & scroll, drag & drop, and animations. More information and demos can be found in the JET Cookbook.

I'd like to introduce PictoChart, the newest addition to the JET data visualization components. A PictoChart uses discrete icons to visualize an absolute number or relative sizes. It is extensively used in infographics as a more interesting and effective way to present numerical information than traditional tables and lists. The JET PictoChart comes complete with various interactivity features, such as highlighting, filtering, selection, and animations, which makes it easy for app developers to create a visually compelling dashboard. To get started, I'm going to describe some of the most common usages of a PictoChart, and how to achieve them.

 

1. Visualizing absolute numbers

 

PictoChart can be used to visualize absolute numbers using discrete icons. It can help applications display numbers in a more prominent and exciting way. In the example below, PictoCharts are used to visualize the average fertility rates in three different countries.

Screen Shot 2016-02-26 at 3.40.18 PM.png

Creating a PictoChart is easy. For each item, you just need to specify the name, count, shape, and color. The name is used for the tooltip and the accessibility string.

 

<!-- HTML Snippet. Do not forget to require the 'ojs/ojpictochart' component in your main.js. -->
<!-- Only the first PictoChart above is shown. -->
<div data-bind="ojComponent: {
  component: 'ojPictoChart',
  items: [
    {name: 'Niger', count: 7.6, shape: 'human', color: '#ED6647'}
  ],
  columnCount: 5
}">
</div>










 

 

2. Showing a part of a population

 

PictoChart can visualize the percentage or the ratio of a population that shares a certain feature. This tends to be more effective when the ratio is expressed using small integers, such as "1 out of 3" or "6 out of 10".

Screen Shot 2016-02-26 at 2.11.55 PM.png

In the code, the PictoChart item representing the population that does not share the feature can be defined without the color attribute. This item will be rendered grey by default to serve as a background.

 

<div data-bind="ojComponent:{
  component: 'ojPictoChart',
  items: [
    {shape: 'human', count: 7, color:'#ED6647'},
    {shape: 'human', count: 3}
  ],
  animationOnDisplay: 'auto',
  columnCount: 5
}">
</div>










 

 

3. Displaying population distribution

 

PictoChart can also visualize population distribution. In this respect, PictoChart serves as a more exciting alternative to pie chart, which is more traditional for this kind of dataset. PictoChart tends to be more effective for this use case when the number of icons is small (a couple hundred at most); otherwise, the visualization may become unreadable. In the example below, the PictoChart displays the preferred mode for personal travel in England in the year of 2013.

Screen Shot 2016-02-29 at 2.43.21 PM.png

The example above uses custom SVGs to define the icon shapes. It can be achieved by passing the desired SVG path as a string to the item shape attribute. The custom SVG feature is currently only available for PictoChart and Legend, but we're looking to bring it across all data visualization components.

 

The two further use cases below are more advanced and less common, but they are also effective usages of PictoChart.

 

4. Comparing a collection of metrics

 

Multiple PictoCharts can be arranged in table to display comparisons of metrics. This can also be achieved with status meter gauges, but PictoCharts can be a more visually interesting alternative. In the example below, the PictoCharts visualize Apple product sales in the years of 2011 and 2012. Each square represents 10 million units.

Screen Shot 2016-02-26 at 2.50.54 PM.png

 

5. Presenting a collection of singletons

 

PictoChart can also be display a collection of singletons. In the example below, we display USA Winter Olympics medal count in 2014, and each circle represents a medal (gold, silver, or bronze). Each circle is a PictoChart item with the count of 1, and this allows each circle to carry different information. For example, if someone hovers over a medal, the tooltip will show the name of the athlete who won the medal.

Screen Shot 2016-02-26 at 2.53.08 PM.png

 

Associating PictoChart with other components

 

One big benefit of using PictoChart within the JET framework is that it's easy to make it interact with the other JET data visualization components. In the example below, we use the Legend component to simultaneously filter the data of the PictoChart, Treemap, Bar Chart, and Bubble Chart.

picto_assoc_filter.gif

All that we need to do to achieve this is to pass the same hiddenCategories observable array to all of the associated components.


In the HTML:

<!-- Legend -->
<div data-bind="ojComponent: {
    component: 'ojLegend',
    sections: legendSections,
    hideAndShowBehavior: 'on',
    hiddenCategories: hiddenCategoriesArray,
    ...
}">
</div>


<!-- PictoChart -->
<div data-bind="ojComponent: {
    component: 'ojPictoChart',
    items: pictoChartItems,
    hiddenCategories: hiddenCategoriesArray,
    ...
}">
</div>


<!-- similarly for the remaining components -->










 

In the JavaScript:

var hiddenCategoriesArray = ko.observableArray();












Similarly, we can also achieve associated highlighting and selection by using the highlightedCategories and selection observable arrays respectively. For more information on associated views, please refer to this post.