Scripting example 1

The bar chart in Figure 15-12 shows the following custom options that are added through scripting:

A script in beforeDrawSeries( ) calculates the average sales total, and changes the color of bars that show data values above the average value.

A script in afterRendering( ) draws a plot line on the y-axis to show the average value, and adds a legend item to display the average value.

Figure 15-12

Customized options in a bar chart

The event handlers written for the bar chart appear in Listing 15-2.

Listing 15-2

Event-handling script for the bar chart with customized options

beforeDrawSeries: function(series, seriesOptions, tempChart, seriesIndex)

{

var totalValue = 0;

// First, find the average value for the series

for ( var i = 0; i < series.data.length; i++ )

{

totalValue += series.data[i].y;

}

aveValue = totalValue / series.data.length;

for ( var j = 0; j < series.data.length; j++ )

{

// Find out if this data point is above average

if ( series.data[j].y <= aveValue )

{

continue;

}

// The data point is above average. Color it green.

var pointOptions = seriesOptions.data[j];

pointOptions.color = 'green';

}

},

afterRendering: function(myChart)

{

// Get the chart object

chart=myChart.getCore();

var mySeries = chart.series[0];

 

// Assuming aveValue was set in the beforeDrawSeries function, draw a plot line at the average value

mySeries.yAxis.addPlotLine({

color: 'green',

width: 2,

value: aveValue,

id: 'averageValuePlotLine',

zIndex: 2

});

// Add a legend item that labels the plot line

// Do this by adding an empty series

chart.addSeries({

color: 'green',

name: 'Ave: $' + aveValue.toFixed(2),

  marker: {

enabled: false

}

});

},

Copyright Actuate Corporation 2012