Hightcharts Experiment

by anikettiwari

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<h2>How to make this:</h2>
<div id="container" style="height: 300px"></div>
<h2>... look like this:</h2>
<img src='http://s24.postimg.org/ck85ixs79/chart.png'>

JavaScript

$(function () {
    var colors = ['blue','green','yellow','orange','red'];
    var names = ['First', 'Second','Third','Fourth','Fifth'];
 
    $('#container').highcharts({

        chart: {
            type: 'bar',
        },
        legend: {
            enabled: true,
	    	layout: 'vertical',
    		align: 'right',
			verticalAlign: 'middle',
            labelFormatter: function() {
				return this.name + " - <span class='total'>"+this.y+"</span>"
            }
        },
        title: {
            text: 'Simple Bar Graph'
        },
        xAxis: {
            categories: ['First', 'Second', 'Third', 'Fourth', , 'Fifth'],
            allowDecimals: false
        },
        yAxis: {
            allowDecimals: false
        },
        plotOptions: {
            series: {
                events: {
                    legendItemClick: function (x) {
                        var i = this.index  - 1;
                        var series = this.chart.series[0];
                        var point = series.points[i];   

                        if(point.oldY == undefined)
                           point.oldY = point.y;

                        point.update({y: point.y != null ? null : point.oldY});
                    }
                }
            }
        },
        legend: {
            labelFormatter: function(){
                return names[this.index-1];
            }
        },
        series: [
            {
                pointWidth:20,
                color: colors[0],
                showInLegend:false,
                data: [
                    {y: 6, name: 'First', color: colors[0]},
                    {y: 7, name: 'Second', color: colors[1]},
                    {y: 9, name: 'Third', color: colors[2]},
                    {y: 1, name: 'Fourth', color: colors[3]},
                    {y: 1, name: 'Fifth', color: colors[4]}
                ]
            },
            {color: 'blue'},
            {color: 'green'},
            {color: 'yellow'},
       ...