CODEWITHSUNDEEP
highcharts
raj
raj

Reputation: 346

Highchart stacked bar chart pagination

I need to show the stacked bar chart with pagination i need Pagination structure/options like this :- 

[First Previous 12 13 14 15 Next Last]

1st page need to show only this values

'Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'

2nd page need to show only this values

'Apples1', 'Oranges1', 'Pears1', 'Grapes1', 'Bananas1'

3rd page need to show only this values

'Apples2', 'Oranges2', 'Pears2', 'Grapes2', 'Bananas2'

based on the xAxis - Categories values count I want to show pagination

Have a sample code in this link : http://jsfiddle.net/38L9nhhs/2/

$(function () {
$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas','Apples1', 'Oranges1', 'Pears1', 'Grapes1', 'Bananas1','Apples2', 'Oranges2', 'Pears2', 'Grapes2', 'Bananas2']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2,3, 4, 4, 2, 5,2, 2, 3, 2, 1]
    }, {
        name: 'Jane',
        data: [2, 2, 3, 2, 1,5, 3, 4, 7, 2,3, 4, 4, 2, 5]
    }, {
        name: 'Joe',
        data: [3, 4, 4, 2, 5,2, 2, 3, 2, 1,5, 3, 4, 7, 2]
    }]
   });
  });

Please help me any one to achive this

Upvotes: 1

Views: 950

Answers (1)

SaschaM78
SaschaM78

Reputation: 4497

What you basically need to do is:

  1. Create an additional array holding the base elements (oranges, apples, pears, etc.)
  2. Build a pager on page launch based on the number of base elements and elements contained in the arrCategories array
  3. Load the graph for page 0 which would be the default page without the numbers appended

Here are the relevant code parts:

HTML 

<!-- add a pager below the graph -->
<div id="page-container">Page: <span id="pager"></span></div>

JS

// create the arrays outside of the function scope, otherwise accessing elements later-on
// may cause problems
var arrBaseCategories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'];
// arrCategories and arrSeries "data" element must contain the number of arrBaseCategories n-times
var arrCategories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas', 'Apples1', 'Oranges1', 'Pears1', 'Grapes1', 'Bananas1', 'Apples2', 'Oranges2', 'Pears2', 'Grapes2', 'Bananas2'];
var arrSeries = [{
  name: 'John',
  data: [5, 3, 4, 7, 2, 3, 4, 4, 2, 5, 2, 2, 3, 2, 1]
}];

function showGraph(page) {

  // number of different elements
  var numDifferentElements = arrBaseCategories.length;
  // first element that needs to be extracted from arrCategories and arrSeries
  var intStartElement = page * numDifferentElements;

  var arrCurrentSeries = [];
  var arrCurrentCategories = [];

  // loop all series for all persons, extract part of the data array for the given page
  for (var elem in arrSeries) {

    var arrSubData = [];

    // extract elements starting from a position based on the page number 
    // from the data array and only pass this one along when creating the chart
    for (var i = 0; i < numDifferentElements; i++) {

      arrCurrentCategories.push(arrCategories[intStartElement + i]);
      arrSubData.push(arrSeries[elem].data[intStartElement + i]);

    }
    arrCurrentSeries.push({
      name: arrSeries[elem].name,
      data: arrSubData
    });

  }

  $('#container').highcharts({
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Stacked bar chart'
    },
    xAxis: {
      categories: arrCurrentCategories
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total fruit consumption'
      }
    },
    legend: {
      reversed: true
    },
    plotOptions: {
      series: {
        stacking: 'normal'
      }
    },
    series: arrCurrentSeries
  });
} // end function showGraph

$(function() {

  // create a pager on start
  function initialisePager() {
    var numPages = Math.ceil(arrCategories.length / arrBaseCategories.length);

    for (i = 0; i < numPages; i++) {
      var link = '<a href="javascript:showGraph(' + i + ')">' + Math.round(i + 1) + '</a>';
      $('#pager').append(link);
    }
  }

  initialisePager();
  showGraph(0);
});

The complete fiddle with more than one person inside the series can be found here:

http://jsfiddle.net/Moonbird_IT/38L9nhhs/7/

Upvotes: 1

Related Questions