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]
    ],
        series = [],
        categories = [];

    for (i = 0; i < input.length; i++) {
        var data = [];
        for (j = 1; j < input[i].length; j++) {
            data.push({
                x: i,
                y: input[i][j]
            });
        }
        categories.push(input[i][0]);
        series.push({
            data: data,
            type: 'line',
            color: '#000',
            marker: {
                symbol: 'circle'
            },
            showInLegend: false
        });

    }
    $('#container').highcharts({
        tooltip: {
            formatter: function () {
                var tooltip = '<b>' + this.x + '</b><br/>';
                for (i = 0; i < this.series.data.length; i++) {
                    tooltip += 'point ' + i + ' : ' + this.series.data[i].y + '<br/>';
                }
                return tooltip;
            }
        },
        xAxis: {
            categories: categories
        },
        chart: {
            marginRight: 50
        },

        series: series

    });
});