Interaktive High-Performance Charts fĂĽr Home Assistant
Ich möchte euch gerne mein neues und bisher größtes Projekt vorstellen.
Wir alle kennen das Problem der Auswertung in HA. In den letzten Wochen habe ich versucht in diese Richtung ein Projekt aufzuziehen. Die einfache Auswertung von Sensoren ist immer wieder Thema und das Detailed Charts Panel soll hoffentlich die Lücke etwas schließen, ohne externe Lösungen nutzen zu müssen. Schaut es euch gerne an, ich bin auf das Feedback gespannt.
Das Detailed Charts Panel ist eine leistungsstarke Visualisierungslösung für Home Assistant, um historische Daten deiner Sensoren tiefgehend zu analysieren. Es bietet Funktionen, die weit über die Standard-History hinausgehen, wie z.B. Zoom, Pan, Grid-Layouts, verschiedene Diagrammtypen und eine fortbestehende Konfiguration. Zudem läuft alles rein lokal mit Hilfe der Websocket Api von Home Assistant.
Das Panel speichert deine Einstellungen (ausgewählte Sensoren, Farben, Ansichten) automatisch im Browser (Local Storage), sodass du deine Analyseumgebung nach einem Neustart sofort wieder vorfindest. Du kannst auch mehrere Ansichten definieren und einzeln speichern. Aktuell arbeite noch an den Feinheiten für die Card auf dem Dashboard. Im Fokus steht aber das Panel!
Wenn euch das Panel gefällt, würde ich mich sehr über ein Stern auf github freuen.
Das sollte dem Algorithmus helfen, das Panel etwas zu pushen. Lieben Dank.
Schaut bitte unbedingt in Ruhe die Doku an.
Features
Interaktive Charts: Stufenloser Zoom & Pan (Touch & Mausrad) mit automatischem Nachladen der Daten.
Panel Modus & Card Modus: Zwei Möglichkeiten der Betrachtung, komplettes Panel oder als Dashboard Card.
Auto-Scale (W kW): Rechnet Werte von W/Wh automatisch in kW/kWh um – kein Kopfrechnen mehr!
Das github ĂĽber den Link in Home Assistant einfĂĽgen.
Das “Detailed Charts Panel” sollte nun in HACS verfügbar sein. Klicke auf “INSTALLIEREN”.
Die Ressource wird automatisch zu deiner Lovelace-Konfiguration hinzugefĂĽgt.
Manuelle Installation ĂĽber Hacs
Manuelle Installation ĂĽber Hacs
Ă–ffne HACS in Home Assistant.
Gehe zu “Frontend” und klicke auf die drei Punkte in der oberen rechten Ecke.
Wähle “Benutzerdefinierte Repositories” (“Custom repositories”) aus.
Füge die URL zu diesem GitHub-Repository hinzu und wähle “Lovelace” als Kategorie.
Klicke auf “HINZUFÜGEN” (“ADD”).
Das “Detailed Charts Panel” sollte nun in HACS verfügbar sein. Klicke auf “INSTALLIEREN”.
Die Ressource wird automatisch zu deiner Lovelace-Konfiguration hinzugefĂĽgt.
Manuelle Installation in HA
Manuelle Installation in HA
Dateien herunterladen:
Lade alle Dateien aus diesem Repository herunter (insbesondere .js Dateien).
Wichtig: Da dieses Panel externe Bibliotheken nutzt, stelle sicher, dass chart.umd.min.js, hammer.min.js und chartjs-plugin-zoom.min.js ebenfalls heruntergeladen werden.
Dateien in Home Assistant hochladen:
Erstelle einen neuen Ordner namens detailed-charts-panel im www/community-Verzeichnis deiner Home Assistant-Konfiguration.
Kopiere alle heruntergeladenen Dateien in diesen neuen Ordner. Deine Ordnerstruktur sollte wie folgt aussehen:
Hi, ein neues Update ist veröffentlicht. Wer das Update von 2.2 auf 2.3 macht, bitte unbedingt den Cache löschen, sonst funktioniert die Verknüpfung nicht mehr korrekt, da ich das Projekt von den Dateien her noch weiter unterteilt habe. Eure Einstellungen bleiben erhalten.
Neuerungen:
Option zum Umbenennen von Sensoren in der Sensorliste
Mobilunterstützung (eine Kopfzeile wird bei Auflösungen unter 1280px angezeigt)
Experimentelle Option zum Importieren anderer custom-cards
Dateien wurden zur besseren Strukturierung erneut weiter aufgeteilt
Hej und Moin,
ich habe die Version 2.3 am Laufen gehabt und dann auf die 2.4 geupdatet. Leider geht danach bei mir nichts mehr… Ich bekomme die folgende Meldung, wenn ich in der Sidebar auf “detailed Charts” geklickt habe..
dabei ist die Datei aber dort vorhanden?
Danach habe ich alles wieder deinstalliert und neu installiert… Aber der Fehler bleibt bei mir leider bestehen?
Vielleicht noch ein Hinweis das ich auch noch auf die Homeassistant 2026.2.1 von der Homeassistant 2026.1.3 geupdated habe… Aber keine Ahnung, ob das auch damit zusammenhängt? Ich wollte es nur erwähnt haben.
Hat jemand eine Idee?
Hi, gerade erste gelesen. Ich habe im aktuellen update die detailed-charts-views.js nicht mehr drin, um eure vorhandene Datei nicht durch das Update zu ĂĽberschreiben. Daher findet er jetzt keine Datei im besagtem Ordner! Einfach die gespeicherte detailed-charts-views.js wieder in der Ordner packen und dann klappt es auch wieder.
Wie ich nun mitbekommen habe, wird der Ordner unter www/community/… beim update immer vollständig gelöscht. Ich muss daher dafür sorgen, dass die detailed-charts-views.js zukünftig direkt im www gespeichert wird. Ansonsten haben wir bei Updates immer wieder das Problem, dass eure erstellte detailed-charts-views.js überschrieben wird. Vielleicht ist es das Beste auf die Datei zu verzichten und bei der Installation darauf zu verweisen, dass die detailed-charts-panel.js erstellt werden muss.
Hej @jayjojayson
danke für Deinen Kommentar und für die WahnsinnsApp sowieso…
Aber für mich ist aktuell noch nicht klar, wie ich mein Problem fixen kann.. denn wie schon geschrieben habe ich ja die Integration gelöscht, HA neu gestartet und dann die DetailedChart-App neu installiert. Aber nach wie vor bekomme ich den gleichen Fehler wie vorher? Soll heissen, dass ich selbst wenn ich vollständig neu aufsetze ich weiterhin den Fehler erhalte…
Zeige mit mal bitte den Inhalt deines Ordners als Screenshot (www/community/detailed-charts-panel)
Wenn du neu installierst und dann direkt die aktuelle Version installierst, dann fehlt dir die detailed-charts-views.js im Ordner! Erstelle die Datei dort einfach, kann auch leer sein und speichern. Jetzt findet das Panel die Datei wieder und startet damit auch.
Ich hatte gleiches Problem nach Update (mit Home Assistant 2026.1.2).
Neuinstallation von Detailed Charts hat nichts gebracht, genauso wie alle anderen Tipps dazu.
Letztlich hat sich mein Verdacht, das Google Chrome den Cache nicht vollständig zurücksetzt als richtig erwiesen.
Ich habe als Test Home Assistant im MS Edge geöffnet und da startete Detailed Charts normal, was im Chrome nicht ging.
Hej @DasRelikt
das ist ja spannend… ich bin eigentlich mit Safari unterwegs. Aufgrund deines Tipps habe ich es mal auch mit Chrome probiert, aber damit geht es bei mir auch nicht.
Also: Safari und Chrome sind sich einig: keine Anzeige bzw. Fehler.
Ich suche jetzt auch nochmal konkret nach Cache Rücksetzung… Für mich immerhin eine erste Spur… Danke
Nachtrag: nochmal in Safari den Cache richtig geleert.. jetzt bekomme ich zwar die obige Fehlermeldung nicht mehr, aber der Bildschirm bleibt weiss.
Ja der Browser Cache ist hier wirklich immer wichtig diesen komplett zu löschen! Das schreibe ich aber auch schon in den Release Notes bei den Updates immer mit dazu.
Wenn ich mir deinen Ordner anschaue, dann fehlt dir jetzt noch die detailed-charts-views.js. Lege im Ordner einfach eine neue Datei mit diesem Code an. Browser Cache resetten und dann sollte es funktionieren.
/* detailed-charts-views.js */
/* Hier können Ansichten definiert werden, die auf allen Geräten verfügbar sind.
Diese Ansichten werden im Panel mit einem Schloss-Symbol angezeigt
und können nicht über die GUI gelöscht werden.
*/
export const sharedViews = [
/* Code hier drunter einfĂĽgen */
];
Es wird heute noch ein Update herauskommen, da lasse ich die details-charts-view.js erstmal wieder drin. Ich will sie aber zukünftig in den Ordner www legen bzw. müsst ihr sie dort erstellen, ansonsten wird sie bei einem Update wieder überschrieben. Ein andere Möglichkeit sehe ich nicht.
Hallo jayjojayson,
das Update hat es gebracht. Obwohl ich erst seit zwei Tagen diese Anwendung nutze. Alles läßt sich ohne Darstellungsfehler einbinden. Auswahl nach Kalender ist jetzt bei mir verzögerungsfrei. Überhaupt läuft alles viel flüssiger. Da ich meine Hintergründe fast ausschließlich “sattschwarz” habe, wäre ein Wunsch von mir, daß man vielleicht Themen von HA mit übernehmen könnte. Oder aber die Hintergrundfarbe definieren könnte. Ist aber ein reiner Luxus-Wunsch. Ansonsten hast Du da eine super Anwendung erstellt. Danke.
ich habe heute deine neueste Version installiert. Und schon geht’s einwandfrei.
Danke, fĂĽr deine viele Arbeit. Tiefe Verneigung und gerne weiter so
LG
@rapahl@Karlchen, sehr schön wenn es euch gefällt, dann freue ich mich auch. Nutze es inzwischen selber auch immer mal wieder für die schnelle Übersicht von Sensoren, statt den “Verlauf” in HA zu nutzen. Schaut euch auch gerne die Dashboard-Card an, die bietet fast alles was das Panel auch bietet und wird jetzt auch korrekt angeordnet.
Ich hatte vergessen gestern die Update-News mitzuteilen.
Update v_2.5. Ihr könnt euch jetzt über den Bars in den kleinen Charts die Werte anzeigen lassen (wie im Video schon gezeigt). Ansonsten habe noch einige Fixes gemacht, für das Design der Card auf dem Dashboard und Charts Fixes allgemein.
ZUM THEMA detailed-charts-views.js. Die Datei wird aber sofort unter /www/ gespeichert. /www/detailed-charts-views.js
Ich habe sie in diesem Update wieder integriert, so dass sie am richtigen Platz abgelegt wird. Bei zukünftigen Updates ist die Datei dann nicht mehr enthalten und wir in diesem Ordner “www” auch bei Updates nicht aktualisiert! Das ist dann euer fester Speicher in Zukunft.
UPDATE v_2.5 Details:
1. Bar Values Display (“Werte anzeigen”)
Zustand wird pro Sensor gespeichert und wiederhergestellt
Abstände zwischen/unter Charts auf 10px reduziert
Letzter Chart hat keinen unteren Abstand mehr
4. Panel-Mode
Hauptdiagramm-Höhe wird gespeichert und wiederhergestellt
Auch nach Speicherung eurer View sollte der Hauptchart jetzt die Höhe beibhalten
Wenn du gespeicherte Views in deiner detailed-charts-views.js-Datei hast, erstelle vor dem Update unbedingt ein Backup dieser Datei!
Mit diesem Update befindet sich die Datei detailed-charts-views.js zukĂĽnftig unter /www/detailed-charts-views.js.
Du musst den Cache deines Browsers oder der Companion-App leeren!
Das etwas anders war, wußte ich, aber ich kam nicht drauf. Es ist die Bildschirmauflösung !
Auf dem 34” UW Monitor schneidet HA rechts u. links ein Stück ab. Detailed Chars Panel bringt die volle Größe. Noch kann ich alles erkennen, aber man weiß ja nie……
Hi, ich habe gestern und heute fleiĂźig gebastelt und die Card fĂĽr Hacs entsprechend umgestellt. Es werden nun auch hier wie bei meinen anderen Cards die Datein im github per workflow zusammengebaut, so dass ihr beim Update oder bei der Installation nur noch eine Datei erhaltet. War ein Krampf mit den chart-Bibliotheken, aber es funktioniert jetzt.
Ich habe einen Vorjahresvergleich eingebaut, kann links im SeitenmenĂĽ aktiviert werden.
GANZ WICHTIG: Ich habe beim letzten Update schon darauf umgestellt, dass die detailed-charts-views.js in den www gepackt wird. Das hat sich auch nicht geändert, denn so habt ihr zukünftig eine festen Speicher, der bei Updates nicht überschrieben wird! Ab diesem Update (v_2.6) wird die detailed-charts-views.js nicht mehr mitgeliefert! Ihr müsst also bei Neuinstallation, die detailed-charts-views.js im Ordner www neu erstellen.
Mehr Infos dazu findet ihr im Wiki, was ich entsprechend ĂĽberarbeitet habe.
Ansonsten hier die Neuerung in der Ăśbersicht:
Englische und deutsche Ăśbersetzungen sind jetzt verfĂĽgbar
Neuer Schalter fĂĽr Jahresvergleich
Die Seitenleiste merkt sich den Status nach dem Aktualisieren oder Ă„ndern der Ansicht
Neue Codestruktur (Dateien werden jetzt ĂĽber github workflow erstellt)
Optimiert fĂĽr HACS
Wiki ĂĽberarbeitet
Dann hatte ich hier ganz vergessen mein Video zu teilen, schaut gerne rein. Mein Mikroquali ist nicht sonderlich gut, bin halt auch kein Youtuber und musste erstmal ein Mikro suchen
Moin @jayjojayson,
ich habe mir gerade dein YT-Video angesehen.
Beeindruckende Arbeit, GlĂĽckwunsch und mein Respekt.
Da wird sich doch eine Anwendung fĂĽr finden.
Das Tool gefällt mir sehr gut, leicht zu installieren und die Bedienung ist schlicht und einfach.
Allerdings habe ich ein paar kleine Probleme bzw. fehlen die eventuell?
Wenn ich ein Balkendiagramm erstelle welche mit Sensordaten die Monatlich aufzeichnen, bekomme ich diese nicht als Monat angezeigt sondern tagesweise, Ich wĂĽrde aber gerne z.B. Stromverbrauch im Monat als 1 Balken ĂĽber z.B. 3 oder 6 Monate.
Zweitens kann ich den Wert auch zusätzlich über dem Balken anzeigen?
erstmal vielen Dank fĂĽr die tolle Arbeit. Es funktioniert im Prinzip auch schon sehr gut. In deinem Video wird ja auch einiges gezeigt. Allerdings bleiben fĂĽr mich die ein oder andere Frage
In dem Beispiel des Videos hast du mehrere Sensoren in dem Chart. U.a. auch den SOC. Du stellst das gesamte Chart auf “Balken” um. Lediglich der SOC bleibt “Linie”. Warum ist das so? Wo kann man das differenzieren, welcher Sensor welchen Chart-Typ bekommt?
Ich habe einen Wind-Speed Sensor. (ist nur ein Beispiel). Daraus bilde ich mir mit 3 Helfern einen Mittelwert, einen Maximalwert und einen Minimum-Wert. Ich möchte die Drei nun in einem Chart darstellen. Das klappt. Allerdings soll der Mittelwert Linie dargestellt werden und die anderen beiden ohne Linie, aber it gefüllter Fläche. Jedoch nicht bis nach unten. Der Maximalwert soll gefüllt werden mis zur Mittelwertlinie nach unten. Der Minmalwert bis zur Mittelinie nach oben ;-).
Ich suche da schon ne ganze Zeit… Mini Graph-Card kann das nicht. Plotly kann das auch nicht. Die Apex kann das mit nem Trick. Da kann man unter dem Minimumwert die Hintergrundfarbe praktisch drüberlegen… So soll das ungefähr aussehen (oben Apex, unten Detailed Charts):
Detailed Charts Panel ist eine leistungsstarke Visualisierungslösung für Home Assistant, um historische Daten deiner Sensoren tiefgehend zu analysieren. Es bietet Funktionen, die weit über die Standard-History hinausgehen, wie z.B. Zoom, Pan, Grid-Layouts, verschiedene Diagrammtypen und eine fortbestehende Konfiguration. Zudem läuft alles rein lokal mit Hilfe der Websocket Api von Home Assistant.
freuen. 
Panel Modus & Card Modus: Zwei Möglichkeiten der Betrachtung, komplettes Panel oder als Dashboard Card.
Auto-Scale (W 
kW): Rechnet Werte von 
Donut Sidebar: Optionale Seitenleiste fĂĽr die prozentuale Verteilung (ideal fĂĽr Stromverbrauch).
Flexible Layouts:
Thresholds: Setze Warnlinie (z.B. bei 600W) als visuelle Referenz.
Duales Speichern: Speichere Ansichten lokal im Browser oder global in einer Datei.
Live-Statistiken: Min / Max / Durchschnitt / Summe / Aktuell – intelligent berechnet.
Drag & Drop: Ordne Charts im Grid-Modus einfach per Maus neu an.
Modern UI: Voller Support fĂĽr Home Assistant Themes (Light & Dark Mode).
| 
