Gopinagh.R
Gopinagh.R

Reputation: 4916

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 can be achieved, Anyone help me to sort this out.

Upvotes: 2

Views: 6610

Answers (3)

escouser
escouser

Reputation: 1943

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.

Upvotes: 2

Gopinagh.R
Gopinagh.R

Reputation: 4916

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.

Upvotes: 1

RoboKozo
RoboKozo

Reputation: 5062

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 :)

Upvotes: 2

Related Questions