Basic Column Chart - CanvasJS

Basic Column Chart

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
  <title>Motor Control</title>
</head>
<body>
  <div class="topnav">
    <h3>CONTROL DASHBOARD</h3>
  </div>
  <div class="content">
    <div>
      <div>
        <h4>TEMPERATURE 1</h4><p><span class="reading"><span id="temperaturef1">%TEMP1%</span></p>
      </div>
 
    </div>
</head>

<div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>
</html>)

JavaScript

//<script>
//<script type="text/javascript">
  window.onload = function () {
    
    
      var dps = [];   //dataPoints. 

      var chart = new CanvasJS.Chart("chartContainer",{
        title :{
          text: "Live Data"
        },
        axisX: {            
          title: "Axis X Title"
        },
        axisY: {            
          title: "Units"
        },
        data: [{
          type: "line",
          dataPoints : dps
        }]
      });

      chart.render();
      var xVal = dps.length + 1;
      var yVal = 15;  
      var updateInterval = 1000;
      var updateChart = function () {
        
        dps.push({x: xVal,y: yVal});
        
        xVal++;
        if (dps.length >  10 )
        {
          dps.shift();        
        }
        chart.render();   
  // update chart after specified time. 
};

setInterval(function(){updateChart()}, updateInterval); 
}
//</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

//<script>

setInterval(function ( ) 
{
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) 
    {
      document.getElementById("temperaturef1").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/temperaturef1", true); 
  xhttp.send(); 
}, 2000) ;





//</script>