JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container" style="height:300px"></div>
<script type="text/javascript" src="http://www.highcharts.com/js/testing-stock.js"></script>
<div id="datacsv">DatumUhrzeit;Position;Kurs;G/V;G/V kum.
2011-01-04T04:00:00;S;12359.92;-37.46;-37.46
2011-01-04T14:05:00;S;12359.92;-37.46;-37.46
2011-01-05T04:00:00;S;12359.92;-37.46;-140.01
2011-01-06T04:00:00;S;12359.92;-37.46;-131.46
2011-01-07T04:00:00;S;12359.92;-37.46;-82.5</div>
JavaScript
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var temp = $("#datacsv").text();
var lines = temp.split('\n');
var master = [];
$.each(lines, function(lineNo, line) {
var tmp;
if (lineNo == 0) {
} else {
//alert("data in the file: " + line);
var items = line.split(';');
var time = Date.parse(items[0]);
var val = parseFloat(items[4]);
tmp = [time, val];
master.push(tmp);
}
});
series.setData(master, true);
chart.series[0].hide();
chart.series[0].show();
console.log("Aaa");
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
series: [{
type: 'column',
name: 'Random data',
data: []}]
});