Wie erstellt man ein Liniendiagramm mit Datenbankwerten?

Question

Ich habe eine Datenbank, um etwas Wert zu sparen, die Gerilim, Akim und Macht ist.

Ich möchte ein Liniendiagramm mit diesen Werten aus der Datenbank erstellen. Ich suche im Internet und konnte nichts finden. Hier ist mein Skriptcode;

* LINE CHART 
* ---------- 
*/ 
//LINE randomly generated data 

var data = [],id=0; 
<?php 
include"../../pages/veri_ayar.php"; 

$verileriCek = mysql_query("SELECT * FROM etkin"); 

      while ($b=mysql_fetch_array($verileriCek)){ 

       $akim = $b['akim']; 
     $id=$b['id']; 

      } 
    data=$akim; 
    id=$id;?> 


var i=0; 
    while(i < id) { 
     data; 
     i++; 
    } 
    var line_data1 = { 
     data: data, 
     color: "#3c8dbc" 
    }; 
    $.plot("#line-chart", [line_data1], { 
     grid: { 
     hoverable: true, 
     borderColor: "#f3f3f3", 
     borderWidth: 1, 
     tickColor: "#f3f3f3" 
     }, 
     series: { 
     shadowSize: 0, 
     lines: { 
      show: true 
    }, 
    points: { 
     show: true 
    } 
    }, 
    lines: { 
    fill: false, 
    color: ["#3c8dbc"] 
    }, 
    yaxis: { 
    show: true, 
    }, 
    xaxis: { 
    show: true 
    } 
}); 
//Initialize tooltip on hover 
$('<div class="tooltip-inner" id="line-chart-tooltip"></div>').css({ 
    position: "absolute", 
    display: "none", 
    opacity: 0.8 
}).appendTo("body"); 
$("#line-chart").bind("plothover", function (event, pos, item) { 

    if (item) { 
    var x = item.datapoint[0].toFixed(2), 
     y = item.datapoint[1].toFixed(2); 

    $("#line-chart-tooltip").html(item.series.label + " of " + x + " = " + y) 
     .css({top: item.pageY + 5, left: item.pageX + 5}) 
     .fadeIn(200); 
    } else { 
    $("#line-chart-tooltip").hide(); 
    } 

}); 
/* END LINE CHART */ 

Answer 1

Der beste Weg ist es, ein REST-API mit PHP zu erstellen, die eine JSON dienen, die alle Werte enthalten, dann können Sie diese JSON mit AJAX von der Client-Seite (JavaScript) Holen und einen großen Einsatz Visualisierungsbibliothek wie D3.