Highcharts Demo

author(s): Torstein Hønsi

by Barbara Laird

HTML

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

JavaScript

$(function () {
    var input = [
        ['apple', 2, 4, 10, 12.5],
        ['pear', 1, 5, 10, 12],
        ['orange', 3, 4, 10, 13.5],
        ['grape', 4, 4, 10, 11.5]
    ],
        data = [],
        categories = [];

    for (i = 0; i < input.length; i++) {
        categories.push(input[i][0]);
        data.push({
            x: i,
            y: input[i][1],
            myCount: input[i][1],
            myMin: input[i][2],
            myMax: input[i][3],
            myMean: input[i][4]
        });
        data.push({
            x: i,
            y: input[i][2],
            myCount: input[i][1],
            myMin: input[i][2],
            myMax: input[i][3],
            myMean: input[i][4]
        });
        data.push({
            x: i,
            y: input[i][3],
            myCount: input[i][1],
            myMin: input[i][2],
            myMax: input[i][3],
            myMean: input[i][4]
        });
        data.push({
            x: i,
            y: input[i][4],
            myCount: input[i][1],
            myMin: input[i][2],
            myMax: input[i][3],
            myMean: input[i][4]
        });
        if (i < input.length - 1) data.push({
            x: i + .5,
            y: null
        });


    }
    $('#container').highcharts({
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    'No. of ' + this.x + ': ' + this.point.myCount + '<br/>' +
                    'min : ' + this.point.myMin + '<br/>' +
                    'max : ' + this.point.myMax + '<br/>' +
                    'mean : ' + this.point.myMean;
            }
        },
        xAxis: {
            categories: categories
        },
        chart: {
            marginRight: 50
        },

        series: [{
            data: data,
            type: 'line',
            connectNull: false
        }]

    });
});