Highcharts Demo

author(s): Torstein Hønsi

HTML

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

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

JavaScript

$(function () {
    
    var rates = {'Category1':20,
                 'Category2':25,
                 'Category3':75};
    
    $('#container').highcharts({
        chart: { defaultSeriesType: 'bar' }, 
		legend: { enabled: true }, 
		tooltip: { shared: true,
            formatter: function() {
                var s = '<b>'+ this.x +'</b><br/>';                
                $.each(this.points, function(i, point) {
                    s += '<span style="color:'+point.series.color+'">'+point.series.name+'</span>: <b>'+point.y+'</b><br/>'
                });
                s+='Rate: ' + rates[this.x] + '%';
                return s;
            },
        }, 
		xAxis: { categories: ['Category1', 'Category2', 'Category3'] }, 
		yAxis: [{ min: 0, title: { text: 'Count' } }, { labels: { format: '{value} %' }, min: 0, opposite: true, reversed: true, title: { text: 'Percent' } }], 
		series: [
            { data: [{ y: 5 }, { y: 4 }, { y: 10 }], name: 'Series 1', type: 'column', yAxis: 0 },
            { data: [{ y: 1 }, { y: 1 }, { y: 11 }], name: 'Series 2', type: 'column', yAxis: 0 },
            { data: [{ y: 0 }, { y: 0 }, { y: 0 }], name: 'Series 3', type: 'column', yAxis: 0 }
            //{ data: [{ y: 20.0 }, { y: 25.0 }, { y: 75.0 }], name: 'Rate', yAxis: 1, tooltip: { valueSuffix: "%"}, enabled: false }
        ]
        
    });
});