x

interaction: {
   click: 'cstring'
   mousedrag: 'mdstring'
   dblclick: 'dcstring'
},

where:

'cstring'

Is a string that defines interaction on mouse click. Valid values are:

• 'otherSliceDrillDown', which shows the slices that make up the other slice.
• undefined. This is the default value.

'mdstring'

Is a string that defines the interaction on mouse drag:

• 'select', which selects a chart riser and marker.
• 'pan', which on mouse drag, shows other values in the data set.
• 'rotate', which for 3D charts only, rotates the 3D cube.
• undefined, which does nothing. This is the default value.

'dcstring'

Is a string that defines the interaction on mouse double click. Valid values are:

• 'resetView', which works with 'pan' and 'rotate'. It causes a double-click to reset the chart to its original view.
• undefined. This is the default value.

Top of page

Example: Enabling Interaction on a Pie Chart

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:

Top of page

Example: Enabling Rotation on a 3D Chart

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.