Scripting example 2
The bar chart in Figure 15-13 shows custom objects, stars, that are added through scripting. Each star indicates the highest value for each order status series. A script in afterRendering( ) performs the following tasks:
*
*
*
This script showcases Highchart’s renderer object, which supports drawing shapes, such as circles, rectangles, and stars, and adding images and text to a chart. The renderer is useful for adding annotations to a chart. For example, instead of a star, you can annotate the max value by creating text and enclosing it in a rectangle.
Figure 15-13  
The JavaScript code written for this bar chart appears in Listing 15-3.
Listing 15-3  
afterRendering: function(myChart)
{
// Get the chart object
chart=myChart.getCore();
// Get the max values from the y-axis series
for ( var i = 0; i < chart.series.length; i++ )
{
var mySeries = chart.series[i];
var maxValue = mySeries.data[0].y;
var maxValueIdx = 0;
if ( !maxValue )
{
maxValue = 0;
}
 
for ( var j = 1; j < mySeries.data.length; j++ )
{
var curValue = mySeries.data[j].y;
if ( !curValue )
{
continue;
}
 
if ( maxValue < mySeries.data[j].y )
{
maxValue = mySeries.data[j].y;
maxValueIdx = j;
}
}
 
var maxPoint = mySeries.data[maxValueIdx];
 
// Create a group to hold each annotation
var group = chart.renderer.g().add();
 
// Draw a star based on the width of the column,
// and add it to the group
var star = chart.renderer.path(['M', maxPoint.barW/2, 0,
'L',
maxPoint.barW*.4, maxPoint.barW/4,
maxPoint.barW*.05, maxPoint.barW/4,
maxPoint.barW*.325, maxPoint.barW*.475,
maxPoint.barW*.2, maxPoint.barW*.85,
maxPoint.barW/2, maxPoint.barW*.6,
maxPoint.barW*.8, maxPoint.barW*.85,
maxPoint.barW*.675, maxPoint.barW*.475,
maxPoint.barW*.95, maxPoint.barW/4,
maxPoint.barW*.6, maxPoint.barW/4,
'Z'])
.attr({
fill : 'yellow',
stroke: 'black',
'stroke-width': 1
}).add(group);
 
// Move the group to the top of the correct bar, and set it to
// draw in front of everything in the chart
group.attr({
translateX: maxPoint.barX + chart.plotLeft,
translateY: maxPoint.barY + chart.plotTop - maxPoint.barW - 10
});
group.toFront();
}
},

Additional Links:

Copyright Actuate Corporation 2012