jQuery फ्लोट मल्टी बार चार्ट साइड

Question

मैं चार्ट बनाने के लिए श्रेणियों प्लगइन के साथ jQuery प्लॉट का उपयोग कर रहा हूं। मैं इस कोड के साथ प्रत्येक माह के लिए कंधे से दो बार पक्ष साजिश करना चाहते हैं:

$.plot(".chart", [ { label: "Neue Mitglieder", data: data, order: 1 }, { label: "Fällige Kündigungen", data: data2, order: 2 } ], { 
     series: { 
      bars: { 
       show: true, 
       barWidth: 0.5, 
       align: "center", 

      } 
     }, 
     xaxis: { 
      mode: "categories", 
      ticks: [[0,"Jan"], [1,"Feb"], [2,"Mär"], [3,"Apr"], [4,"Mai"], 
        [5,"Jun"], [6,"Jul"], [7,"Aug"], [8,"Sep"], [9,"Okt"], [10,"Nov"], [11,"Dez"]], 
      tickLength: 1, 

     }, 
     grid: { 
      hoverable: true, 
     }, 
     yAxis: { 
      allowDecimals:false, 
    } 
    }); 

और वह मेरी परिणाम है:

सलाखों अभी भी अतिव्यापी हैं लेकिन मैं अपने परिणाम चाहते हैं देखने के लिए जैसे

किसी को भी पता है कि मेरी कोड के साथ गलत क्या है? मैंने सोचा कि "ऑर्डर" विकल्प उस समस्या को ठीक करेगा, लेकिन इसमें कुछ भी नहीं बदला। http://jsfiddle.net/buk8mhy8/

Answer 1

अपने fiddle

1. jquery.flot.orderBars.js में मिला 2 गलतियों लिंक गलत है:

   यहाँ jsfiddle है।

2. निकाला गया आदेश: श्रृंखला डेटा से 1 और 2

3. अद्यतन इस

   series: { 
       bars: { 
       show: true, 
       barWidth: 0.15, 
       order: 1 
       } 
   } 
   

   के साथ अपने श्रृंखला डिफ़ॉल्ट वस्तु updated fiddle

आशा इस मदद करता है की जाँच करें।

Answer 2

मैंने ऑर्डरबार्स प्लगइन का उपयोग करने की कोशिश की लेकिन परिणाम मुझे अपेक्षित नहीं था। तो क्या मैंने किया था:

1. प्लगइन
2. बाईं परिभाषित श्रेणियों का उपयोग करें और सही

ओ बीएस संरेखित: यह केवल दो बार साथ-पक्ष के साथ काम करता है।

कोड:

var data1 = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ]; 
var data2 = [ ["January", 1], ["February", 5], ["March", 6], ["April", 3], ["May", 37], ["June", 39] ]; 


$.plot($("#placeholder"), 
     [{ data: data1, 
      bars: { 
       show: true, 
       barWidth: 0.2, 
       align: "left", 
      } 
     }, 
     { 
      data: data2, 
      bars: { 
       show: true, 
       barWidth: 0.2, 
       align: "right", 
      } 
     } 
     ], 
     { 
      xaxis: { 
       mode: "categories", 
       tickLength: 0 
      } 
     } 
); 

परिणाम: