Dynamic Chart Within Bootstrap Table - CanvasJS JavaScript Charts

Dynamic Chart Within Bootstrap Table - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
  <h2>CanvasJS Charts in Bootstrap Table</h2>
  <table class="table table-hover  table-striped table-condensed">
    <thead>
      <tr>
        <th>Cell</th>
        <th>Time(seconds)</th>
        <th>Temperature (&deg;C)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 1</td>
        <td>0</td>
        <td>100</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>1</td>
        <td>150</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>2</td>
        <td>180</td>
      </tr>
      <tr>
        <td>Chart 1</td>
        <td></td>
        <td><button id="cellOneExp" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#cellOne" aria-expanded="false" aria-controls="cellOne">
        Show Chart
        </button>
        </td>
      </tr>
      <tr>
        <td colspan="100%" class="hiddenRow">
          <div class="collapse" id="cellOne">
           <div id="chartContainer1" style="height: 360px; width:100%;">
           </div>
          </div> 
        </td>
      </tr>
      <tr>
        <td>Cell 2</td>
        <td>0</td>
        <td>200</td>
      </tr>
      <tr>
        <td>Cell 2</td>
        <td>1</td>
        <td>250</td>
      </tr>
      <tr>
        <td>Cell 2</td>
        <td>2</td>
        <td>280</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

var dps = []; // dataPoints

var chart = new CanvasJS.Chart("chartContainer1",{
  zoomEnabled: true,
  height: 360,
  title :{
    text: "Cell 1 Temperature (\xB0C)"
  },
  axisX: {
    title:"Time (seconds)",

  },
  axisY:{
    title: "Temperature (\xB0C)",
  },          
  data: [{
    type: "line",
    dataPoints: dps 
  }]
});
chart.render();

var xVal = 0;
var yVal = 100; 
var updateInterval = 100;
var dataLength = 5000; // number of dataPoints visible at any point

var updateChart = function (count) {
    count = count || 1;
    // count is number of times loop runs to generate random dataPoints.

    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();
	}

// generates first set of dataPoints
updateChart(dataLength); 

// update chart after specified time. 
setInterval(function () {
  	updateChart();
	}, updateInterval);