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.
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.

JET 2.1.0 is a major release of JET framework that contains over 140 new features and over 900 bug fixes.

 

Some of the largest new features are:

  • The first public release of the new Composite Component Architecture
  • Timezone support has now been added to converters and all JET UI Components that work with date/time
  • In-line editing is available in both ojTable and ojDataGrid
  • ListView now supports drag and drop as well as card layout in addition to the existing list layout

 

On the Mobile feature side there have been significant enhancements to the command line tooling:

  • Addition of SASS support
  • New starter templates for mobile and web
  • Refactoring of the command line tooling for easier maintence and expansion

 

More details on the new features are provided below, as well as in the release notes.

 

Composite Components

JET now exposes composite components which are reusable pieces of UI that can be embedded as a custom HTML element and can be composed of other composites, JET components, HTML, JavaScript, or CSS. See the composite documentation and demos for more information.

ccaDemo.gif

List View

JET ListView now supports reordering items within ListView as well as drag and drop with other JET components.

 

Menu

JET Menu now supports Sheet Menus. In all built-in themes, Menu launches as a sheet menu for small screen sizes, and as the existing "dropDown" style of menu for larger screen sizes. This behavior can vary by theme and by instance. See the new openOptions.display option and $menuDropDownThresholdWidth SASS variable for details.

 

Data Grid

JET Data Grid now supports in cell editing for data body cells. New options for editMode have been added to enable this feature.

Data Grid now also supports row and column "end headers" or "footers". This functionality can now be used to create visualizations such as a Trellis example below.

trellis1.png

 

New Data Visualization Features in JET 2.1.0

 

New Component: Gantt

The gantt component displays the start and finish dates of a set of tasks.

gantt.png

 

New Component: Time Axis

The timeline and gantt time axis has been introduced as a standalone component for use in tables and grids.

 

New Chart Type: Box Plot

The box plot displays distributions of data values through their quartiles, extents, and outliers.

boxPlot.png

 

New Chart Type: Pyramid Chart

Similar to an inverted funnel chart, the pyramid chart is used for visualizing parts of a whole. It is especially useful when the triangular shape helps to reinforce the relationship of the underlying data.

pyramid.png

 

Custom Fills and Strokes

Custom fills and strokes are now supported on diagram, gauge, nBox, picto chart, spark chart, sunburst, tag cloud, thematic map, and treemap. First introduced on chart in the 2.0.2 release, these components now support style and className options corresponding to thestyle and styleClass DOM attributes. These attributes override any other styling set through the component options, enabling the use of custom gradients, patterns, filters, and other SVG style properties.

 

Diagram Containers

Diagram now supports containers, allowing nodes (including other containers) to be contained within other nodes. Containers can be expanded and collapsed at runtime.

diagramContainers.png

 

Thematic Map Links

Thematic map now supports the display of links between locations. Often used to show airline routes or other data with origin and destination locations, the links can be styled and customized with start and end markers.

thematicMapLinks.png

Treemap Visual Design Updates

The treemap visual design has been updated to match the modern look of the other visualizations by replacing the node bevels with single pixel white gaps. This update also improves rendering performance of the treemap, since the gaps can be rendered without the additional shapes needed by the bevels.

treemapModern1.png

Other Enhancements

  • Chart axis titles will be automatically wrapped if they exceed the available space.
  • The oj.DiagramUtils.getLayout function can be used in many cases to simplify Diagram layout. Applications can now pass layout information through a javaScript object which will be used by this function to create the layout function that is required by the diagram.
  • Timeline events can now be rendered from top to bottom in addition to the existing behavior of bottom to top.
  • Performance has been improved for bubble charts, categorical axis charts, scatter charts, stacked charts, and treemap.

 

More information and best practices for using data visualization components can be found in JET Data Visualizations FAQ.

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.

In JET 2.0.2, we have given developers the ability to apply custom fills and strokes to both chart data and reference objects. This allows for a highly customized look and feel for chart data through custom gradients, patterns, filters, and images. In order to make these customizations, className and style atttributes have been added for series, items, and reference objects.

 

The style attribute accepts an object defining the inline style and will override any other styling specified through the other options. The component directly passes the style attribute to the respective SVG DOM style attribute and it is thus up to the developer to assure that values passed in are valid and applicable to the data and browser.

 

The className attribute accepts a string which references a CSS style class. The component will directly pass the string to the respective SVG DOM class attribute, so once again, it is up to the developer to insure the compatibility and validity of any style defined within the class.

 

For tooltips and hover interactivity, it's strongly recommended to also pass a representative color to the color attribute.

 

In JET 2.1.0, the style and className attributes will be supported in ojSparkChart, ojPictoChart, ojTreemap, ojSunburst, ojStatusMeterGauge, ojRatingGauge, and ojLedGauge, greatly enhancing the configurability of those components while at the same time allowing for homogeneity for cross component styling.

 

Example:

customF&amp;S.png

In this example, we have used a custom gradient and pattern to differentiate two different series. To use custom fills or strokes, create a separate SVG image on the page and define the fills or strokes in the defs element of that SVG image, referring to them in the style class or inline style. If this SVG is only used for fills and stroke make sure to set the width and height to 0 so that the SVG does not take up any space on the page.

 

HTML:

<div id='chart-container'>
    <svg height="0" width="0">
      <defs>
        <linearGradient id="gradient" x1="0%"  y1="100%">
          <stop offset="0%" style="stop-color: #66ccff"></stop>
          <stop offset="80%" style="stop-color: #0000FF"></stop>
          </linearGradient>
        <pattern id="pattern" 
          width="6" height="6" 
          patternUnits="userSpaceOnUse"
          patternTransform="rotate(45)">
          <rect width="6" height="6" transform="translate(0,0)" fill="#336791"></rect>
          <rect x="3" width="6" height="6" transform="translate(0,0)" fill="#C53333" ></rect>
        </pattern>
      </defs>
    </svg>
    <div id="barChart" data-bind="ojComponent: {
            component: 'ojChart', 
            type: 'bar', 
            series: barSeries
        }"
         style="max-width:500px;width:100%;height:350px;">
    </div>
</div>

 

JS:

self.barSeries = [{name: "Gradient", color: "#366DFF", style:{fill: "url(#gradient)"}, items: [40, 50]}, 
                  {name: "Pattern", color: "purple", style:{fill: "url(#pattern)"}, items: [30, 60]}];

 

For further information and complete demos click on one of the links below:

Attribute Documentation:  http://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojChart.html

Demo: http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=chart&demo=styleClass

Custom marker shapes and images were supported for Rating Gauge, LED Gauge, Legend, and Picto Chart starting with 2.0.0. In 2.0.1 support was expanded to Chart, Diagram, NBox, and Thematic Map. Here we'll explore how they can be used in charts.

 

Charts (and other data visualizations) have several built-in marker shapes to choose from, which come with default color and selection effects. SVG path commands can now be passed into the markerShape attribute on the series to specify different shapes that can also be styled using the default styling and selection effects used for the built-in markers. This is recommended for simple and single-color shapes, since it easily integrates them into the chart's look and feel.

 

On the other hand, if the image is multi-color, it can be specified using the source attribute on series. This doesn't have the default selection effects, so if using selection, the additional attributes: sourceSelected, sourceHover and sourceHoverSelected need to be set to specify the images for the selected and hover states.

 

Custom Shape Marker Example:

 

Custom Shape Marker.png

To use custom shapes, pass in SVG path commands to the markerShape attribute for the series or series item. Legend items also accept the markerShape attribute in order to customize the legend. Here is an example of the variables defined in the JavaScript layer which are used to produce the example above:

 

function ChartModel() {
        var car = 'M -53.582954,-415.35856 c -13.726061,-0.48561 -25.554278,3.95581 -32.848561,19.90697 l -26.336555,65.94442 c -19.18907,
                   5.29042 -27.54259,19.22853 -27.98516,30.66415 l 0,86.34597 25.30617,0 0,29.05676 c -1.22633,27.69243 44.157018,28.76272
                   45.171926,-0.28851 l 0.535799,-28.52096 164.160378,0 0.535798,28.52096 c 1.014898,29.05121 46.439469,27.98094 45.213139,
                   0.28851 l 0,-29.05676 25.26495,0 0,-86.34597 c -0.44257,-11.43562 -8.79607,-25.37375 -27.98516,-30.66415 l -26.33655,
                   -65.94442 c -7.29428,-15.95113 -19.122506,-20.39255 -32.848559,-19.90697 l -131.847615,0 z';
        var bike = 'M625.001 150l-25 50 100 37.5l0 112.5l-350 0l0 -50l50 0l0 -24.998c0 -12.305 -12.696 -25 -25 -25l-125 -.001c-25 0 -25 25 -25 25l0
                    25l75 0l0 50l-53.125 106.25c-14.984 -3.6 -30.792 -6.25 -46.876 -6.25 -110.458 0 -200 89.545 -200 200s89.543 200 200 200 200
                   -89.545 200 -200c0 0 50 .001 75 .001s25 -25.001 25 -25.001c5.136 -73.53 43.018 -131.201 92.188 -168.751 33.996 -25.96 70.637
                   -41.98 107.813 -49.999l0 51.563c-86.215 22.23 -150 99.028 -150 192.188 0 110.455 89.543 200 200 200s200 -89.545 200 -200c0
                   -91.415 -61.554 -166.76 -145.313 -190.626l-54.688 -109.375l0 -125c0 -14.495 -11.626 -30.618 -25 -35.938zm-275 250.001l225
                    0c-50 25.001 -125 150.001 -125 200.002l-57.812 -.001c-12.642 -49.02 -41.498 -90.298 -82.812 -117.187zm-150 125c69.036 0 125
                    55.964 125 125s-55.964 125 -125 125 -125 -55.964 -125 -125 55.964 -125 125 -125zm550 0c69.036 0 125 55.964 125 125s-55.964 125
                   -125 125 -125 -55.964 -125 -125 55.964 -125 125 -125z';

        this.series = [
          {name: 'Germany',
            items: [
              {x: 8.61, y: 6300, categories: ['Germany', 'Vehicles'], markerShape: car},
              {x: 8.61, y: 292, categories: ['Germany', 'Bikes'], markerShape: bike}]},
          {name: 'Italy',
            items: [
              {x: 8.61, y: 7000, categories: ['Italy', 'Vehicles'], markerShape: car},
              {x: 8.61, y: 73, categories: ['Italy', 'Bikes'], markerShape: bike}]},
          {name: 'Netherlands',
            items: [
              {x: 8.89, y: 6000, categories: ['Netherlands', 'Vehicles'], markerShape: car},
              {x: 8.89, y: 1095, categories: ['Netherlands', 'Bikes'], markerShape: bike}]},
          {name: 'Norway',
            items: [
              {x: 10.08, y: 5700, categories: ['Norway', 'Vehicles'], markerShape: car},
              {x: 10.08, y: 146, categories: ['Norway', 'Bikes'], markerShape: bike}]},
        ];
        this.legend = {position: 'end', symbolWidth: 18, sections: [{title: 'Mode of transportation',
                       items: [{text: 'Vehicles', id: 'Vehicles', markerShape: car},
                               {text: 'Bikes', id: 'Bikes', markerShape: bike}]}]}
        this.groups = ['Vehicles', 'Bikes'];
    }
    

 

Custom Image Marker Example:

Custom Image Marker.png

In order to define markers with custom images, simply define the source attribute for each marker and the color attribute which will define the tooltip color to be used. Here is an example of the variables defined in the JavaScript layer which is used to produce the example above:

this.series = [{name: 'Grapes',  color: '#A75DBA', source: "css/samples/cookbook/images/dvt/grapes-icon.png",
  items: [
     {x: 2106.1, y: 1206.0}]},
  {name: 'Strawberries', color: '#ED6647', source: "css/samples/cookbook/images/dvt/strawberry-icon.png",
   items: [
     {x: 2454.3, y: 355.9}]}
]
    

 

For further information and complete demos click on one of the links below.

Custom Image Markers Demo: http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=chart&demo=customMarkers

Custom Shape Markers Demo: http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=chart&demo=customImages