JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://highcharts.com/js/testing.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id='chart4_container'></div>
JavaScript
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart4;
$(document).ready(function() {
function ChartEventsLoad() {
// set up the updating of the chart each second
var result = stockData.data;
var series = this.series[0];
var loopseries= function() {
if (counter <= result.length) {
var p = String(result[counter]);
var splitp = p.split(",");
var x = Number(splitp[0]);
var y = Number(splitp[1]);
series.addPoint([x, y], true, series.points.length > 10, true);
counter++;
} else {
clearInterval(loopseries);
}
};
setInterval(loopseries, 300);
}
var counter = 0;
var stockData = { data: [[Date.parse('01/01/1900 00:00:00'), 530000], [Date.parse('01/01/1901 00:00:00'), 544000], [Date.parse('01/01/1902 00:00:00'), 565000], [Date.parse('01/01/1903 00:00:00'), 587000], [Date.parse('01/01/1904 00:00:00'), 599000], [Date.parse('01/01/1905 00:00:00'), 615000], [Date.parse('01/01/1906 00:00:00'), 628000], [Date.parse('01/01/1907 00:00:00'), 645000], [Date.parse('01/01/1908 00:00:00'), 684000], [Date.parse('01/01/1909 00:00:00'), 724000], [Date.parse('01/01/1910 00:00:00'), 756000], [Date.parse('01/01/1911 00:00:00'), 773000], [Date.parse('01/01/1912 00:00:00'), 801000], [Date.parse('01/01/1913 00:00:00'), 828000], [Date.parse('01/01/1914 00:00:00'), 871000], [Date.parse('01/01/1915 00:00:00'), 922000], [Date.parse('01/01/1916 00:00:00'), 924000], [Date.parse('01/01/1917 00:00:00'), 895000], [Date.parse('01/01/1918 00:00:00'), 865000], [Date.parse('01/01/1919 00:00:00'), 898000], [Date.parse('01/01/1920 00:00:00'), 962000], [Date.parse('01/01/1921 00:00:00'), 997000], [Date.parse('01/01/1922 00:00:00'), 1044000], [Date.parse('01/01/1923 00:00:00'), 1097000], [Date.parse('01/01/1924 00:00:00'), 1160000],...