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
