How to give the pagination buttons dynamicaly to NVD3 bar chart, my requirement is i have 50 vehicles data(data is like idle data, driving data, off data in % formate) currently dispalyed all vehicles data in a single page there is no any pagination now it is fine for 10-15 vehicles data but for more vehicles graphs is too cramped so i want to use pagination system, i want to display 7 vehicles each time using pagination buttons.
nv.addGraph(function() {
var height = 229
, width = 500;
chart = nv.models.multiBarHorizontalChart()
.x(function(d) {
var stringleght = (d.label).length > 10 ? (d.label).substring(0, 9) + '...' : d.label
return (stringleght);
})
.y(function(d) {
return d.value ? d.value / 100 : 0;
})
.margin({
top: 0,
right: 10,
bottom: 50,
left: 99
})
.transitionDuration(10)
.showControls(false)
.showLegend(false)
.height(height).width(width)
.tooltip(function(key, x, y, e) {
return '<h3 style = "color: black;">' + key + '-' + e.point.label +
'</h3>' + '<p>' + e.point.value.toFixed(2) + '%' +'</p>' +
'<p style="border-top: 1px solid #cfcfcf">' +
e.point.numberOfEvents + ' Events </p>';
});
chart.options(chartOptions);
chart.yAxis.tickFormat(d3.format(',.2%'));
d3.select('#chart1 svg').datum(data).call(chart);
return chart;
}, function() {
d3.selectAll(".nv-bar").on('click',
downChart).attr('style', 'cursor: pointer');
d3.select("#up").on('click', upChart)
});
},
My xyz.hbs code
{{#if vehicleUsage}}
<h2 id="title">Vehicle Usage (Last 14 Days)</h2>
<span class ="svg"><svg></svg></span>
{{/if}}
Above is my NVD3 code, whether is it possible to add the pagination buttons to NVD3 charts and how ??, please help me.
Aucun commentaire:
Enregistrer un commentaire