[Solved] Paging a chart

[Juan Maria]

HI, I am trying to make a paging chart with the code:

 

<script>
                   var seriesData = [
                       { year: "2000", sales: 200 },
                       { year: "2001", sales: 450 },
                       { year: "2002", sales: 300 },
                       { year: "2003", sales: 125 },
                       { year: "2004", sales: 450 },
                       { year: "2005", sales: 300 },
                       { year: "2006", sales: 125 },
                       { year: "2007", sales: 450 },
                       { year: "2008", sales: 300 },
                       { year: "2009", sales: 125 },
                       ];
</script>
<input id="Button1" type="button" value="Next" onclick="javascript:Next()" />
<div id="myChart" data-win-control="Telerik.UI.RadChart">
</div>

In and in the .js:

var chart = new Telerik.UI.RadChart(myChart);
var dataSource = new Telerik.Data.DataSource(seriesData);
dataSource.pageSize = 4,
dataSource.page = 1,
dataSource.read().then(function () {
    //data is paged
    var data = dataSource.view;
});

chart.dataSource = dataSource;

var series = new Telerik.UI.Chart.ColumnSeries();
series.field = "sales";
chart.series.push(series);

chart.categoryAxis.field = "year";
chart.refresh();

I have added a button and on the onclic event try this:

function Next() {
    var datasource = document.getElementById("myChart").dataSource;
    datasource.page = 2;
}

what I am missing?
thanks
               

[Veli]

Hi Juan,

Here are the modifications to the code that we would suggest:

1. Call RadChart.refresh() when you need to refresh  the chart with the new page of data
2. Do not call dataSource.read(), as RadChart will automatically read from it on refresh.
3. Remove the data-win-control attribute from the chart host element if you are programmatically creating the chart.

Also, it seems there is a bug in the paging mechanism of the Telerik.Data.DataSource component. While we investigate it further, to work around it, you need to delete the _ds._skip inner field of the component.

Here's the modified code you can use:

var seriesData = [
    { year: "2000", sales: 200 },
    { year: "2001", sales: 450 },
    { year: "2002", sales: 300 },
    { year: "2003", sales: 125 },
    { year: "2004", sales: 450 },
    { year: "2005", sales: 300 },
    { year: "2006", sales: 125 },
    { year: "2007", sales: 450 },
    { year: "2008", sales: 300 },
    { year: "2009", sales: 125 },
];

document.addEventListener("DOMContentLoaded", function (e) {
    var chart = new Telerik.UI.RadChart(myChart);
    var dataSource = new Telerik.Data.DataSource(seriesData);
    dataSource.pageSize = 4;
    dataSource.page = 1;
    chart.dataSource = dataSource;

    //no need to call read() on the dataSource. RadChart will read
    //the data automatically when you call RadChart.refresh() on the bottom

    var series = new Telerik.UI.Chart.ColumnSeries();
    series.field = "sales";
    chart.series.push(series);

    chart.categoryAxis.field = "year";
    chart.refresh(); //this will fetch data from the data source
});

function Next() {
    var chartElement = document.getElementById("myChart"),
        chart = chartElement.winControl,
        dataSource = chart.dataSource;

    if (dataSource.page < dataSource.totalPages) {
        dataSource.page++;

        delete dataSource._ds._skip; //workaround

        //refresh the chart with the paged data
        chart.refresh();
    }
}

Greetings,
Veli
the Telerik team