Einleitung
Datenvisualisierung ist ein zentraler Baustein von DoiT Console Analytics – Charts helfen unseren Nutzern, komplexe Daten zu durchdringen. Mit den wachsenden Anforderungen unserer Kunden an immer größere Datenmengen in den Charts kam unsere bisherige Charting-Bibliothek Highcharts zunehmend an ihre Grenzen: UI-Freezes häuften sich und beeinträchtigten die User Experience spürbar.
Um diesen wachsenden Anforderungen gerecht zu werden, haben wir uns nach einer alternativen Charting-Bibliothek umgesehen, die große Datenmengen effizient verarbeitet, ohne Abstriche bei Performance und Funktionsumfang.
In diesem Blogbeitrag teilen wir unsere Erfahrungen beim Wechsel von einer SVG-basierten zu einer Canvas-basierten Charting-Bibliothek und beleuchten die Herausforderungen und Vorteile beider Ansätze.
Die Herausforderungen von SVG-basiertem Charting bei großen Datenmengen
Scalable Vector Graphics (SVG) ist seit jeher eine beliebte Wahl für Charts und Datenvisualisierung. Bei großen Datenmengen stoßen SVG-basierte Bibliotheken jedoch schnell an Performance-Grenzen. Die Ursache liegt in der Art, wie SVG-Bibliotheken Chart-Elemente verwalten.
Da jedes Element durch einen DOM-Knoten repräsentiert wird, wächst das DOM mit jedem zusätzlichen Element. JavaScript tut sich jedoch schwer damit, große DOM-Bäume effizient zu verarbeiten – das Resultat sind UI-Freezes und andere Probleme bei der User Experience.
Ein Beispiel: Ein einfacher Report wie dieser erzeugt über 10.000 DOM-Knoten.
Einfaches Analytics-Chart
Inspiziert man einen einzelnen Balken im Browser, zeigt sich: Jeder Balken wird durch ein einzelnes
Chart-Struktur im DOM
Die Vorteile eines Canvas-basierten Ansatzes für Charts mit großen Datenmengen
Canvas ist eine Web-Technologie, die eine Zeichenfläche auf einer Webseite bereitstellt und das Erstellen und Manipulieren grafischer Objekte mit JavaScript erlaubt. Als bitmap-basierte Zeichentechnologie rendert Canvas Inhalte direkt auf dem Canvas-Element – das Ergebnis ist ein einziger DOM-Knoten.
Damit eignet sich Canvas hervorragend für dynamische, interaktive Grafiken und komplexe Visualisierungen. Durch die Nutzung der GPU lassen sich zudem flüssigere und reaktionsschnellere Charts erzeugen – für ein spürbar angenehmeres Nutzungserlebnis.
Render-Zeit im Vergleich: SVG vs. Canvas
Bibliotheken im Vergleich: die passende Wahl treffen
Bei der Vielzahl verfügbarer Canvas-basierter Bibliotheken ist die Auswahl alles andere als trivial. Wir sind die Sache pragmatisch angegangen: Wir haben verschiedene Bibliotheken mit großen Datenmengen getestet und sie hinsichtlich Performance, Funktionsumfang, Dokumentation, Verbreitung und Flexibilität bewertet. Nach ausführlicher Analyse fiel unsere Wahl auf Apache ECharts – dank herausragender Performance, umfangreicher Anpassungsmöglichkeiten und einer aktiven Community die ideale Bibliothek für unser Projekt.
Integration der neuen Bibliothek und Auswertung der Ergebnisse
Apache ECharts haben wir schrittweise integriert: Zunächst liefen neue Charts parallel zur alten Bibliothek, um eine sanfte Migration zu ermöglichen. So ließ sich das Fehlerrisiko minimieren und sicherstellen, dass die neuen Charts unsere Anforderungen erfüllen. Nach dem Rollout haben wir die Performance der neuen Bibliothek anhand echter Produktivdaten mit der alten verglichen – und konnten die Fortschritte bei Performance und Effizienz präzise messen.
Beispiel: Performance-Gewinn beim Erzeugen eines sehr großen Reports auf Basis echter Produktivdaten.
Charting-Erlebnis: alt vs. neu
Zusammenfassung und Fazit
Der Wechsel von einer SVG-basierten zu einer Canvas-basierten Charting-Bibliothek war anspruchsvoll, hat sich aber in jeder Hinsicht ausgezahlt. Unsere bisherige Bibliothek konnte mit den steigenden Anforderungen unserer Kunden an größere Datenmengen nicht mehr Schritt halten und führte zu Performance-Problemen. Nach gründlicher Recherche und Tests haben wir in Apache ECharts die beste Lösung gefunden. Die schrittweise Integration sorgte für einen reibungslosen Umstieg und brachte deutliche Performance-Gewinne. Die neue Bibliothek liefert ein visuell ansprechenderes und interaktiveres Nutzungserlebnis – selbst bei großen Datenmengen – und übertrifft damit die Erwartungen unserer Kunden.