I have a page where initially there is an empty table. The table is then constructed after the user checks a few boxes to add or remove lines in a time based line graph and filters a few points in the graph. Each box that is checked will correspond to a column in the table, and the contents of the rows are the points in the graph.
Thus I don't know the names of the columns, nor the amount of columns or cells. It can be anywhere from 2 to 60+ columns and same for rows.
In the HTML I just have an empty table:
<table id="liveTable" class="table display compact" cellspacing="0" cellpadding="0">
</table>
The function that forms the data structures for the table is fired every time the user checks a box:
$(document).ready(function() {
// The function receives a plot object, which contains all the data I need
function drawTable(plot) {
// Get the plot object data and reset the current array to build a new table each time the function is called
var plotData = plot.getData();
var dataArray = []
// Extract all the needed information to build the table
for (i = 0; i < plotData.length; i++) {
dataPoints = {}
// Get only the visible data points in the graph
var visiblePoints = plotData[i].data.filter(dp =>
dp[0] >= plotData[i].xaxis.min && dp[0] <= plotData[i].xaxis.max &&
dp[1] >= plotData[i].yaxis.min && dp[1] <= plotData[i].yaxis.max);
// Build arrays for the time column and for each line of visible data points
var dataTimes = []
var dataValues = []
for (k = 0; k < visiblePoints.length; k++) {
var timestamp = new Date(visiblePoints[k][0])
dataTimes.push(msToTime(timestamp))
dataValues.push(visiblePoints[k][1])
}
// Build a string for each line and then the data points object
var runStart = new Date(plotData[i].offset_time + plotData[i].data[0][0]);
dataPoints["Time"] = dataTimes
dataPoints[plotData[i].label + " " + runStart] = dataValues
dataArray.push(dataPoints)
}
// Extract all column names for Datatables() columns API
columns = []
$.each(dataPoints, function(key, value) {
var my_item = {};
my_item.data = key;
my_item.title = key;
columns.push(my_item);
});
// Try to build the table with the data that was collected. This part doesn't work at all.
$('#liveTable').DataTable({
data: dataArray,
"columns": columns,
retrieve: true,
destroy: true,
paging: false,
pageLength: -1
});
};
// Call drawTable() every time the user pans/zooms the graph
$("#graphContainer").bind("plotpan", function (event, plot) {
drawTable(plot);
});
$("#graphContainer").bind("plotzoom", function (event, plot) {
drawTable(plot);
});
});
The function drawTable() is called every time the user pans/zooms on the graph, and every time they chose a new parameter to graph (elsewhere on the code but basically the same call to drawTable())
The last part of the drawTable() function, where I define the table is not really working to re-form the datatable each time the user selects/filters data.
The resulting data structures that I'm passing on to the DataTables API are an array of objects for each of the columns:
[
{data: "Time", title: "Time"},
{data: "Checkbox 1", title: "Checkbox 1"},
{data: "Checkbox 2", title: "Checkbox 2"},
{data: "Checkbox N", title: "Checkbox N"}
]
That solution came from another StackOverFlow post, thought I'm not sure if that is exactly what DataTables is expecting as a structure for the columns declaration.
And then the dataArray for the table itself (an array of objects for each of the columns):
[{Time: Array(392)}, {Checkbox 1: Array(392)}, {Checkbox 2: Array(392)}, {Checkbox N: Array(392)}]
For the DataTable constructor:
$('#liveTable').DataTable({
data: dataArray,
"columns": columns,
retrieve: true,
destroy: true,
paging: false,
pageLength: -1
});
So in the end the table should look like:
Time Checkbox 1 Checkbox 2 Checkbox N
00:00:01 -14.57 84.5 22.27
00:00:02 -14.62 81.2 24.75
... (repeat 390 times) ...
I'm not sure if it's a data formatting issue, initialization issue, etc.
The columns is an array, and the data is objects with {key=column: value=[array of ints], repeat}
I can confirm the columns array is properly formed each time the user ticks a box or filters data, same for the objects for each column.
[EDIT]:
After adding dataSrc: '' I now get some information on the table. Looking at this screenshot:
The idea is that the user will select a parameter on the right table by using the checkboxes, that draws a line on the graph for each parameter that was selected, and there should be a column on the table for each parameter that is selected. In the example picture I selected just one, which should render a table with 2 columns, one for Time (which will always be there) and one for the selected paramter.
The time column gets populated, but it's adding all the values in a single cell, and the selected parameter is not adding any values to the cell, giving the error:
DataTables warning: table id=liveTable - Requested unknown parameter 'Sensor - F13.56I2 Thu Nov 30 2017 12:12:09 GMT+0000 (Greenwich Mean Time)' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4
Going to that page, the error is coming up with the parameter as a string, which seems to indicate the data option is not finding data in the object that is being passed in for that column.
I'm not sure why it can't find the data using the column as both strings are the exact same as you can see when I console.log the values for columns and dataArray:
