Highcharts Demo

author(s): Torstein Hønsi

by Joanna Sobańska

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="update">Update chart</button>

JavaScript

var startData=[0.39,  0.38,0.38,  0.37  ,0.37,  0.38, 0.43, 0.51  ,0.54,  0.55, 0.54, 0.51, 0.49, 0.49, 0.49, 0.50  ,0.56 ,0.59,  0.60  ,0.54 ,0.51]

var forecastedData=[0.49,  0.4 ,0.48,  0.47  ,0.57,  0.48, 0.46, 0.54  ,0.56,  0.65, 0.5, 0.5, 0.6, 0.45, 0.45, 0.5  ,0.5 ,0.5,  0.6  ,0.5 ,0.51, 
        0.49,  0.4 ,0.48,  0.47  ,0.57,  0.48, 0.46, 0.54  ,0.56,  0.65, 0.5, 0.5, 0.6, 0.45, 0.45, 0.5  ,0.5 ,0.5,  0.6  ,0.5 ,0.5,  0.45, 0.45]
var chart =  Highcharts.chart('container', {
    xAxis: {
        type: 'datetime'
    },

    plotOptions: {
        series: {
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval:  900 * 1000 // one day
        }
    },

    series: [{
    	name: 'real time data',
        data: startData,
    }, {
    name : 'forecasted',
        data: forecastedData
    }]
});

var i = 1;
var lengthdata = 0;
$('#update').click(function () {
		if(i =1){
    var newValues= startData.push(Math.random())
    console.log(startData)
    chart.series[0].setData(startData)
    
    lengthdata=startData.length
		chart.series[1].setData(forecastedData.slice(0, lengthdata))
    }	
    i += 1;
    console.log(chart)
});