Hallo,
ich bin neu hier und habe ein Problem. Ich rufe per php Daten aus einer MySQL-DB ab. Diese Daten möchte ich in einem Diagramm darstellen.
Ich habe im Netz etwas gesucht und bin auf die Javascript-Bibliothek "Charts.js" gestossen. Dort sind bereits einige Beispiele dabei.
Leider habe ich mit Javascript bisher noch nichts zu tun gehabt. Wie könnte ich in dem angefügten Code die beiden Arrays x und y mit den Werten einer php-Variable füllen? Ich habe schon einige Varianten z.B. "<?php echo $variable ?>"; probiert. Leider wird dann das Diagramm in meinem Browser nicht angezeigt.
Vielleicht kann ich von euch ein paar Tips bekommen.
Besten Dank und viele Grüße!!!
ich bin neu hier und habe ein Problem. Ich rufe per php Daten aus einer MySQL-DB ab. Diese Daten möchte ich in einem Diagramm darstellen.
Ich habe im Netz etwas gesucht und bin auf die Javascript-Bibliothek "Charts.js" gestossen. Dort sind bereits einige Beispiele dabei.
Leider habe ich mit Javascript bisher noch nichts zu tun gehabt. Wie könnte ich in dem angefügten Code die beiden Arrays x und y mit den Werten einer php-Variable füllen? Ich habe schon einige Varianten z.B. "<?php echo $variable ?>"; probiert. Leider wird dann das Diagramm in meinem Browser nicht angezeigt.
Vielleicht kann ich von euch ein paar Tips bekommen.
Besten Dank und viele Grüße!!!
Code:
<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script src="../Chart.js"></script>
</head>
<body>
<div style="width:90%">
<div>
<canvas id="canvas" height="400" width="800"></canvas>
</div>
</div>
<script>
var x = new Array(100,200,300);
var y = new Array(10,20,30);
var lineChartData = {
labels : (y),
datasets : [
{
label: "Testdiagramm",
fillColor : "rgba(255, 0, 0, 0)",
strokeColor : "rgba(255, 0, 0, 1)",
pointColor : "rgba(255, 0, 0, 1)",
pointStrokeColor : "#rgba(255, 0, 0, 1)",
pointHighlightFill : "rgba(255, 0, 0, 1)",
pointHighlightStroke : "rgba(255, 0, 0, 1)",
data : (x)
},
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}
</script>
</body>
</html>