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?

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?

• javascript
• html
• html-table
• sparklines

• Could you add same data for result and the html you want to output. – user2652134 Commented Sep 12, 2017 at 9:33
• @BrahmaDev Hi I have edited the question! – QWERTY Commented Sep 12, 2017 at 9:58

2 Answers 2

$(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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare./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 :

1. That you have included jquery.sparkline.js in your page i.e. the JavaScript file for sparkline is present.
2. 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 !