JavaScript Dynamic (Live) Chart programmieren

Dynamic oder Real-Time Charts in JavaScript ist ein schönes Features für Deine Statistik. Du kannst Daten updaten ohne die Seite neu laden zu müssen. Mit der Google Chart API geht das recht einfach aber trotzdem ganz individuell. Ich zeige Dir hier die wichtigsten Funktionen für Deine Website!

Einführung Google Chart API

Die Google Chart API ist eine kostenfreie Schnittstelle von Google, die es uns ermöglicht verschiedene Tabellen (Charts) und Graphen in unserer Website oder Webanwendung darzustellen. Zusätzlich bieten die Charts interaktive Funktionen für den Nutzer. Beispielsweise kann man beim Hovern ein Pop-up mit den Werten des aktuellen Elementes angezeigt bekommen. In diesem Tutorial zeige ich grundlegende Funktionen für eine dynamische Chart. Eine ausführliche und (meiner Meinung nach) extrem gute Dokumentation findest du hier.

Hier findest Du eine vollständige Liste aller möglichen Charts.

Dynamic Line Chart

Dynamic Line Chart

Die folgende Chart erstellen wir in diesem Tutorial. In einem Interval von 250ms wollen wir die CPU Usage ausgeben und in unserer Chart darstellen.

1. Google Chart API einbinden

Die Google Chart API muss über diesen script-Tag eingebunden werden. Ein lokales Hosting ist hier nicht möglich, da Googles Terms of Service das untersagen. Siehe Googles FAQ dazu.

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

2. HTML Container anlegen

Als nächstes benötigen wir ein einfaches div. Dort zeichnet die Google API später die Chart als SVG oder VML.

<div id="chart_div"></div>

3. Google Chart API initialisieren und konfigurieren

Im folgenden Code laden wir die LineChart aus den Google Chart Packages. Anschließend rufen wir die Funktion drawChart als Callback auf. Diese wird ausgeführt, sobald die API vollständig geladen wurde.

// load current chart package
google.charts.load("current", {
  packages: ["corechart", "line"]
});

// set callback function when api loaded
google.charts.setOnLoadCallback(drawChart);

Als nächstes erstellen wir ein Objekt mit Label (werden nicht angezeigt) und Default Daten für die Chart. Außerdem benötigen wir ein Array mit Optionen. Hier wird der Titel und die Achsen Beschriftung eingestellt. Alle Parameter findest Du detailliert in der Google Chart Dokumentation.

Danach wählen wir unseren HTML Container aus und lassen mit chart.draw(data, options) die Chart zeichnen.

function drawChart() {

  // create data object with default value
  var data = google.visualization.arrayToDataTable([
    ["Year", "CPU Usage"],
    [0, 0]
  ]);

  // create options object with titles, colors, etc.
  var options = {
    title: "CPU Usage",
    hAxis: {
      title: "Time"
    },
    vAxis: {
      title: "Usage"
    }
  };

  // draw chart on load
  var chart = new google.visualization.LineChart(
    document.getElementById("chart_div")
  );
  chart.draw(data, options);
}

Mit dem bisherigen Code wird die Tabelle nun schon gezeichnet und wir können einen ersten Blick darauf werden.

Google Chart mit Default Werten

4. Daten dynamisch nachladen

Der interessanteste Teil folgt nun. Wir fügen in einem Interval von 250ms neue Daten in die Chart ein. Die Variable index dient dazu, ein weiteres Element als Zeile einzufügen und hat keine weitere Bedeutung. In diesem Beispiel generiere ich Zufallszahlen, welche als CPU Usage verstanden werden sollen. Hier musst du in Zeile 5 deine eigenen Daten einfügen. Das kannst Du z.B. über einen Ajax Request machen. Dabei kann dir ein PHP Skript Serverdaten liefern oder aktuelle Zahlen aus einer MySQL Datenbank auslesen. Alternativ kannst Du hier auch eine RestAPI aufrufen um andere Services zu nutzen.

var index = 0;
setInterval(function() {

  // instead of this random, you can make an ajax call for the current cpu usage or what ever data you want to display
  var random = Math.random() * 30 + 20;

  data.addRow([index, random]);
  chart.draw(data, options);

  index++;
}, 250);

Hier nun nochmal der komplette Code in einer Datei. Zur Übersichtlichkeit habe ich alles in eine Datei gepackt. Du solltest JavaScript und CSS allerdings in extra Dateien auslagern.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        #chart_div {
            width: 1200px;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <!-- CONTAINER FOR CHART -->
    <div id="chart_div"></div>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>

        // load current chart package
        google.charts.load("current", {
            packages: ["corechart", "line"]
        });

        // set callback function when api loaded
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {

            // create data object with default value
            var data = google.visualization.arrayToDataTable([
                ["Year", "CPU Usage"],
                [0, 0]
            ]);

            // create options object with titles, colors, etc.
            var options = {
                title: "CPU Usage",
                hAxis: {
                    title: "Time"
                },
                vAxis: {
                    title: "Usage"
                }
            };

            // draw chart on load
            var chart = new google.visualization.LineChart(
                document.getElementById("chart_div")
            );
            chart.draw(data, options);

            // interval for adding new data every 250ms
            var index = 0;
            setInterval(function() {

                // instead of this random, you can make an ajax call for the current cpu usage or what ever data you want to display
                var random = Math.random() * 30 + 20;

                data.addRow([index, random]);
                chart.draw(data, options);

                index++;
            }, 250);

        }
    </script>
</body>

</html>

Fertig! In diesem Beispiel haben wir eine LineChart, der Code funktioniert aber genau so mit den anderen Google Charts. Du musst immer nur die options und die data Struktur anpassen. Bei Fragen bin ich über die Kommentare gerne behilflich! 🙂

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.