Highcharts Demo

author(s): Torstein Hønsi

by malonso

HTML

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

<div id="container" style="height: 400px"></div>
<button id="buttonOrig">Use Orig Data</button>
<button id="buttonNew">Use New Data</button>

JavaScript

$(function () {
    var origData=[169.02,184.4,-26.36,-38.33,-39.39,7.48,58.52,73.24,11.73,53.08,-0.080000000000041,73.81,100.32,105.05,-16.48,-20.75,35.8,64.64,-48.71,15.2,84.08,-53.43,-28.91,119.91,-59.31,-27.46,-27.14,17.68,-33.82,45.65,-42.63,117.28,54.27,106.17,92];
    var newData=[216.08,94.33,-25.23,-69.68,-35.94,48.97,92.21,-30.24,78.39,13.86,56.01,76.23,122.86,6.16,-15.43,35,69.74,-39.74,11.93,52.82,-5.24,-51.5,93.66,2.57,36.87,-94.76,76.6,-100.16,53.15,-39.62,85.39,71.12,95.62,106.73,44.6];
    $('#container').highcharts({
        chart: {
            alignTicks: true,
            defaultSeriesType: 'column'
        },

        xAxis: {
        },
        yAxis:[{
            tickInterval: 20,
            min: -60,
            max: 220
        }],

        series: [{ data:origData }]
    });


    // the button action
    $('#buttonOrig').click(function() {
        var newSeries={data:origData};
        var chart = $('#container').highcharts();
        chart.series[0].remove(false);
        chart.addSeries(newSeries,false);
        chart.yAxis[0].options.tickInterval=20;
        chart.yAxis[0].setExtremes(-60,220,false);
        
        chart.redraw();
    });
     $('#buttonNew').click(function() {
        var newSeries={data:newData};
        var chart = $('#container').highcharts();
        chart.series[0].remove(false);
        chart.addSeries(newSeries,false);
        chart.yAxis[0].options.tickInterval=30;
        chart.yAxis[0].setExtremes(-120,240,false);
        
        chart.redraw();
    });
});