Handle data load complete event
Description
The following code shows how to handle data load complete event.
Example
<!--from ww w . j av a 2 s . c o m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>
$(function () {
$('#container').highcharts({
data: {
csv: document.getElementById('csv').innerHTML,
complete: function (options) {
// Add another series to the output
options.series.push({
name: 'Trend',
data: [{ x: 2000, y: -0.4 }, { x: 2010, y: 0.5 }],
dashStyle: 'dash'
});
}
},
series: [{
lineWidth: 1
}, {
type: 'areaspline',
color: '#c4392d',
negativeColor: '#5679c4',
fillOpacity: 0.5
}]
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
<pre id="csv" style="display:none">Year,Annual mean,5 year mean
2003,0.57,0.55
2004,0.9,1.56
2005,0.63,0.57
2006,0.56,0.54
2007,0.59,1.56
2008,0.44,0.56
2009,0.57,0.55
2010,0.64,0.54
2011,0.2,,0.94
2012,0.52,</pre>
</body>
</html>