Techblog

Darstellung von Zeitreihen mit google

Neben www.d3js.org bietet Google eine einfache Möglichkeit an, Daten grafisch darzustellen.

Beispiel:

1. Integration der Bibliothek

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

2. Implementierung der Grafik mit Javascript:

<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart', 'line']});
    google.charts.setOnLoadCallback(drawChart);
 
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          [{label:'Time', id:'time', type:'date'}, {label:'Rate', id:'rate', type:'number'}],
          [new Date('2018-06-12'),  1000],
          [new Date('2018-06-14'),  1170],
          [new Date('2018-06-16'),  1260],
          [new Date('2018-06-20'),  1030]
        ]);
        var options = {
          title: 'Kursentwicklung: ' + konzern,
          //curveType: 'function',
          legend :'none',  //legend: { position: 'bottom' },
          pointSize: 5,
          hAxis: {  title: 'Zeit', format: 'd/MM' },
          vAxis: {  title: 'Kurs',  gridlines: { color: '#aaa', count: 10 }    }
    };
 
    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
    chart.draw(data, options);
    }
    </script>

3. Der Inhalt der Webseite:

<body>
    <div id="curve_chart" style="float:left; width: 1100px; height: 700px"></div>
</body>
</html>

Dynamische Daten aus einer SQLITE3-Datenbank erzeugen Es muss nur die Definition der Zeilen var data = … ersetzt werden.

var data = google.visualization.arrayToDataTable([
      [{label:'Time', id:'time', type:'date'}, {label:'Rate', id:'rate', type:'number'}] ]);
   <?php
      $liste = getKursAsJSON($konzern);
      for ( var i = 0; i < liste.length; i++) { 
            var d = liste[i][0];  // yyyy-mm-dd hh:mm:ss
            var k = liste[i][1];
            var parts =d.split(' ');
            var parts2 = parts[0].split('-');
            data.addRows([ [new Date(parts2[0], parts2[1]-1, parts2[2]), k] ]);
            //console.log(parts2[0]);
        }
   ?>
    //console.log(liste);

Anmerkungen:

Die php-Funktion getKursAsJSON($konzern) liefert zu einem Konzernname den Kurs aus der Datenbank im JSON-Format [[“2018-08-11 13:12:44”,1221.23],[“2018-08-12 13:11:56”, 1231.45],…].

In einer Schleife werden alle Einträge in das Javascript-Array data mit der Methode addRows() eingefügt. Dabei muss das Datum in die Werte Jahr, Monat und Tag zerlegt werden.

parts[0] enthält das Datum,
parts2 enthält die jeweiligen Anteile Jahr-Monat-Tag. Da der Monat Januar mit 0 beginnt, muss hier korrigiert werden.

Datenbankabfrage:

  function getKursAsJSON($konzern) {
      $query="SELECT time,kurs FROM 'daxkurse' WHERE konzern='$konzern' ORDER BY 'time' DESC";
 
      // --- Datenbank abfragen
      $db = new SQLite3('dax.sqlite');
      $result = $db->query($sql);
      $tab= array ( );
      while ($row = $result->fetchArray()) {
          array_push($tab, array($row['time'],$row['kurs']));
      }
      $db->close();
 
      // --- Ergebnis im JSON-Format zurückgeben
      return json_encode($tab);  
  }