JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://cdn.canvasjs.com/canvasjs.stock.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="stockChartContainer" style="height: 360px; width: 100%;"></div>
<br/>
<button id="submitStartButton" type="submit" value="Start">Start Live Chart</button>
<button id="submitStopButton" type="submit" value="Stop">Stop Live Chart</button>
CSS
#submitStartButton {
background-color: #008CBA;
border: none;
color: white;
padding: 12px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#submitStopButton {
background-color: #f44336;
border: none;
color: white;
padding: 12px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
JavaScript
window.onload = function () {
var dps = [{x: 1, y: 15}, {x: 2, y: 20}, {x: 3, y: 18}, {x: 4, y: 22}, {x: 5, y: 20}]; //dataPoints.
var stockChart = new CanvasJS.StockChart("stockChartContainer",{
title:{
text: "Live Data"
},
theme: "light2",
charts: [{
data: [{
type: "line",
dataPoints : dps
}]
}]
});
stockChart.render();
// Updating the Chart
var xVal = dps.length + 1;
var yVal = 20;
var updateInterval = 1000;
var updateChart = function () {
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps.push({x: xVal,y: yVal});
xVal++;
stockChart.render();
};
var timeoutId,
startButton = document.getElementById('submitStartButton'),
stopButton = document.getElementById('submitStopButton');
function startLiveChart() {
timeoutId = setInterval(function(){updateChart()}, updateInterval);
startButton.removeEventListener('click', startLiveChart);
stopButton.addEventListener('click', stopLiveChart);
}
function stopLiveChart() {
clearTimeout(timeoutId);
stopButton.removeEventListener('click', stopLiveChart);
startButton.addEventListener('click', startLiveChart);
}
startButton.addEventListener('click', startLiveChart);
}