Google Chart Daten aus JSON

Im Einführungskapitel zu den Google Chart Tools wurden Daten verwendet, die direkt im JavaScript gespeichert sind. Diese Variante ist zwar auf den ersten Blick die einfachste, sie ist aber im Fall häufiger Anpassungserfordernisse nicht sehr pflegefreundlich. Daher will ich hier eine andere Möglichkeit vorstellen. Diese geht davon aus, dass die Daten, die visualisiert werden sollen extern in einer einfachen Textdatei abgelegt werden. Diese Datei wird entsprechend dem JSON-Standard formatiert. JSON bedeutet JavaScript Object Notation und ist ein weit verbreitetes Format zur strukturierten Speicherung von Daten.

Eine JSON-Beispiel-Datei sampleData.json mit Daten für eine Google Chart Visualisierung kann so aussehen:

{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","a":null},{"v":3,"a":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}

Diese Daten müssen zunächst herein geholt werden. Das kann man mit einem einfachen PHP-Script getData.php erledigen:

<?php 
$string = file_get_contents("sampleData.json");
echo $string;
?>

Die JSON-daten werden mit der jQuery-Ajax Funktion abgerufen, daher muss neben den charttypischen APIs auch jQuery eingebunden werden. Der eigentliche JavaScript-Quellcode für die Visualisierung sieht dann so aus:

google.setOnLoadCallback(drawChart);
function drawChart() {
  var jsonData = $.ajax({
    url: "/js/chart/getData.php",
    dataType:"json",
    async: false
    }).responseText;
  // Erstelle Datentabelle aus den vom Server geladenen JSON-Daten.
  var data = new google.visualization.DataTable(jsonData);
  // Chart-Instanz erstellen und Zeichnungsfunktion aufrufen
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 400, height: 240});
}

So sieht dann das fertige Beispiel aus:

Kleine Erweiterung zur Datenübergabe

Der oben vorgestellte Code zum Abruf der JSON-Daten mit PHP ist nicht sehr flexibel. Ich habe eine kleine Erweiterung vorgenommen, bei der man den Namen der aufzurufenden JSON-Datei als URL-Parameter mit übergeben kann. Die PHP-Datei getDataPara.php hat diesen Inhalt:

<?php
$dateiname = $_GET['datei'];
$string = file_get_contents($dateiname);
echo $string;
?>

Der Aufruf erfolgt dementsprechend mit

...
url: "/js/chart/getDataPara.php?datei=sampleData01.json",
...

lies weiter hier https://developers.google.com/chart/interactive/docs/php_example

Weiter Möglichkeiten der Datengenerierung

Eine PHP-Klasse habe ich hier http://code.google.com/p/php-class-for-google-chart-tools/ gefunden. Auf dieser Website http://www.kometschuh.de/GoogleChartToolswithJSON.html gibt es ein PHP/MySQL-Beispiel.