Answer to Stack Overflow question: http://stackoverflow.com/questions/38313629/dynamically-graph-points-with-highcharts

Mike Zavarello

by Mike Zavarello

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<table id="datatable">
  <thead>
    <tr>
      <th>Time</th>
      <th>Effort</th>
      <th>Duration</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <th>4/13/2016 12:13:12.15</th>
      <td>10</td>
      <td>100</td>
    </tr>
    <tr>
      <th>4/13/2016 12:13:12.80</th>
      <td>12</td>
      <td>100</td>
    </tr>
    <tr>
      <th>4/13/2016 12:13:13.15</th>
      <td>30</td>
      <td>100</td>
    </tr>
    <tr>
      <th>4/13/2016 12:13:13.80</th>
      <td>50</td>
      <td>100</td>
    </tr>
  </tbody>
</table>

JavaScript

$(function () {

  // read through the HTML table and calculate cumulative effort
  // solution inspired by:
  // 1. http://stackoverflow.com/questions/3248869/how-do-i-get-data-from-a-data-table-in-javascript
  // 2. http://stackoverflow.com/questions/10057226/how-to-get-html-table-td-cell-value-by-javascript

  // set the series name as the default; this is the first entry read by data.columns
  var seriesTime = ['Time'];
  var seriesEffort = ['Effort'];
  var seriesDuration = ['Duration'];

  var table = document.getElementById('datatable');
  var noRows = table.rows.length;

	// go through the table and assign values to the series arrays
  // start with the second row (r = 1) to omit the table's header
  for (var r = 1; r < noRows; r++) {
    seriesTime.push(Date.parse(table.rows[r].cells[0].innerHTML));
    seriesEffort.push(parseInt(table.rows[r].cells[1].innerHTML));
    seriesDuration.push(parseInt(table.rows[r].cells[2].innerHTML));
  }

	// next, go through the series arrays and tally up the cumulative totals based on duration
  for (var t = 2; t < seriesTime.length; t++) {
  
  	seriesEffort[t]+=seriesEffort[t-1];
  	
    for (var e = 1; e < seriesEffort.length; e++) {
    	if (seriesTime[e] < seriesTime[t] - seriesDuration[t]) {		// NOTE: this is where I'm getting stuck
      	seriesEffort[t]-=seriesEffort[e];
      } else {
      	//seriesEffort[t]+=seriesEffort[e];
      }
    
    }
  }

  console.log(seriesTime);
  console.log(seriesEffort);
  console.log(seriesDuration);


  $('#container').highcharts({
    data: {
      // refer to demo link at: http://api.highcharts.com/highcharts#data.columns
      columns: [
        seriesTime,			// categories
        seriesEffort		// first series
      ]
    },
    chart: {
      type: 'line'
    },
    title: {
      text: 'Data extracted from a HTML table in the page'
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      allowDecimals: false,
      title: {
        text: 'Units'
      }
   ...