Add pagination to Bar/Column chart

[harikm007]

If a widget contain large number of bars/columns, sometimes it may be difficult to analyze the chart. In such case one option is to enable Auto Zoom feature in widget which will enable a scroll bar in chart. Alternative option is to add pagination in chart. Here is a script to achieve this (Refer).

itemsPerPage = 10 // Number of items to be displayed in a page

widget.on("processresult", function(se, ev){
	ev.result.chart.marginBottom = 100 //Adjust the bottom margin here
})

var normalState = {
                          fill: 'none',
                          stroke: 'none',
                          r: 3,
                          style: {
                                    color: '#697286',
                                    fontWeight : 'bold',
                                    borderWidth  : 0
                                  }
                        },
        hoverState = {
                          fill: '#f0f6f7',
                          stroke: 'none',
                          r: 3,
                          style: {
                                    color: '#697286',
                                    fontWeight : 'bold',
                                    borderWidth  : 0
                                 }
                    }


widget.on("domready", function(w, args){

	chart = w.chart[0][Object.keys(w.chart[0])[0]].hc

	var dataLength = chart.series[0].data.length,
        buttonsNum = Math.ceil(dataLength / itemsPerPage),
        btnTop = chart.plotHeight + chart.plotTop + 40,
        options = {
            str: '<<',
            x: 0,
            y: btnTop,
            step: itemsPerPage - 1,
			width:15
        };

    chart.customBtns = [];
	chart.xAxis[0].setExtremes(0, itemsPerPage - 1);

    for (var i = 0; i < buttonsNum; i++) {
        if (!i) {
            renderBtn(options, chart);
        }
		
        options.str = i + 1;
        renderBtn(options, chart);

        if (i === buttonsNum - 1) {
            options.str = '>>';
            renderBtn(options, chart);
        }
		
    }
    placeBtns(chart);
});

function renderBtn(options, chart) {

    chart.customBtns.push(chart.renderer.button(
            options.str,
            options.x,
            options.y,
            function() {
				setRange.call(this, options, chart.xAxis[0]);
            },normalState, hoverState)
        .attr({
            width:options.width,
            'text-align':'center'
        })
        .add());

    options.x += options.width;
}

function setRange(options, axis) {
    var textStr = this.text.textStr,
        min,
        max;

    if (Highcharts.isNumber(textStr)) {
        min = (textStr - 1) * itemsPerPage;
        max = (textStr - 1) * itemsPerPage + options.step;
		
    } else {
        switch (textStr) {
            case '<<':
                min = 0;
                max = options.step;
                break;

            case '>>':
				dataLength = axis.dataMax+1
		
				if (dataLength % itemsPerPage > 0)
				{
					min = dataLength - (dataLength % itemsPerPage)
					max = axis.dataMax + (itemsPerPage - (dataLength % itemsPerPage))
				} else {
					min = axis.dataMax - dataLength
					max = axis.dataMax
				}
					
                break;
        }
    }

    axis.setExtremes(min, max);
}

function placeBtns(chart) {
    var btns = chart.customBtns,
        btnsWidth = 0,
        x;

    btns.forEach(function(btn) {
        btnsWidth += btn.getBBox().width
    });

    x = (chart.chartWidth - btnsWidth) / 2;

    btns.forEach(function(btn) {
        btn.attr({
            x: x
        });
        x += btn.getBBox().width
    });
}

-Hari

[HamzaJ]

Wow this is amazing. Keep dropping those excellent scripts. Much appreciated 🙂