YouTip

In this chapter, we will introduce Highcharts dynamic charts. We have already learned about Highcharts configuration syntax in previous chapters. Next, let's look at other Highcharts configurations. * * * ## Updating a Spline Chart Every Second ### chart.events Add a `load` method (chart load event) to the `chart.events` property. This generates random data points within 1000 milliseconds and creates the chart. chart: { events: { load: function () { // Update the chart every second var series = this.series; setInterval(function () { var x = (new Date()).getTime(), // Current time y = Math.random(); series.addPoint([x, y], true, true); }, 1000); } }} ### Example File name: highcharts_dynamic_spline.htm $(document).ready(function() { var chart = { type: 'spline', animation: Highcharts.svg, // don't animate in IE < IE 10. marginRight: 10, events: { load: function () { // set up the updating of the chart each second var series = this.series; setInterval(function () { var x = (new Date()).getTime(), // current time y = Math.random(); series.addPoint([x, y], true, true); }, 1000); } } }; var title = { text: 'Live random data' }; var xAxis = { type: 'datetime', tickPixelInterval: 150 }; var yAxis = { () $(document).ready(function() { var chart = { type: 'scatter', margin: [70, 50, 60, 80], events: { click: function (e) { // find the clicked values and the series var x = e.xAxis.value, y = e.yAxis.value, series = this.series; // Add it series.addPoint([x, y]); } } }; var title = { text: 'User supplied data' }; var subtitle = { text: 'Click the plot area to add a point. Click a point to remove it.' }; var xAxis = { gridLineWidth: 1, minPadding: 0.2, maxPadding: 0.2, maxZoom: 60 }; var yAxis = { title: { text: 'Value' }, minPadding: 0.2, maxPadding: 0.2, maxZoom: 60, plotLines: [{ value: 0, width: 1, color: '#808080' }] }; var legend = { enabled: false }; var exporting = { enabled: false }; var plotOptions = { series: { lineWidth: 1, point: { events: { 'click': function () { if (this.series.data.length > 1) { this.remove(); } } } } } }; var series= [{ data: [[20, 20], [80, 80]] }]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.xAxis = xAxis; json.yAxis = yAxis; json.legend = legend; json.exporting = exporting; json.series = series; json.plotOptions = plotOptions; $('#container').highcharts(json); }); The output of the above example is: