Highcharts Demo

author(s): Torstein Hønsi

by Ravi A

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

<h3>Raw data</h3>
<pre id="data">Date,Construction output
06/30/2014,5.3
05/31/2014,3.9
04/30/2014,4.6
03/31/2014,6.8
02/28/2014,3.9
01/31/2014,5.7
12/31/2013,4.9
11/30/2013,0.3
10/31/2013,5.1
09/30/2013,7.6
08/31/2013,5
07/31/2013,4.2
06/30/2013,3.4
05/31/2013,-1.8
04/30/2013,1
03/31/2013,-5.8
02/28/2013,-3.7
01/31/2013,-5.4
12/31/2012,-12.1
11/30/2012,-6.3
10/31/2012,-5.5
09/30/2012,-12.4
08/31/2012,-9.4
07/31/2012,-9
06/30/2012,-13.3
05/31/2012,-5.7
04/30/2012,-9.1
03/31/2012,-7.9
02/29/2012,-4.4
01/31/2012,-2.6
12/31/2011,5
11/30/2011,-0.2
10/31/2011,-1.8
09/30/2011,-1.1
08/31/2011,-1.6
07/31/2011,0.9
06/30/2011,1.7
05/31/2011,2.7
04/30/2011,2.1
03/31/2011,6.2
02/28/2011,5.1
01/31/2011,9.8</pre>

JavaScript

Highcharts.chart('container', {
    data: {
        csv: document.getElementById('data').innerHTML
    },
    yAxis: {
        title: {
            text: 'Share prices'
        }
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false
            }
        }
    },
    title: {
        text: 'Royal Mail shares over time'
    },
    subtitle: {
        text: 'Auto-detection of <em>mm/dd/YYYY</em> dates in Highcharts Data module'
    }
});