Paging google charts stacked column chart

Question

I searched quite a bit for this, but haven't found what I'm looking for.

I'm building a stacked column chart using google charts, and I have over 200 rows. I want to page the results, but I haven't been able to accomplish it. Is it possible to page rows with a stacked column chart ? Here's my current code:

google.load('visualization', '1', {'callback':'drawChart', 'packages':['corechart']});

function drawChart() {

var jsonData = $.ajax({
    type: 'GET',
    url: "dashboard/lead/by-month",
    dataType:"json",
    async: false
}).responseText;

var data = new google.visualization.DataTable(
    jsonData
);

var options = {
    width: 900,
    height: 400,
    legend: { position: 'top', maxLines: 3 },
    bar: { groupWidth: '75%' },
    isStacked: true,
    showRowNumber: true,
    page: 'enable',
    pageSize: 10,
    sortColumn: 3,
    sortAscending: false
};

var chart = new google.visualization.ColumnChart(document.getElementById("chartContainer"));
chart.draw(data, options);
};

Purvesh Desai Purvesh Desai · Accepted Answer · 2015-10-01T06:25:37

You can do with external paging like, first you fetch 10 records from database and load the chart, after that same way you can call another 10 records with paging and load chart and so on. The idea is to load chart with every call you make for to fetch records.

Paging google charts stacked column chart

1 Answers