Problem mit Chart.JS und JSON

[RedlightX]

Hallo zusammen,

ich habe ein Problem mit Chart.JS und der Darstellung von JSON Inhalten in einem Pie Chart (Tortendiagramm).

Meine JSON hat folgenden Inhalt:

[src=html5]
[
{
Bezeichnung: "Beispiel1",
Anzahl: "164"
},
{
Bezeichnung: "Beispiel2",
Anzahl: "34"
}

]
[/src]

Diese Inhalte sollen in das besagte Chart, was ich momentan so versucht habe, aber nicht weiterkomme:

[src=javascript]
<canvas id="myChart" width="740" height="200"></canvas>

<script>

$(document).ready(function() {

$.ajax({

url: "http://localhost/supra/ajax/getstats.php",
dataType: "JSON",
type: "POST",
cache: false,
success: function(pieData) {
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Pie(pieData);
console.log (pieData);
}
});

});

</script>
[/src]

Die Inhalte der JSON Arrays kann ich in den Developer Tools sehen, Daten "kommen" also an.

Als Beispiel wurde in der Doku von Chart.JS folgendes beschrieben, wie die Datenstruktur auszusehen hat:

[src=html5]
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
][/src]

You do not have permission to view link please Anmelden or Registrieren

Zurück zum Problem:
Ich muss es nun irgendwie schaffen, dass eine Zuordnung zwischen Bezeichnung -> Label und Anzahl -> Value stattfindet und sämtliche JSON Inhalte in vorgegebenes Format gebracht werden (Schleife?)

Kann mir da jemand helfen?


Vielen lieben Dank!

 

[werner]

Du parst zuerest einmal dein JSON String in ein Javascript objekt und wir nennen es mal obj

Dann gehst du eine for-Schleife durch, zb

[src=javascript]
var obj = JSON.parse(string);
var data = [];

for(index in obj) {
var tmpObj = {"value": obj.Anzahl; "color": "#453544"; "highlight":"#000000"; "label": obj.Bezeichnung }
data.push(tmpobj);
}

[/src]

Ob das so stimmt weiß ich nicht, geht mehr in Richtung Pseudocode. Aber so wäre mein Ansatz mal gewesen.

 

[RedlightX]

Hallo werner,

danke für deinen Beitrag - noch will es nicht klappen, aber ich bleibe dran :/

 

[theSplit]

Etwas verwirrt mich, warum benutzt du in deinem JSON Beispiel, deiner Daten, deutsche Bezeicher für die Datenangabe?

Wenn ich richtig sehe müsste dein JSON so aussehen, damit es richtig erkannt wird:
[src=text]
var data = [
{
value: 164,
color:"#F7464A", // scheinbar optional
highlight: "#FF5A5E", // scheinbar optional
label: "Beispiel 1"
},
{
value: 34,
color: "#46BFBD", // scheinbar optional
highlight: "#5AD3D1", // scheinbar optional
label: "Beispiel 2"
}
][/src]

Schließlich wird "value" eingelesen um zu bestimmen welchen Wert ein Datenpunkt besitzt, oder "label" um den Datenbezeichner zu definieren.
Prüf das mal bitte.

 

[RedlightX]

Ich stehe gerade auf dem Schlauch.

Die JSON wird von einer SQL-Abfrage generiert, die mir z.B. den Namen einer Pizza ausgeben soll, mit der dazugehörigen Anzahl. Pizza wäre Bezeichnung, Anzahl eben Anzahl.
Laut dem Beispiel von Chart.JS wäre doch value meine Anzahl und label der Name der Pizza?

Wenn ich jetzt sämtliche Einträge in der JSON (26 Stück) jeweils in das Format von data bringen möchte, muss ich diese Datei durchlaufen, oder? Und daran scheitert es.. ich sitze da seit gestern dran und sollte eigentlich meine Kofferpacken, da ich um halb 5 heute nacht raus muss


EDIT: LOL! Es geht. Ich hab die DAtenbankabfrage so geändert, dass nun statt Anzahl value genommen wird und statt Bezeichnung eben label...

Verrückte Welt...

 

[theSplit]

Freut mich dass es so klappt. - Dann kannst du ja beruhigt schlafen gehen.