Highcharts Demo

author(s): Torstein Hønsi

by J. Albert Bowden

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {

    $('#container').highcharts({
        chart: {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {
									var series  = this.series[0],
                      len     = series.data.length;
                  this.addSeries({
                    id: 'end point',
                    type: 'scatter',
                    marker: {
                    	enabled:true,
                      symbol:'circle',
                      radius:4,
                      fillColor:'white',
                      lineColor: 'black',
                      lineWidth:2
                    },
                    data: [[
                      series.data[len - 1].x,
                      series.data[len - 1].y
                    ]]
                  }); 
									var series2 = this.get('end point');
                  
                  setInterval(function () {
                    var x = (new Date()).getTime(),
                        y = Math.random();
										len = series.data.length;
										series.addPoint([x,y], true, true);
                  	series2.data[0].update([x,y]);
                  }, 1000);
                }
            }
        },
        title: {
            text: 'Live random data'
        },
        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: {
 ...