How to: |
The interaction property defines user interaction with the chart.
interaction: { click: 'cstring' mousedrag: 'mdstring' dblclick: 'dcstring' },
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:
The following request against the GGSALES data source generates a pie chart with the otherSlice set to a threshhold of 6%. The interaction setting causes the chart to show the components of the otherSlice when the user clicks the other slice:
GRAPH FILE GGSALES
SUM DOLLARS
ACROSS PRODUCT
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH PIE
ON GRAPH SET STYLE *
*GRAPH_JS
dataLabels: {visible:true},
pieProperties: {otherSlice: {threshold: '6%'}},
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 threshhold percent are grouped together in one grey slice:
Clicking on 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 against the GGSALES data source generates a 3D area chart. The interaction properties enable rotating the chart on mousedrag and resetting the original view on double-click:
DEFINE FILE GGSALES
DIFFD = DOLLARS-BUDDOLLARS;
DIFFU = UNITS-BUDUNITS;
DIFFD2 = BUDDOLLARS-DOLLARS;
DIFFU2 = BUDUNITS-UNITS;
END
GRAPH FILE GGSALES
SUM DIFFD DIFFD2 DIFFU DIFFU2
BY 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.
WebFOCUS |