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