SVG-Chart: another example


Graphen in 4D

Die aktuellen 4D Chart-Fähigkeiten sind für mich weniger geeignet. Deshalb experimentiere ich mit eigenen Charts und setzte dabei die 4D SVG-Komponente ein. Das ist komfortabel. Ein kurzer Bericht aus meiner Werkstatt.

Zum Jahresende stand die Auswertung der Energieverbräuche an. Wieder eine Gelegenheit, eine andere Darstellung auszuprobieren. Ziel ist, die Gas- und Strom-Verbräuche zweier Häuser über die Monate eines Jahres zu plotten. Daten über mehrere Jahre sind vorhanden. Manche Jahre hatten einen richtigem Sommer, 2010 war ein sehr langer Winter mit 3 Monaten Schnee von Januar bis Ostern. Ist ein Muster zu erkennen, gibt es Einsparmöglichkeiten?

Hier ein SVG: die Jahre sind in Farben auseinandergehalten, die Häuser als Rechteck und Kreis, die Monate in Spalten und die Mittelwerte mit einer Streubreite im Hintergrund.

An den Daten arbeiten

Das Chart ist noch nicht der Weisheit letzter Schluß. Um mich ranzuarbeiten, habe ich mir ein 4D-Formular zusammengestellt. Das Formular besteht aus

  • einer Array-Listbox mit den Datensätzen
  • einer Subform, die den angewählten Datensatz in einer Subform im Detail anzeigt und bearbeiten läßt
  • Formular-Objekten wie Registerkarte, Abweichung in % und Button
  • einem Bild-Objekt, um das SVG darzustellen
  • einer zweiten Subform, die die Daten zum Punkt der Graphik, über dem die Maus steht, anzeigt.

Gas_Layout

Komme ich nochmal dazu, die Auswertung zu verbessern, werde ich ein Update veröffentlichen.

Wie zwei Subforms der gleichen Tabelle mit verschiedenen Datensätzen in einem Formular anzuzeigen sind, ist hier beschrieben.



Charting 4D data

The current charting of 4D doesn’t fit my needs well. I’m experimenting. Using 4D SVG-component is comfortable. Some ideas from my workshop.

With year’s end I wanted to get a better knowledge, how much energy is used every month and how that compares to the same months of the preceding years. Is there a deviation to the median and how big is that. This is the resulting chart since 2008 for two houses and electricity consumption.

House I is rects and house II is circles. Different colours for every year, months in columns, and a corridor of 25% plus minus mean value for the month set into the background. The edge is blurry to be even more in the background. The graph is the 4D-generated SVG embedded in this HTML-page. Hovering on a SVG-datapoint will show the datapoint-title like a  help-tip.

To get things going, I’m mixing 4D form-elements, form-objects, and combine subforms for data maintenance:

  • form and formelements
  • listbox to display a list of records
  • subform to display the selected listbox-record
  • a picture variable to display an SVG-chart
  • subform on top of the SVG-chart to show datapoint detail-information.

Gas_Layout

This is work in progress. Check for updates.

How to use two different records of the same table on one form is described here.