CODEWITHSUNDEEP
angularjsd3.jsnvd3.js
Madasu K
Madasu K

Reputation: 1863

nvd3 multibar chart with stacked option the bars are not appearing properly

I am trying to use nvD3 multi bar chart for string type data representation on x-ticks. The Group bar chart is appearing properly. However the stacked bar chart is not appearing correctly. Instead appearing one Bar on the Top of other they are getting mixed up (for Example GROUND in my plunker). Can any one help me where is the mistake?

Please find my plunker here

My data is as follows :

[{
    "values" : [["2 Day", 103.89], ["NextDay", 107.41], ["Ground", 428.75]],
    "key" : "FedEx"
}, {
    "values" : [["Ground", 117.8], ["NextDay", 0], ["2 Day", 0]],
    "key" : "UPS"
}]

Upvotes: 1

Views: 1416

Answers (2)

Madasu K
Madasu K

Reputation: 1863

The following sorting hast to be applied to the data model in order to resolve the appearance issue.

function strcmp(a, b) {
    return a > b ? 1 : a < b ? -1 : 0;
}

function natcmp(a, b) {
    var x = [], y = [];

    a[0].replace(/(\d+)|(\D+)/g, function($0, $1, $2) { x.push([$1 || 0, $2]) })
    b[0].replace(/(\d+)|(\D+)/g, function($0, $1, $2) { y.push([$1 || 0, $2]) })

    while(x.length && y.length) {
        var xx = x.shift();
        var yy = y.shift();
        var nn = (yy[0]-xx[0]) || strcmp(yy[1],xx[1]);
        if(nn) return nn;
    }

    if(x.length) return -1;
    if(y.length) return +1;

    return 0;
}


$scope.data = $scope.data.map(function(d){ d.values = d.values.sort(natcmp); return d; });

Ref : sorting json arrays in json array using angular js

Upvotes: 0

shabeer90
shabeer90

Reputation: 5151

The sequnce in which values for key FedEx and UPS has to be the same as in category 2 day, NextDay & Ground

Like this when you pass into the chart :

$scope.data = [{
    "values" : [["2 Day", 103.89], ["NextDay", 107.41], ["Ground", 428.75]],
    "key" : "FedEx"
}, {
    "values" : [["2 Day", 0], ["NextDay", 0], ["Ground", 117.8]],
    "key" : "UPS"
}]

Hope it helps

Upvotes: 2

Related Questions