Menu
I am trying to add a sparkline chart at the end of each row of my dynamically populated table. Here is my code:
function populateOverallOverview(result){
var table = document.getElementById("firstTabOverall");
function addCell(tr, text) {
var td = tr.insertCell();
td.textContent = text;
return td;
}
result.forEach(function (item) {
// sparkline chart here
var dataSpan = document.createElement('span');
dataSpan.sparkline(amountData, {
type: 'bar',
barColor: '#191919'});
var row = table.insertRow();
addCell(row, item.category);
addCell(row, '$ ' + item.currentMonthAmt.toFixed(2));
addCell(row, item.topMonthStr + ' ($ ' + item.topAmount.toFixed(2) + ')');
});
}
Sample data for the amountData are [5,6,7,2,0,-4,-2,4]. My HTML table:
<table id="firstTabOverall" class="table" style="font-size:13px">
<tr>
<th>Category <span id="sparkline1"></span></th>
<th>Current Month Revenue</th>
<th>Best Selling Month</th>
</tr>
</table>
I am trying to dynamically create the sparkline chart then add to the end of the row. However, I am getting this error message:
Uncaught (in promise) TypeError: dataSpan.sparkline is not a function
I not sure how to dynamically create a span with ID, then use that ID to .sparkline. Any ideas?
333
$(document).ready(function() {
var amountData = [5, 6, 7, 2, 0, -4, -2, 4];
function populateOverallOverview(result) {
var table = document.getElementById("firstTabOverall");
function addCell(tr, text) {
var td = tr.insertCell();
td.textContent = text;
return td;
}
result.forEach(function(item) {
var row = table.insertRow();
addCell(row, item.category);
addCell(row, '$ ' + item.currentMonthAmt.toFixed(2));
addCell(row, item.topMonthStr + ' ($ ' + item.topAmount.toFixed(2) + ')');
var lastCell = addCell(row, ""); //Added blank cell for sparkline
var dataSpan = $("<span>");
dataSpan.appendTo(lastCell);
dataSpan.sparkline(amountData, {
type: 'bar',
barColor: '#191919'
});
});
}
populateOverallOverview([{
category: "Transportation",
currentMonthAmt: 1,
topMonthStr: 1,
topAmount: 1
}, {
category: "Healthcare",
currentMonthAmt: 1,
topMonthStr: 1,
topAmount: 1
}]);
});<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
</head>
<body>
<table id="firstTabOverall" class="table" style="font-size:13px">
<tr>
<th>Category</th>
<th>Current Month Revenue</th>
<th colspan=2>Best Selling Month</th>
</tr>
</table>
</body>
</html>The error message does not suggest that span element is created or not, it say's the code is unable to find sparkline function, in order to resolve this issue
please ensure that :
jquery.sparkline.js in your page i.e. the
JavaScript file for sparkline is present.jquery and
jquery.sparkline.js , first load jQuery and then sparklineAlso note that the jquery selector always return an array-like jquery object,which is different from element returned by JavaScript createElement()
What i mean to say is :
var dataSpan = document.createElement('span');
dataSpan.sparkline(...)
is different from
$("#sparkline").sparkline(...)
Suggest you retrieve dynamically added element by jQuery and then create sparkline chart.
Or , after creating the element set ID attribute as follows
dataSpan.setAttribute("id", "yourRandomDynamicIdHere");
$("#yourRandomDynamicIdHere").sparkline(...)
Hope this helps !
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
