If you have an HTML table and want to display sparkline charts from your data, check out this example from Highcharts demos:
https://codepen.io/_dario/pen/rNBOGVR
Highcharts provides the suggested code below:
/**
* Create a constructor for sparklines with default options that can be merged with chart options.
*/
Highcharts.SparkLine = function(a, b, c) {
var hasRenderToArg = typeof a === 'string' || a.nodeName,
options = arguments[hasRenderToArg ? 1 : 0],
defaultOptions = {
// Options here
};
options = Highcharts.merge(defaultOptions, options);
return hasRenderToArg ?
new Highcharts.Chart(a, options, c) :
new Highcharts.Chart(options, b);
};
// Code snippet for generating sparkline charts
function doChunk() {
// Code for processing sparkline data in chunks
}
doChunk();
In your use case, the data in the table (and the data-sparkline attribute) are loaded dynamically via AJAX, as shown in the following example:
// Example of dynamic data loading for sparkline charts
var tableRow = '<tr id="row_' + word.id + '">';
tableRow += '<td class="has-sparkline"></td></tr>'
$('#wordstable tbody').append(tableRow);
var rowId = '#row_'+word.id;
var rowIdTd = rowId + ' td.has-sparkline';
$(rowIdTd).data('sparkline', word.sparkline);
This approach may disrupt the logic of the initial example, preventing Highcharts from recognizing the data.
If no errors are returned, it indicates that the data is not being recognized by Highcharts due to the dynamic loading process.