Highcharts Demo

author(s): Torstein Hønsi

HTML

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

JavaScript

$(function() {
    var options = {
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'column'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: []
        },
        yAxis: {
            title: {
                text: 'Units'
            }
        },
        series: []
    };
    var CSV = "Date,Cereals Harvested,Cereals Production,Fertilizer Consumption\n1961,100.0,100.0,100.0\n1962-01,100.4,106.8,113.4\n1963,101.9,113.0,127.4\n1962-02,103.3,114.6,142.2\n1965,103.1,117.8,164.8\n1962-03,104.0,121.8,191.4\n1967,106.4,130.8,208.9\n1962-04,107.2,133.1,226.5\n1969,107.5,135.2,245.7\n1962-05,106.1,135.4,274.0\n1971,108.5,149.9,289.4\n1962-06,106.4,146.1,311.9\n1973,109.5,152.9,338.3\n1962-07,109.6,151.5,331.6\n1975,111.3,162.8,383.3\n1962-08,113.5,166.6,390.6\n1977,112.4,168.7,423.9\n1962-09,112.0,180.7,468.2\n1979,110.8,181.6,493.8\n1962-10,112.7,182.0,524.5\n1981,114.9,196.9,521.7\n1962-11,112.9,201.2,527.9\n1983,111.7,191.8,579.2\n1962-12,114.0,215.8,611.3\n1985,115.3,218.5,607.1\n1986,115.1,217.6,625.5\n1987,111.5,209.8,654.2\n1988,112.5,205.6,686.4\n1989,115.0,222.6,680.5\n1990,114.5,230.9,666.0\n1991,113.9,229.0,652.7\n1992,135.4,264.2,635.6\n1993,133.3,256.2,624.7\n1994,133.2,263.2,625.1\n1995,131.5,255.3,676.2\n1996,134.8,278.7,712.7\n1997,134.0,281.9,701.8\n1998,130.3,280.4,714.7\n1999,128.5,280.5,732.8\n2000,128.8,277.1,697.2\n2001,128.9,283.6,709.2\n2002,126.5,273.1,729.9\n2003,128.5,281.0,774.8\n2004,129.9,306.7,774.2\n2005,132.2,305.1,786.3\n2006,130.5,300.8,824.6\n2007,133.7,316.6,863.1\n2008,136.4,339.1,855.8\n2009,135.7,334.9,null";

    var lines = CSV.split('\n');

    // Iterate over the lines and add categories or series
    $.each(lines, function(lineNo, line) {
        var items = line.split(',');

        /* header line containes name series */
        if (lineNo === 0) {
            $.each(items, function(itemNo, item) {
                if...