एक nvd3.js multBarChart

Question

के साथ स्टैक्ड डेटा को सही तरीके से प्रदर्शित करने के लिए कैसे करें मैं एक मल्टीबार चार्ट उत्पन्न करने के लिए nvd3.js का उपयोग कर रहा हूं। यहाँ मेरी कोड है:

$(function() { 

    $.get('/charts/objects_created/') 
     .done(function(resp) { 
      init_graphs(resp); 
     }); 

    function init_graphs(data) { 
     nv.addGraph(function() { 
      var chart = nv.models.multiBarChart(); 
      chart.xAxis.tickFormat(function(d) { 
       return d3.time.format('%x')(new Date(d)); 
      }); 

      chart.yAxis.tickFormat(d3.format(',d')); 

      d3.select('.chart#recent_activity svg') 
       .datum(data) 
       .transition().duration(500).call(chart); 

      nv.utils.windowResize(chart.update); 

      return chart; 
     }); 
    } 
}); 

और यहाँ अपने डेटा है:

लेकिन खड़ी विफल रहता है:

[ 
    { 
     "values":[ 
     { 
      "y":3, 
      "x":"04/05/2013" 
     }, 
     { 
      "y":1, 
      "x":"04/11/2013" 
     }, 
     { 
      "y":3, 
      "x":"04/12/2013" 
     } 
     ], 
     "key":"Apples" 
    }, 
    { 
     "values":[ 
     { 
      "y":3, 
      "x":"04/05/2013" 
     }, 
     { 
      "y":1, 
      "x":"04/12/2013" 
     }, 
     { 
      "y":0, 
      "x":"04/11/2013" 
     } 
     ], 
     "key":"Oranges" 
    } 
] 

यह बहुत अच्छा वर्गीकृत किया लग रहा है

आप देख सकते हैं, अंतिम ढेर गलत है; संतरे सेब के बीच में संतरे लगाए जा रहे हैं। इसके अलावा, हालांकि यह देखना मुश्किल है, दूसरे कॉलम में 0 संतरे के लिए 1 पिक्सेल बार है, जो y-axis पर 3 पर स्थित है।

क्या कोई देख सकता है कि मैं क्या गलत कर रहा हूं, या क्या nvd3 के साथ कोई बग है?

धन्यवाद!

Answer 1

यदि आप अपने डेटा को बारीकी से देखते हैं, तो आपके पास दोनों श्रेणियों में दिनांक बदल गया है, जो ग्राफ को ढेर होने पर तीसरी परत का कारण बन रहा है। समूहबद्ध होने पर यह ठीक काम करता है।

बस डेटा के अनुक्रम पर सावधान रहें।

यहां अपडेट किया गया डेटा है।

[{ 
    "values" : [{ 
     "y" : 3, 
     "x" : "04/05/2013" 
    }, { 
     "y" : 1, 
     "x" : "04/11/2013" 
    }, { 
     "y" : 3, 
     "x" : "04/12/2013" 
    }], 
    "key" : "Apples" 
}, { 
    "values" : [{ 
     "y" : 3, 
     "x" : "04/05/2013" 
    }, { 
     "y" : 0, 
     "x" : "04/11/2013" 
    }, { 
     "y" : 1, 
     "x" : "04/12/2013" 
    }], 
    "key" : "Oranges" 
}]