Adding sparkline chart to dynamically populated HTML table

Question

Adding sparkline chart to dynamically populated HTML table

4.7k views Asked by QWERTY At 12 September 2017 at 09:25

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?

Original Q&A

There are 2 answers

Ankit On 12 September 2017 at 09:37

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 :

That you have included jquery.sparkline.js in your page i.e. the JavaScript file for sparkline is present.
Also pay attention to the order in which you have loaded jquery and jquery.sparkline.js , first load jQuery and then sparkline

Also 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 !

**Brahma Dev** · Accepted Answer · 2017-09-12 10:39:45

$(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>

TechQA.

Adding sparkline chart to dynamically populated HTML table

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in HTML-TABLE

Related Questions in SPARKLINES

Popular Questions

Popular Tags

Trending Questions