Erstellen von Liniendiagrammen mit MySQL + PHP + Morris.js

Question

Ich benutze MySQL + PHP + Morris.js, um einige Liniendiagramme zu generieren. Ich möchte das Ergebnis Diagramm wie folgt aussehen:

morris.js line graph

Ich verstehe die Daten wie folgt aussehen sollte morris.js um die Grafik zu erzeugen:

{"period": "2014 Q3", "A": 75, "B": 77, "C": 79}, 
{"period": "2014 Q2", "A": 85, "B": 87, "C": 89}, 
{"period": "2014 Q1", "A": 93, "B": 95, "C": 97} 

Allerdings Ich habe Probleme bekommen zu diesem Format mit PHP + MySQL.

Meine Datenbankstruktur sieht so aus.

table1: numbers 
ID | name | time | number 
------+------+------+--- 
1 | A | 1 | 75 
2 | A | 2 | 77 
3 | A | 3 | 79 
4 | B | 1 | 85 
5 | B | 2 | 87 
6 | B | 3 | 89 
7 | C | 1 | 93 
8 | C | 2 | 95 
9 | C | 3 | 97 


table2: times 
ID | time 
----+------ 
1 | 2014 Q1 
2 | 2014 Q2 
3 | 2014 Q3 

Gibt es eine Möglichkeit, das Format morris.js wollte zu bekommen? Oder gibt es eine andere Möglichkeit, das Diagramm mit einer anderen Art von Format zu erstellen? Hoffentlich werde ich nicht die Struktur der Datenbank ändern müssen :(

Dank viel!

Answer 1

Sie so etwas wie dieses

<div> 
    <div id="some_line_graph"></div> 
    <?php 
     try { 
     $db = connectPDO(); 
     $row = $db->prepare("SELECT name, number FROM numbers"); //for the sake of argument and simplicity I leaved the most simple SQL 
     $row->execute(); 
     $json_data=array(); 
     foreach($row as $rec) 
     { 
     // value on x axis 
     $json_array['label']=$rec['name']; 
     // value on y axis 
     $json_array['value']=$rec['number']; 
     array_push($json_data,$json_array); 
     } 

     ?> 
    <script type="application/javascript"> 
     Morris.Line({ 
     element: 'some_line_graph', 
     // json_encode returns JSON representation of a value 
     data: <?php echo json_encode($json_data,JSON_UNESCAPED_UNICODE)?>, 
     xkey: 'label', 
     ykeys: ['value'], 
     // Set to false to skip time/date parsing for X values, instead treating them as an equally-spaced series. 
     parseTime:false, 
     labels: ['<b>Numbers graph example</b>'], 
     resize: true 
     }); 
    </script> 
    <?php 
     closePDO($db); 
     } catch (PDOException $e) { 
     showPDOErrors($e, $db); 
     } 
    ?> 
</div> 
<div> 

versuchen können, wie Sie nicht darauf haben, was Sie wollen zu zeigen (Spalten etc.) Da Sie nicht genau gesagt haben, was Sie suchen, habe ich die einfachste Abfrage/Beispiel, hoffe es hilft!