Highcharts test tool

by David Marshall

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" data-firstset="[[1], [2], [3], [4], [5]]" data-secondset="[[5], [4], [3], [2], [1]]"></div>

<p id="state">first set</p>
<p id="object"></p>
<button id="btn"> click </button>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

var chart = $('#container');

var state = 1;

chart.highcharts({
    xAxis: {
        type: 'datetime'
      },
    plotOptions: {
        series: {
          pointStart: 1430733600000-36000000,
          pointInterval: 24 * 3600 * 1000
        }
      },
    series: [{
        type: 'column',
        color: '#fb621f',
        data: chart.data().firstset
    }]
});

$("#object").html(chart.data().firstset);

$("#btn").click(function () {
    if (state === 1) {
        chart.highcharts().series[0].setData(eval(chart.attr('data-secondset')), true);
        state = 2;
        $("#state").html("second set");
        $("#object").html(eval(chart.attr('data-secondset')));
    } else if (state === 2) {
        chart.highcharts().series[0].setData(eval(chart.attr('data-firstset')), true);
        state = 1;
        $("#state").html("first set");
        $("#object").html(eval(chart.attr('data-firstset')));
    }
});