ChartJS in Datatable cell performance

Question

So for some reason I have to put a tiny chart into a column cell. I did it with a simple div and initizialized every single chart:

<div>
     <canvas id="6" height="50px" width="150px"></canvas>
</div>

jsFiddle

Which works great for 10 dataset or 20. But i got a huge datatable with 380 rows and after "2 minutes" of waiting it even loads the charts for every single table row. Is there a better way to do it, or boost performance?

_No need to load what cannot be seen_: for charts, maybe initialize only what is within the viewport? — Nelewout, Aug 25 '16 at 09:20
Well i got one variation of this now. It only loads the charts for the first page. But if i switch to the second, the charts aint loaded, obviously. Is there a way i can tell datatables to call a function on page change? — AHahn, Aug 25 '16 at 11:27

score 1 · Answer 1 · edited May 23 '17 at 12:32

1

I found the solution. Like mentioned in this post: Pagination triggers I call a function which inits the visible charts on datatable draw. Means i only draw them when they get viewed. Nice performance and super slim solution.

$('#Table')
            .on( 'draw.dt',   function () {  initSparkline(); } )
            .dataTable();

});

edited May 23 '17 at 12:32

Community

1
1

answered Aug 25 '16 at 11:47

AHahn

137
1
10

score 0 · Answer 2 · answered Jul 18 '18 at 20:17

Another option might be to use the drawCallback option to use data in the table to render charts for the visible rows each time the DataTable is re-drawn for a page change.

Below is an simplified example of how this might be done for a doughnut chart.

$('#dataTableId').DataTable({
    // I use the "columns" option to tell each column what data to show.
    // One column should have a uniquely id'ed canvas.
    "columns": [
        { "data": "id" },
        { "data": "A" },
        { "data": "B" },
        { "data": function(row){
            return "<canvas height=\"40px\" width=\"40px\" id=\"chart"+row.id+"\"></canvas>";
            },
            "orderable": false}
    ],
    "drawCallback": function() {
        // Get data, only from the rows displayed on the current page.
        var data = this.api().rows({page:'current'}).data();

        // The first draw appears to have a length of 0,
        // but subsequent ones have length equal to number of rows drawn.
        if (data.length !== 0){
            // Loop through each row to render each chart
            for (var i = 0; i < data.length; i++) {

                // Find the chart intended for this data
                var ctx = $("#chart"+data[i].id);

                // Make the chart
                var newChart = new Chart(ctx, {
                "type": "doughnut",
                "data": {
                    "labels": [
                        "A",
                        "B"
                    ],
                    "datasets": [{
                        "data": [data[i].A,data[i].B]
                    }],
                },
                }) // /Chart
            }
        }
    }

    // In a real table, the  object passed into the DataTable() function will 
    // probably also use other options, such as "ajax", "serverSide" or
    // "pageLength". For simplicity, only "columns" and "drawCallback" are 
    // shown in this example.

}); // /DataTable

ChartJS in Datatable cell performance

2 Answers2