Highcharts Demo

author(s): Torstein Hønsi

by J. Albert Bowden

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button id="bar">Bar</button>

JavaScript

$(function () {
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            showEmpty: false
        },

        yAxis: {
            showEmpty: false
        },

        series: [{
            type: 'column',
            allowPointSelect: true,
            data: [ // use names for display in pie data labels
            ['January', 29.9],
                ['February', 71.5],
                ['March', 106.4],
                ['April', 129.2],
                ['May', 144.0],
                ['June', 176.0],
                ['July', 135.6],
                ['August', 148.5], {
                    name: 'September',
                    y: 216.4,
                    selected: true,
                    sliced: true
                }, ['October', 194.1],
                ['November', 95.6],
                ['December', 54.4]
            ],
            showInLegend: true
        }]
    });

    var chart = $('#container').highcharts();


    // Set type
    $('#bar').click(function () {


        chart.inverted = true;
        chart.xAxis[0].update({}, false);
        chart.yAxis[0].update({}, false);
        chart.series[0].update({
            type: 'column'
        });

    });
});