Highcharts with external CSV parser

by Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="https://rawgit.com/mholt/PapaParse/master/papaparse.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

<div style="max-width: 800px; margin: 0 auto">

<pre id="data">Date,Distance,Label
2013-01-01,2.3,
2013-01-02,3.1,
2013-01-03,4.8,"Personally, I think this is best"
2013-01-04,1.3</pre>
</div>

JavaScript

$(function () {

	/**
     * Use external CSV parser
     * http://papaparse.com/
     */
	var csv = Papa.parse(document.getElementById('data').innerHTML);

    $('#container').highcharts({

        data: {
            rows: csv.data,
            seriesMapping: [{
                // x: 0, // X values are pulled from column 0 by default
                // y: 1, // Y values are pulled from column 1 by default
                label: 2 // Labels are pulled from column 2 and picked up in the dataLabels.format below
            }]
        },
        chart: {
            type: 'column'
        },
        title: {
            text: 'Daily runs'
        },
        xAxis: {
            minTickInterval: 24 * 36e5
        },
        yAxis: {
            title: {
                text: 'Distance'
            },
            labels: {
                format: '{value} km'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{point.label}'
                },
                tooltip: {
                    valueSuffix: ' km'
                }
            }
        }

    });
});