flottata affiancata barra impilabile

Question

È possibile avere un grafico a barre affiancato combinato con una barra impilata utilizzando Flot?

Simile alla domanda jqplot qui: jqplot Side by Side Stacked Bar Chart

provato con entrambi, ma solo un lato da percorsi laterali e se disattivo fianco a fianco, la barra in pila funziona perfettamente.

immagine sarà simile a: http://peltiertech.com/Utility/pix/clusterstackchart.png

codice di esempio che ho scritto è: http://jsfiddle.net/WAGbt/ (Commento l'ordine: la proprietà X e li vedrete passare)

$(document).ready(function() 
{ 
    DrawChart(); 
}); 

function GenerateSeries(added) 
{ 
    var data = []; 
    var start = 100 + added; 
    var end = 500 + added; 

    for (i = 1; i <= 20; i++) 
    { 
     var d = Math.floor(Math.random() * (end - start + 1) + start); 
     data.push([i, d]); 
     start++; 
     end++; 
    } 

    return data; 
} 

function DrawChart() 
{ 
    var dataa = GenerateSeries(100); 
    var datab = GenerateSeries(100); 
    var datac = GenerateSeries(100); 

    var ds = new Array(); 

    var data = 
    [ 
     { 
      label: "data1", 
      data: dataa, 
      bars: 
      { 
       show: true, 
       barWidth: 0.2, 
       order: 1, 
       lineWidth: 2 
      } 
     }, 
     { 
      label: "data2", 
      data: datab, 
      bars: 
      { 
       show: true, 
       barWidth: 0.2, 
       order: 2, 
       lineWidth: 2 
      } 
     }, 
     { 
      label: "data3", 
      data: datac, 
      bars: 
      { 
       show: true, 
       barWidth: 0.2, 
       order: 3, 
       lineWidth: 2 
      } 
     } 
    ]; 

    var options = { 
     series: { 
      stack: true 
     }, 
     xaxis: { 
     }, 
     grid: { 
      backgroundColor: { colors: ["#FFF", "#FFF"] } 
     } 
    }; 

    var plot = $.plot($("#placeholder"), data, options); 
} 

Answer 1

Aggiungi bars alle opzioni ...

var options = { 
    series: { 
     stack: true 
    }, 
    xaxis: { 
    }, 
    grid: { 
     backgroundColor: { colors: ["#FFF", "#FFF"] } 
    }, 
    bars:{ // show the bars with a width of .4 
     show: true, 
     barWidth: .4 
    } 

}; 

e massaggiare i dati in questo formato ...

0.123.

var data = [ // all series 

    [ // first series (Q1) 
     [0,100], // pens Q1 N America 
     [0.4,120], // pencils Q1 N America 
     [1,130], // pens Q1 Europe 
     [1.4,140], // pencils Q1 Europe 
     [2,150], // pens Q1 Asia 
     [2.4,200], // pencils Q1 Asia 
    ], 

    [ // second series (Q2) 
     [0,100], 
     [0.4,200], 
     [1,200], 
     [1.4,200], 
     [2,200], 
     [2.4,200], 
    ], 

    [ // third series (Q3) 
     [0,100], 
     [0.4,200], 
     [1,200], 
     [1.4,200], 
     [2,200], 
     [2.4,200], 
    ], 

    [ // fourth series (Q4) 
     [0,100], 
     [0.4,200], 
     [1,200], 
     [1.4,200], 
     [2,200], 
     [2.4,200], 
    ] 

] 

E funziona in questo modo: http://jsfiddle.net/WAGbt/2/

ho fatto un altro aggiornamento con le etichette per la serie, e sugli assi: http://jsfiddle.net/WAGbt/3/