Flot-Diagramm (Array 3 Werte)

Question

Ich mag wissen würde, wenn möglich ist, zu tun, dass mit Flot-Chart, weil ich nicht sicher bin ...

ich eine Tabelle mit drei Zeilen in einer Datenbank haben: Datum Start, Ende, Medikation

Mi PHP-Code:

$sql = "SELECT * FROM medications ORDER BY DateStart"; 
$stmt = $PDO -> query($sql); 
$result=$stmt -> fetchAll(PDO::FETCH_ASSOC); 

foreach ($result as $row){ 
$dateini= $row['DateStart']; 
$datend= $row['DateEnd']; 
$medic= $row['Medication']; 

$data1 = array(strtotime($dateini)*1000,$medic); 
$data2 = array(strtotime($datend)*1000,$medic); 

$data3[] = array($data1,$data2); 

} 

Wenn ich tun:

echo json_encode($data3); 

Ich bekomme das Array: [[[1456531200000, "12"], [1456704000000, "12"]], [[1456531200000, "16"], [1456704000000, "16"]], [[1456617600000], " 13 "], [1456790400000," 13 "]], [[1456704000000," 14 "], [1457049600000," 14 "]]]

<script> 
var data3 = <?php echo json_encode($data3)?>; 

$(function() { 
var datasets = [ 
{ 
    label: "Medication", 
    data: data3, 
    yaxis: 1, 
    color: "Yellow", 
    points: { symbol: "diamond", fillColor: "Yellow",show: true, radius: 6} 

} 
]; 

$.plot($("#flot-placeholder"), datasets ,options); 
</script> 

Dieser: $ .plot ($ (" # flechten -placeholder "), Datensätze, Optionen) Sie zeichnen nichts, aber wenn ich tun:

$.plot($("#flot-placeholder"), data3,options); 

ich

Es wäre möglich, die Grafikdatensätze (in $ .plot) statt data3 zu bekommen?

Answer 1

Zwei Probleme mit datasets Array:

1. Ihre data3 Array mehrere Datenreihen hat, aber sie versuchen, sie alle in einem Datensatz-Objekt in der datasets Array zu setzen. Setzen Sie jede Datenreihe in ein separates Objekt (ggf. mit eigenen Optionen).

   var datasets = [{ 
       label: "Medication", 
       data: data3[0], 
       yaxis: 1, 
       color: "Yellow", 
       points: { 
        symbol: diamond, 
        fillColor: "Yellow", 
        show: true, 
        radius: 6 
       } 
   }, { 
       label: "Medication", 
       data: data3[1], 
       yaxis: 1, 
       color: "red", 
       points: { 
        symbol: diamond, 
        fillColor: "red", 
        show: true, 
        radius: 6 
       } 
   }, ... ] 
   

2. Flot hat keine build-in diamond Symbol, Sie haben eine Funktion zur Verfügung zu stellen, die ein Diamant zeichnet.

   function diamond(ctx, x, y, radius, shadow) { 
       var size = radius * Math.sqrt(Math.PI)/2; 
       ctx.moveTo(x - size, y); 
       ctx.lineTo(x, y + size); 
       ctx.lineTo(x + size, y); 
       ctx.lineTo(x, y - size); 
       ctx.lineTo(x - size, y); 
   } 
   

Sehen Sie diesen fiddle für ein volles Arbeitsbeispiel.