<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script> window.onload = function () { var dps = []; // dataPoints var chart = new CanvasJS.Chart("chartContainer", { title :{ text: "" }, axisY: { includeZero: false }, data: [{ type: "line", dataPoints: dps }] }); var xVal = 0; var yVal = 100; var updateInterval = 3000; var dataLength = 20; // number of dataPoints visible at any point var updateChart = function (count) { count = count || 1; for (var j = 0; j < count; j++) { yVal = yVal + Math.round(5 + Math.random() *(-5-5)); dps.push({ x: xVal, y: yVal }); xVal++; } if (dps.length > dataLength) { dps.shift(); } chart.render(); }; updateChart(dataLength); setInterval(function(){updateChart()}, updateInterval); } </script> <div id="chartContainer" style="height: 250px; width: 50%;"></div> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

//https://canvasjs.com/html5-javascript-dynamic-chart/