Highcharts Demo

author(s): Torstein Hønsi

by Muhammad Mushtaq Sheikh

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        xAxis: {
            categories: ['Main Item', 'Second Item', 'Third Item']
        },
        series: [{
            data: [{
                y: 3,
                locked: 1,
                unlocked: 1,
                potential: 1,
            }, {
                y: 5,
                locked: 2,
                unlocked: 1,
                potential: 2,
            }, {
                y: 7,
                locked: 3,
                unlocked: 1,
                potential: 3,
            }]
        },{
            data: [{
                y: 6,
                locked: 1,
                unlocked: 3,
                potential: 2,
            }, {
                y: 4,
                locked: 2,
                unlocked: 0,
                potential: 2,
            }, {
                y: 7,
                locked: 2,
                unlocked: 3,
                potential: 2,
            }]
        }],
        tooltip: {
            formatter: function() {return ' ' +
                'Locked: ' + this.point.locked + '<br />' +
                'Unlocked: ' + this.point.unlocked + '<br />' +
                'Potential: ' + this.point.potential;
            }
        }
    });
});