HTML
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="http://code.highcharts.com/highcharts-more.src.js"></script>
<script src="http://code.highcharts.local/modules/data.src.js?2"></script>
<script src="http://code.highcharts.com/modules/exporting.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,o,h,l,c
2006-06-01 02:00:00,59.85,62.28,59.52,62.17
2006-06-02 02:00:00,62.43,63.1,60.88,61.66
2006-06-05 02:00:00,61.15,61.15,59.97,60
2006-06-06 02:00:00,60.22,60.63,58.91,59.72
2006-06-07 02:00:00,60.1,60.4,58.35,58.56
2006-06-08 02:00:00,58.44,60.93,57.15,60.76
2006-06-09 02:00:00,61.18,61.56,59.1,59.24
2006-06-12 02:00:00,59.4,59.73,56.96,57
2006-06-13 02:00:00,57.61,59.1,57.36,58.33
2006-06-14 02:00:00,58.28,58.78,56.69,57.61
2006-06-15 02:00:00,57.3,59.74,56.75,59.38
2006-06-16 02:00:00,58.96,59.19,57.52,57.56</pre>
</div>
<!--time,o,h,l,c 2006-06-01 02:00:00,59.85,62.28,59.52,62.17 2006-06-02 02:00:00,62.43,63.1,60.88,61.66 2006-06-05 02:00:00,61.15,61.15,59.97,60 2006-06-06 02:00:00,60.22,60.63,58.91,59.72 2006-06-07 02:00:00,60.1,60.4,58.35,58.56 2006-06-08 02:00:00,58.44,60.93,57.15,60.76 2006-06-09 02:00:00,61.18,61.56,59.1,59.24 2006-06-12 02:00:00,59.4,59.73,56.96,57 2006-06-13 02:00:00,57.61,59.1,57.36,58.33 2006-06-14 02:00:00,58.28,58.78,56.69,57.61 2006-06-15 02:00:00,57.3,59.74,56.75,59.38 2006-06-16 02:00:00,58.96,59.19,57.52,57.56-->
JavaScript
$(function () {
$('#container').highcharts({
data: {
csv: document.getElementById('data').innerHTML,
_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
}],
// WAAROM IS DE SERIESMAPPING VERPLICHT?
seriesMapping: [{x:0}],//,{x:0}, {x:0} ],
parsed: function () {
console.log(this.columns);
},
complete: function (options) {
console.log('complete', options)
}
},
chart: {
type: 'line'
},
title: {
text: 'Daily runs'
},
xAxis: {
minTickInterval: 24 * 36e5
},
yAxis: {
title: {
text: 'Distance'
},
labels: {
format: '{value} km'
}
},
legend: {
enabled: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.label}'
},
tooltip: {
valueSuffix: ' km'
}
}
},
series: [{
type: 'bubble',
_lineWidth: 1
}, {
type: 'line'
}, {
type: 'spline'
}/*, {
type: 'line'
}*/]
});
});