Flot - kombinieren horizontale Timeline mit 'Standard' Linie

Question

Ausgehend von dem, was ich gefunden here, kann ich ganz einfach eine horizontale Zeitachse Diagramm erstellen. Was ich jetzt tun möchte, ist ein zusätzliches Liniendiagramm (oder mehrere zusätzliche Graphen) hinzuzufügen, um diese Timeline zu überlagern. In der Zeitleiste werden Werbeaktionen (Anzeigen) angezeigt, die über einen Zeitraum ausgeführt werden, und ich muss z. B. über den gesamten Zeitraum ein Liniendiagramm von SALES anzeigen.

Wenn ich das tue, bekomme ich die Promos auf einer Zeitleiste erfolgreich aufgetragen aus:

var d1 = [[(new Date("2016-12-01")).getTime(), 1], [(new Date("2016-12-10")).getTime(), 1]]; 
    var d2 = [[(new Date("2016-12-12")).getTime(), 2], [(new Date("2016-12-20")).getTime(), 2]]; 
    var d3 = [[(new Date("2016-12-21")).getTime(), 3], [(new Date("2016-12-31")).getTime(), 3]]; 
var plot = $.plot($chartDiv, [d1,d2,d3], { 
     xaxis:{mode:"time", timeformat:"%Y-%m-%d"}, 
     yaxis:{ticks:[[1, "Promo 1"],[2, "Promo 2"],[3, "Promo 3"]]} 
    }); 

, die ungefähr so ​​erzeugt: http://i.imgur.com/m0bjegQ.png

Ich habe versucht, das Hinzufügen der Verkaufsdaten und die Konfiguration der Optionen in vielerlei Hinsicht vergebens. Hier ist der nächste, dass ich gekommen bin:

var d1 = [[(new Date("2016-12-01")).getTime(), 1], [(new Date("2016-12-10")).getTime(), 1]]; 
    var d2 = [[(new Date("2016-12-12")).getTime(), 2], [(new Date("2016-12-18")).getTime(), 2]]; 
    var d3 = [[(new Date("2016-12-16")).getTime(), 3], [(new Date("2016-12-24")).getTime(), 3]];   
    var d4 = [d1,d2,d3]; 
    var d5 = [ 
     [(new Date("2016-12-01")).getTime(),201000], 
     [(new Date("2016-12-02")).getTime(),201000], 
     [(new Date("2016-12-04")).getTime(),356897], 
     [(new Date("2016-12-05")).getTime(),201000], 
     [(new Date("2016-12-06")).getTime(),545122], 
     [(new Date("2016-12-07")).getTime(),100324], 
     [(new Date("2016-12-08")).getTime(),348645], 
     [(new Date("2016-12-09")).getTime(),201000], 
     [(new Date("2016-12-10")).getTime(),729646], 
     [(new Date("2016-12-11")).getTime(),206456], 
     [(new Date("2016-12-12")).getTime(),357713], 
     [(new Date("2016-12-15")).getTime(),280647], 
     [(new Date("2016-12-17")).getTime(),398654], 
     [(new Date("2016-12-18")).getTime(),412054], 
     [(new Date("2016-12-19")).getTime(),167545], 
     [(new Date("2016-12-20")).getTime(),512345], 
     [(new Date("2016-12-21")).getTime(),612454], 
     [(new Date("2016-12-22")).getTime(),760214], 
     [(new Date("2016-12-23")).getTime(),715546], 
     [(new Date("2016-12-24")).getTime(),650654], 
     [(new Date("2016-12-25")).getTime(),712547], 
     [(new Date("2016-12-26")).getTime(),780242], 
     [(new Date("2016-12-27")).getTime(),725454], 
     [(new Date("2016-12-28")).getTime(),799142] 
    ] 
    var chartData = [ 
     { 
      data:d4, 
      yaxis:1 
     }, 
     { 
      data:d5, 
      yaxis:2 
     } 
    ];  

    // plot it 
    var plot = $.plot($chartDiv, chartData, { 
     xaxis:{mode:"time", timeformat:"%Y-%m-%d"}, 
     yaxes: [ 
     { 
      position:"left", 
      ticks:[[1,"Promo 1"],[2,"Promo 2"],[3,"Promo 3"]], 
      max: 4 
     }, 
     { 
      position: "right", 
      max: 800000, 
     }], 
     grid: { 
      mouseActiveRadius: 50, 
      hoverable: true, 
      clickable: true 
     } 
    }); 

Das Ergebnis ist dieses: http://i.imgur.com/ChcvSbn.png

Ich kann einfach nicht die Promos scheinen, um sich zu zeigen. Liegt es daran, dass die beiden Datensätze unterschiedlich konfiguriert sind? Wenn ja, wie mache ich das richtig? Muss ich „füllen“ die Termine für die Promos, so dass es wie folgt aussieht:

var d1 = [ 
     [(new Date("2016-12-01")).getTime(), 1], 
     [(new Date("2016-12-02")).getTime(), 1], 
     [(new Date("2016-12-03")).getTime(), 1], 
     [(new Date("2016-12-04")).getTime(), 1], 
     [(new Date("2016-12-05")).getTime(), 1], 
     [(new Date("2016-12-06")).getTime(), 1], 
     [(new Date("2016-12-07")).getTime(), 1], 
     [(new Date("2016-12-08")).getTime(), 1], 
     [(new Date("2016-12-09")).getTime(), 1], 
     [(new Date("2016-12-10")).getTime(), 1] 
    ]; 

(Ich bin mir ziemlich sicher, dass ich das auch ausprobiert habe.)

Answer 1

Sie müssen das Format Ihres chartData Arrays ändern, damit es mit dem übereinstimmt, was Flot als data format erwartet. Statt mehrere Datensätze als eine Serie definieren (d1, d2, & d3 als d4), wobei jeder Datensatz ist es eigene Serie ist:

var chartData = [ 
    { 
     data:d1, 
     yaxis:1 
    }, 
    { 
     data:d2, 
     yaxis:1 
    }, 
    { 
     data:d3, 
     yaxis:1 
    }, 
    { 
     data:d5, 
     yaxis:2 
    } 
];  

This JSFiddle hat ein funktionierendes Beispiel des Diagramms. Wenn Sie möchten, dass die Linienfarben von d1, d2 und d3 übereinstimmen, können Sie dies in Ihrem neuen Objekt chartData angeben.

Answer 2

Ihr d4 Array innerhalb der chartData ist kein richtiger Datensatz für Flot.

var chartData = [ 
    { 
     data:d1, 
     yaxis:1 
    }, 
    { 
     data:d2, 
     yaxis:1 
    }, 
    { 
     data:d3, 
     yaxis:1 
    }, 
    { 
     data:d5, 
     yaxis:2 
    } 
]; 

Sehen Sie diesen fiddle für ein volles Arbeitsbeispiel: Sie sollten d1, d2 und d3 direkt in Ihrem chartData einfügen.