Highcharts - SPLessons

Highcharts Dynamic Charts

Home > Lesson > Chapter 12
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Highcharts Dynamic Charts

Highcharts Dynamic Charts

shape Introduction

Highcharts Dynamic charts are used to draw data-based charts where data can change after the creation of chart. This chapter explains about the creation of Highcharts Dynamic charts and its types.

Dynamic charts

shape Description

Highcharts allows to create dynamic charts that can update the data at any given interval of time. All charts like line, bar, area, columns, etc. are supported by Highcharts Pie Charts. Usually, the Highcharts Pie Charts are used to represent the data that changes with time i.e. like temperature and stock market.

Types of Dynamic Charts

shape Description

Following are the two types of real-time dynamic charts supported by Highcharts that represents the dynamic data.

Spline updating each second

shape Description

Spline charts can be used to represent dynamic updates for any given data. A loaded method should be added to chart.event property in order to represent the data dynamically.

shape Example

Below example demonstrates how to create a chart with dynamic updates using the CDN access for both Highcharts and jQuery. [c] <!DOCTYPE html> <html> <head> <title>Spline updating each second</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div> <script language="JavaScript"> $(function () { $(document).ready(function () { Highcharts.setOptions({ global: { useUTC: false } }); $('#container').highcharts({ chart: { type: 'spline', animation: Highcharts.svg, // don't animate in old IE marginRight: 10, events: { load: function () { // set up the updating of the chart each second var series = this.series[0]; setInterval(function () { var x = (new Date()).getTime(), // current time y = Math.random(); series.addPoint([x, y], true, true); }, 1000); } } }, title: { text: 'Spline updating each second' }, xAxis: { type: 'datetime', tickPixelInterval: 150 }, yAxis: { title: { text: 'Value' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: 'Random data', data: (function () { // generate an array of random data var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i += 1) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; }()) }] }); }); }); </script> </body> </html> [/c]

Click to add a point

shape Description

A new point can be added or removed by clicking the plot area on the chart. A click method should be added to chart.event property in order to create a chart, which can add a point on click.

shape Example

Below example demonstrates how to create a chart that can add or remove points on clicking using CDN access for both Highcharts and jQuery. [c] <!DOCTYPE html> <html> <head> <title>Click to add a point</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div> <script language="JavaScript"> $(function () { $('#container').highcharts({ chart: { type: 'scatter', margin: [70, 50, 60, 80], events: { click: function (e) { // find the clicked values and the series var x = e.xAxis[0].value, y = e.yAxis[0].value, series = this.series[0]; // Add it series.addPoint([x, y]); } } }, title: { text: 'User supplied data' }, subtitle: { text: 'Click the plot area to add a point. Click a point to remove it.' }, xAxis: { gridLineWidth: 1, minPadding: 0.2, maxPadding: 0.2, maxZoom: 60 }, yAxis: { title: { text: 'Value' }, minPadding: 0.2, maxPadding: 0.2, maxZoom: 60, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, legend: { enabled: false }, exporting: { enabled: false }, plotOptions: { series: { lineWidth: 1, point: { events: { 'click': function () { if (this.series.data.length > 1) { this.remove(); } } } } } }, series: [{ data: [[20, 20], [80, 80]] }] }); }); </script> </body> </html> [/c]

Summary

shape Key Points

  • Dynamic charts are the real-time charts used for live updates
  • All type of charts are supported for dynamic updates.

shape Programming Tips

  • Give the preferred chart type in the chart.type property.
  • Ensure that all the chart options or settings are correct before running the application.
  • Using CDN access for both jQuery and Highcharts is an easy way for end-user to create Highcharts.