dimanche 5 juillet 2015

How to add the pagination to NVD3 horizontal bar charts

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