JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.j"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<button id="b">click</button>
<div id="container" style="height: 400px; width: 500px"></div>
<script type="text/javascript" src="objectief.js"></script>
JavaScript
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Amsterdam'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Index'
}
},
series: []
};
$.get('dataset/objectief.csv', function (data) {
var series = preprocessData(data);
options.series = series;
// Create the chart
console.log('hooi');
var chart = new Highcharts.Chart(options);
});
$(document).ready(function() {
//second chart!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
$("#b").click(function () {
$.get('dataset/verkeer.csv', function (data) {
var series = preprocessData(data);
var i = chart.series.length;
while (i--) {
chart.series[0].remove(false); //remove all prevbious series
}
console.log('hoi');
i = series.length;
while(i--){
chart.addSeries(series[i], true);
}
});
});
});
function preprocessData(data) {
var s = [];
var lines = data.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function (lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo === 0 || lineNo === 9) {
$.each(items, function (itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first
// position
else {
var series = {
data: []
};
$.each(items, function (itemNo, item) {
if (itemNo === 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
s.push(series);
}
});
return s;
}