2016-03-21 9 views
0

Ich habe einige Daten von der Db, die ich in einer Grafik zeigen möchte. Dies sind Daten Beispiel - Datum und eine bestimmte AnzahlZeige Datum von DB in jQuery Flot

[[2016-03-10, 4], [2016-03-11, 3], [2016-03-12, 6]] 

Daten in JS aus Zweig Variable genommen wird

var searchFlot = '{{ flotSearch|raw }}'; 
var barOptions = { 
    series: { 
     lines: { 
      show: true, 
      lineWidth: 2, 
      fill: true, 
      fillColor: { 
       colors: [{ 
        opacity: 0.0 
       }, { 
        opacity: 0.0 
       }] 
      } 
     } 
    }, 
    xaxis: { 
     mode: "time", 
     timeformat: "%Y-%m-%d", 
     minTickSize: [1, "day"] 
    }, 
    colors: ["#1ab394"], 
    grid: { 
     color: "#999999", 
     hoverable: true, 
     clickable: true, 
     tickColor: "#D4D4D4", 
     borderWidth:0 
    }, 
    legend: { 
     show: false 
    }, 
    tooltip: true, 
    tooltipOpts: { 
     content: "x: %x, y: %y" 
    } 
}; 
$('document').ready(function() { 
    $.plot($("#flot-search"), [{label: "Searches", data: searchFlot}], barOptions); 
}); 

Es Graph Gitter zeigt, aber keine Daten auf dem Diagramm dargestellt. X-Achse zeigt nur 1970-01-01 Label.

+0

Kurze Erklärung: '2016-03-10' ist das gleiche wie' 2003' und ist ein Zeitstempel etwa 2 Sekunden nach Mitternacht am 1970-01-01. – Raidri

Antwort

1

Sie müssen Zeitstempel-Format verwenden

var searchFlot = [[moment("2016-03-10"), 4], [moment("2016-03-11"), 3], [moment("2016-03-12"), 6]]; 

I Moment() verwendet, um Ihre Daten zu halten

ich einige Code von mir hinzugefügt, weil ich vor kurzem ein sehr ähnliches Projekt hat, hoffe, es hilft .

Fiddle here

1

Als Referenz finden Sie

hier ist das flot.js Dokument flot google API.txt

Gemäß diesem Dokument,

Sie, dass die Zeitreihen Unterstützung in Flot herauszufinden basierend auf Javascript-Zeitstempeln.

Ein Javascript-Zeitstempel ist die Anzahl der Millisekunden seit dem 1. Januar 1970 00:00:00 UTC.

So können Sie dies versuchen:

new Date("2016-03-10").getTime(); 

hoffe, das hilft!