How to: |
The interaction property defines user interaction with the chart.
interaction: { click: 'string', mousedrag: 'string', dblclick: 'string', mousemove : 'string' },
where:
Is a string that defines interaction on mouse click. Valid values are:
Is a string that defines the interaction on mouse drag:
Is a string that defines the interaction on mouse double click. Valid values are:
Specifies a tooltip detection method for line, scatter, and area charts. Valid values are:
The following request generates a pie chart with the otherSlice set to a threshold of 8%. The interaction setting causes the chart to show the components of the otherSlice when the user clicks the other slice:
GRAPH FILE WF_RETAIL_LITE SUM COGS_US ACROSS PRODUCT_CATEGORY ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH PIE ON GRAPH SET STYLE * *GRAPH_JS dataLabels: {visible:true}, pieProperties: {otherSlice: {threshold: '8%'}}, interaction:{ click: 'otherSliceDrillDown' } , series: [ {series: 0, color: 'cyan', showDataValues:true}, {series: 1, color: 'bisque', showDataValues:true}, {series: 2, color: 'slateblue', showDataValues:true}, {series: 3, color: 'beige', showDataValues:true}, {series: 4, color: 'lightgreen', showDataValues:true}, {series: 5, color: 'yellow', showDataValues:true}, {series: 6, color: 'lightblue', showDataValues:true}, {series: 7, color: 'lavender', showDataValues:true}, {series: 8, color: 'limegreen', showDataValues:true}, {series: 9, color: 'red', showDataValues:true} ] *END ENDSTYLE END
On the output, the slices with values below the threshold percent are grouped together in one grey slice:
Clicking the other slice generates the following drill down of the other slice, showing the components and their percentages within the other slice. The blue arrow on the bottom left resets the original view, when clicked:
The following request generates a 3D area chart. The interaction properties enable rotating the chart on mousedrag and resetting the original view on double-click:
DEFINE FILE WF_RETAIL_LITE DIFFA = GROSS_PROFIT_US - REVENUE_US; DIFFB = REVENUE_US - GROSS_PROFIT_US; DIFFC = COGS_US - (COGS_US * DISCOUNT_US)/100; DIFFD = COGS_US - MSRP_US; END GRAPH FILE WF_RETAIL_LITE SUM DIFFA DIFFB DIFFC DIFFD BY PRODUCT_CATEGORY ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH 3DAREAS ON GRAPH SET STYLE * *GRAPH_JS interaction: {mousedrag: 'rotate', dblclick: 'resetView'}, series: [ {series: 0, color: 'cyan'}, {series: 1, color: 'bisque'}, {series: 2, color: 'lightblue'}, ] *END ENDSTYLE END
The following image shows the original view of the chart:
Clicking outside the chart and dragging rotates the chart:
Double-clicking outside the chart resets it to its original view.
The following request generates a line chart with nearest neighbor tooltip detection:
GRAPH FILE WF_RETAIL_LITE SUM COGS_US BY PRODUCT_CATEGORY ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH VLINE ON GRAPH SET STYLE * *GRAPH_JS interaction: { mousemove : 'nearestNeighbor' }, *END END
The following image shows that the tooltip is visible even though the mouse is not hovering over a data point on the chart:
WebFOCUS |