Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="container" style="height: 400px"></div>
<button id="buttonMore" class="autocompare">Set more data points</button>
<button id="buttonFewer" class="autocompare">Set fewer data points</button>

JavaScript

$(function () {
    $('#container').highcharts({
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }],
              xAxis: {
        categories: ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve']
      },
    });


    // the button action
    $('#buttonMore').click(function() {
        var chart = $('#container').highcharts();
        chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4,100, 200, 300 ,100], false );
        chart.xAxis[0].setCategories(['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen'], false);
        chart.redraw();
    });
    
        // the button action
    $('#buttonFewer').click(function() {
        var chart = $('#container').highcharts();
        chart.series[0].setData([16.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4,100, 200, 300 ,100], false );
        chart.xAxis[0].setCategories(['one','two','three','four','five','six','seven','eight','nine','ten','eleven'], false);
        chart.redraw();
    });
    
    
});