JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>
<div id="container1" style="height: 300px"></div>
<div id="container2" style="height: 300px"></div>
<div id="container3" style="height: 300px"></div>
<div id="data.csv" style="display: none">date, speed, media, angle
2012-02-01 11:23:27,9,9,229
2012-02-01 11:24:27,8,8,230
2012-02-01 11:25:27,8,8,229
2012-02-01 11:26:27,11,9,228
2012-02-01 11:27:27,8,6,229
2012-02-01 11:28:27,9,2,230
2012-02-01 11:29:27,4,4,225
2012-02-01 11:30:27,5,2,227
2012-02-01 11:31:27,7,9,229
2012-02-01 11:32:27,9,9,231
2012-02-01 11:33:27,11,10,228
</div>
JavaScript
$(function() {
create_highchart('container1','intr_ps: INTR per sec. (Sar-INTR)','intr_ps','data.csv',1);
create_highchart('container2','intr_ps: INTR per sec. (Sar-INTR)','intr_ps','data.csv',2);
create_highchart('container3','intr_ps: INTR per sec. (Sar-INTR)','intr_ps','data.csv',3);
})
function create_highchart(label,title,ylabel,path,dataNo)
{
var option = {
chart: {
renderTo: label,
zoomType: 'x',
defaultSeriesType: 'line',
events: {}
},
title: {
text: title
},
xAxis: {
title: {
text: 'Timestamp'
},
categories: []
},
yAxis: {
title: {
text: ylabel
},
min: 0.0
},
series: [
{
type: 'line',
name: ylabel,
data:[]
}
]
}; // variable 'option' finished here
$.get(path, function(data)
{
var lines = data.split('\n'); // Split the lines
$.each(lines, function(lineNo, line)
{
var items = line.split(',');
if (lineNo > 0)
{
$.each(items, function(itemNo,...