Real Time Charts & Diagramme mit JavaScript programmieren

Real Time Charts können Daten in Echtzeit darstellen. Das heißt, die Daten werden quasi dauerhaft aktualisiert, um stets den aktuelle Diagramme anzuzeigen. Um die Real Time Chart zu erstellen, nutzen wir JavaScript und die Google Chart API.

Diese Live Diagramme finden häufig Einsatz in Dashboards, um Entwicklungen von z.B. Temperaturen oder Preisen anzuzeigen. Vielfältige Einsatzgebiete und sie machen auch optisch wirklich was her. Sieh selbst!

Ich zeige Dir hier, die Du diese Real Time Chart erstellen kannst. Es aktualisiert sich alle 250 Millisekunden und zeigt (in unserem Beispiel) zufällige Daten an. Im produktiven Einsatz kann es Daten aus einer Datenbank oder direkt von einem Sensor auslesen und anzeigen.

Damit nicht genug. Das gleiche Konzept lässt sich 1:1 auf andere Diagramme überführen, das sind unter anderem:

• Geografisches Diagramm
• Balkendiagramm
• Liniendiagramm
• Kuchendiagramm
• Donut-Diagramm
• Zeitachse
• Liste aller möglichen Graphen

Google Chart API – Kurze Einführung

Die Google Chart API ist ein kostenfreier Service von Google, der es uns ermöglicht verschiedene 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.

Die Daten werden statisch angezeigt. Wir entwickeln aber drum herum unser eigenes System, damit wir die Daten in einem gewissen Interval updaten können, und somit unsere Real Time Chart erhalten. Die Daten werden dann (fast) live in Echtzeit geupdatet und der gewünschte Effekt entsteht.

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.

<script type="text/javascript" loading="lazy" 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 das Liniendiagramm Paket 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
  let data = google.visualization.arrayToDataTable([
    ["Year", "CPU Usage"],
    [0, 0]
  ]);

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

  // draw chart on load
  let 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.

4. Daten dynamisch updaten

Nun kommen wir zum wichtigsten Teil, wieso Du überhaupt hier bist – das dynamische Updaten der Daten. Damit „erschaffen“ wir unsere Real Time Chart.

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. Du kannst also über PHP und eine Datenbank Klasse Daten direkt aus Deiner Datenbank auslesen oder Du schreibst eine eigene RestAPI, z.B. mit Node.js.

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
  let 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" loading="lazy" 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
            let data = google.visualization.arrayToDataTable([
                ["Year", "CPU Usage"],
                [0, 0]
            ]);

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

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

            // interval for adding new data every 250ms
            let 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
                let random = Math.random() * 30 + 20;

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

                index++;
            }, 250);

        }
    </script>
</body>

</html>

Schlusswort

Fertig! In diesem Beispiel haben wir ein Liniendiagramm als Real Time Chart, der Code funktioniert aber genau so mit den anderen Diagrammarten. Du musst oftmals nur die options und die data Struktur anpassen.