"Running Graph"
Bootstrap 4.1.1 Snippet by abhijeetka

Post to Facebook Tweet this

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE HTML> <html> <head> <script> window.onload = function () { var dps = []; // dataPoints var chart = new CanvasJS.Chart("chartContainer", { title :{ text: "Dynamic Data" }, axisY: { includeZero: false }, data: [{ type: "line", dataPoints: dps }] }); var xVal = 0; var yVal = 100; var updateInterval = 1000; 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> </head> <body> <div id="chartContainer" style="height: 300px; width: 100%;"></div> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> </body> </html>
//https://canvasjs.com/html5-javascript-dynamic-chart/

Related: See More

Now UI Kit

Questions / Comments: