Pagination in Highcharts

I need to include pagination for my chart (Bar). so that i can control the number of bars that can be displayed. Has anyone tried this earlier?

If this ca开发者_运维百科n be achieved, Anyone help me to sort this out.

The basic idea behind changing the 'data' of your chart is to update the series information for it. So that as you press the pagination buttons for your chart, you update the series data directly.

I put together a simple fiddle example based on another question I answered previously.

Check it out here: http://jsfiddle.net/Robodude/EmMxH/71/

html:

<SELECT id="list">
<OPTION VALUE="A">Data Set A
<OPTION VALUE="B">Data Set A + B
<OPTION VALUE="C">Data Set A + B + C       
</SELECT>
<button id="change">Change Data Source</button>

<div id="container" style="height: 400px"></div>

Javascript/Jquery:

var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'
    },
    series: []
};

$("#change").click(function(){
if ($("#list").val() == "A")
{
    options.series = [{name: 'A', data: [1,2,3,2,1]}]
}
else if ($("#list").val() == "B")
{
    options.series = [{name: 'A', data: [1,2,3,2,1]},{name: 'B', data: [3,2,1,2,3]}]
}
else if ($("#list").val() == "C")
{
    options.series = [{name: 'A', data: [1,2,3,2,1]},{name: 'B', data: [3,2,1,2,3]},{name: 'C', data: [1,1,1,1,1]}]
}


var chart = new Highcharts.Chart(options);    
});

This is the previous question I helped answer: Reload chart data via JSON with Highcharts

Obviously, this is a pretty straight forward example. If you update your post with more information, I can possibly expand on this further.

Good luck :)

The other way to do this would be to make use of axis.setExtremes to zoom into the first page then you update the parameters for the prev/next page so rather than the chart refreshing it actual moves left/right.

Pagination in highcharts can be achieved easily, using an extra plugin, Jquery pagination plugin.

I found this forum post informative and helpful.

function pageselectCallback(page_index, jq){

var items_per_page = 3,
    max_elem = 5,
    from = page_index * items_per_page,
    to = from + max_elem,
    newcontent = '',
    chartData = [];

//pie.series[0].setData( data.slice(from,to) );
if(typeof pie !== 'object') {
    pie = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        series: [{
            data: []
        }]
    });        
}

pie.series[0].setData( data.slice(from, to) );

// Prevent click eventpropagation
return false;
}

And an working demo is here.