Highcharts Demo

author(s): Torstein Hønsi

by jakub_noga_antsolutions

HTML

<script src="https://code.highcharts.com/stock/7.1.0/highstock.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button id="update">
UPDATE
</button>

JavaScript

var d1 =[{"id":"2019.W01","pointName":"2019.W01","name":"2019.W01","info":"","x2":null,"_antSubserieId":null,"drilldown":false,"y":100},{"id":"2019.W02","pointName":"2019.W02","name":"2019.W02","info":"","x2":null,"_antSubserieId":null,"drilldown":false,"y":86.78},{"id":"2019.W03","pointName":"2019.W03","name":"2019.W03","info":"","x2":null,"_antSubserieId":null,"drilldown":false,"y":100}]


var d2 = [{"id":"2018.W50","pointName":"2018.W50","name":"2018.W50","info":"","x2":null,"_antSubserieId":null,"drilldown":false,"y":47.38},{"id":"2018.W51","pointName":"2018.W51","name":"2018.W51","info":"","x2":null,"_antSubserieId":null,"drilldown":false,"y":89.37},{"id":"2018.W52","pointName":"2018.W52","name":"2018.W52","info":"","x2":null,"_antSubserieId":null,"drilldown":false,"y":100},{"id":"2019.W01","pointName":"2019.W01","name":"2019.W01","info":"","x2":null,"_antSubserieId":null,"drilldown":false,"y":100},{"id":"2019.W02","pointName":"2019.W02","name":"2019.W02","info":"","x2":null,"_antSubserieId":null,"drilldown":false,"y":100},{"id":"2019.W03","pointName":"2019.W03","name":"2019.W03","info":"","x2":null,"_antSubserieId":null,"drilldown":false,"y":98.51},{"id":"2019.W04","pointName":"2019.W04","name":"2019.W04","info":"","x2":null,"_antSubserieId":null,"drilldown":false,"y":89.83},{"id":"2019.W05","pointName":"2019.W05","name":"2019.W05","info":"","x2":null,"_antSubserieId":null,"drilldown":false,"y":75.02}]


d1.forEach(e => delete e.id)
d2.forEach(e => delete e.id)



chart = Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    title: {
        text: 'Average fruit consumption during one week'
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 150,
        y: 100,
        floating: true,
        borderWidth: 1,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    xAxis: {
    	type: "category"
    },
    yAxis: {
 ...