Google chart pagination


April 2019


357 time


I have problem with google charts. I am using ColumnChart to show my data. I wan t to implement pagination on charts.

This is my chart: enter image description here

I want to implement something like this:

Chart like this

This is my option for chart

var options = {
                width: '100%',
                height: '100%',
                chartArea: {
                    width: '90%',
                    height: '90%',
                bar: { groupWidth: '75%' },
                backgroundColor: 'transparent',
                titleTextStyle: {
                    color: 'white'
                isStacked: true,
                series: $scope.series,
                legend: $scope.legendStyleDesktop,
                hAxis: $scope.hAxis,
                vAxis: $scope.vAxisPercentageRate, 
                showRowNumber: true,
                page: 'enable',
                pageSize: 2,
                pagingSymbols: {
                    prev: 'prev',
                    next: 'next'
                pagingButtonsConfiguration: 'auto'

        var data = google.visualization.arrayToDataTable(dataToVisualize);

        var chart = new google.visualization.ColumnChart(document.getElementById('top_x_div'), document.getElementById("selectParams").style.display = "none", document.getElementById("showExport").style.display = "inline");

        chart.draw(data, options);

When I put to show data in table, pagination works, but in chart doesn't work.

Any idea, and thank you for help.

0 answers