Techblog

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
=== Darstellung von Zeitreihen mit google ===


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

Beispiel: 

{{ :chart1.png?400 |}}

**1. Integration der Bibliothek**

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


**2. Implementierung der Grafik mit Javascript:**

<code 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>
</code>


**3. Der Inhalt der Webseite:**

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

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

<code php>
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); 
</code>


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:**

<code php>
  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);  
  }  
 </code>