jQuery Flot Multi-Balkendiagramm nebeneinander

Question

Ich benutze jQuery Plot mit den Kategorien Plugin, um Diagramme zu erstellen. Ich möchte mit diesem Code für jeden Monat an Seite zwei Bars Seite zeichnen:

$.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, 
    } 
    }); 

Und das ist mein Ergebnis:

Die Stäbe noch überlappend sind, aber ich möchte mein Ergebnis aussehen wie

weiß jemand, was mit meinem Code falsch? Ich dachte, dass die Option "order" das Problem behebt, aber nichts geändert hat.

Hier ist der jsfiddle: http://jsfiddle.net/buk8mhy8/

Answer 1

Gefunden 2 Fehler in Ihrem fiddle

1. jquery.flot.orderBars.js Link ist falsch.
2. entfernt Auftrag: 1 und 2 aus der Serie Daten

3. Ihre Serie Standardobjekt aktualisiert mit diesem

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

   prüfen updated fiddle

Hoffnung, das hilft.

Answer 2

Ich habe versucht, OrderBars Plugin zu verwenden, aber das Ergebnis war nicht das, was ich erwartet hatte. Also, was ich tat, war:

1. Verwenden Sie die Kategorien Plugin
2. links definieren und rechts ausrichten

obs: Es funktioniert nur mit zwei Bars Side-by-Side.

Der Code:

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 
      } 
     } 
); 

Das Ergebnis: