Dynamically graph points with Highcharts - graph

Question

How can I dynamically graph points from a table? The table has two columns dedicated to the x and y coordinates and an additional column for duration.
Example
Say I have the table shown below. The Date and Effort columns would compose the x,y coordinates (Timestamp, Effort) for a line chart. This line chart would have data-points based on cumulative totals from the Timestamp and Effort columns. The Duration column would determine how long the entry had an impact on the data-points of the line chart. So based on this table, I would want a line chart with the coordinates listed under Data-Points.
Timestamp        Effort  Duration
4/13/2016 12:13:12.15    10     100
4/13/2016 12:13:12.80    12     100
4/13/2016 12:13:13.15    30     100
4/13/2016 12:13:13.80    50     100
Data-Points:
(4/13/2016 12:13:12.15, 10)
(4/13/2016 12:13:12.80, 22)
(4/13/2016 12:13:13.15, 42)
(4/13/2016 12:13:13.80, 80)

Answer 1

One of the Highcharts demos shows precisely how you can accomplish this using a static HTML table: http://www.highcharts.com/demo/column-parsed.
I've created a fiddle using your sample data and plotted it as a line chart, per your requirement: http://jsfiddle.net/brightmatrix/qgvkp0t0/
Your data table would be coded similar to the following:
<table id="datatable">
<thead>
<tr>
<th>Time</th>
<th>Effort</th>
</tr>
</thead>
<tbody>
<tr>
<th>4/13/2016 12:13:12.15</th>
<td>10</td>
</tr>
<tr>
<th>4/13/2016 12:13:12.80</th>
<td>22</td>
</tr>
<tr>
<th>4/13/2016 12:13:13.15</th>
<td>42</td>
</tr>
<tr>
<th>4/13/2016 12:13:13.80</th>
<td>80</td>
</tr>
</tbody>
</table>
You would then create your chart using the following code. Note the data attribute that calls to your HTML table's ID:
$(function () {
$('#container').highcharts({
data: {
table: 'datatable'
},
chart: {
type: 'line'
},
title: {
text: 'Data extracted from a HTML table in the page'
},
xAxis: {
type: 'category'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.point.y;
}
}
});
});
One thing to note: without any modifications, your timestamp data would be read into your x-axis as a datetime type. This would leave you with empty points for those dates or times in between.
In my example, I explicitly set the x-axis type to category, so that there is exactly one plot on the chart for each data point.
Now, to get the x-axis labels to appear in a more readable format, you can explore the xAxis.labels.formatter attribute (http://api.highcharts.com/highcharts#xAxis.labels.formatter) and the Highcharts.dateFormat() function (http://api.highcharts.com/highcharts#Highcharts.dateFormat).
Update (July 13, 2016): I've been able to solve the original poster's requirement of adding cumulative points based on data in an HTML table, but not the removal of dates that are older than the current data point's duration. My modifications are below.
In order to take the data from an HTML table and work with it prior to plotting the chart, I used the data.columns attribute (see http://api.highcharts.com/highcharts#data.columns).
Before your chart options are declared, I wrote this code to go through the HTML table and add the content to arrays.
// 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));
}
I then use those arrays as follows:
data: {
// refer to demo link at: http://api.highcharts.com/highcharts#data.columns
columns: [
seriesTime, // categories
seriesEffort // first series
]
},
The way this works is that the first item expected in these arrays is the series name, which is why I have as the default value when the arrays are first declared.
Now, once you have the data in arrays, you would need to run through them to calculate your cumulative totals and subtract those whose duration has passed. Unfortunately, I wasn't successful on the duration piece. Here's what I wrote in my fiddle:
// 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];
}
}
}
I hope this gets you closer to your solution. I apologize that I couldn't get this 100% mocked up for you.

Answer 2

I ended up preprocessing the data. First, I got all of the data points into the series cumulatively. Next, I updated the datetime x values with the durations. Finally, I subtracted each individual y value whose x value was less than the cumulative data point's x value.