[Charts] keep it simple

Summary

When 4D was new, the charts 4D could draw where state of the art. The state of the art has left 4Ds charting capabilities behind, long ago. Although I find the new approach of 4D-charting as of 64-bit V15 charming, I need something simple. Much simpler as Highcharts, Plotly, you name them. And of course, not forcing me to have online-access to that kind of service is a bonus.

Die Chart-Fähigkeiten der 4D V1 waren Stand der Technik. Der Stand der Technik hat die Charting-Fähigkeiten von 4D lange überholt. Mit der 64-bit V15 werden die Optionen wieder ansehnlich, doch ich brauche was Einfaches. Viel einfacher als Highcharts, Plotly und was es sonst noch gibt. Mich und den Kunden stört an diesen Online-Paketen, daß man online sein muß, um sie zu nutzen.

Already enhancedschon erweitert!


Histogramme, Graphiken, Charts waren schon immer eine gute Möglichkeit, die eigenen Fähigkeiten zu beleuchten und den Betrachter im Dunkeln zu lassen. Das ganze eingebettet in zig Powerpoints und die Adressaten schlafen ein. Ich brauche einfache, ins Auge springende „das ist die Situation“-Charts fürs Dashboard der 4D-Anwendung. Es sind Fragen der Art zu beantworten

Einfache Charts, wie ich sie im Dashboard gebrauchen kann
Einfache Charts, wie ich sie im Dashboard gebrauchen kann
  • wo sind wir jetzt im Vergleich zu den letzten Monaten (Linie)
  • welche Anteile haben die Abteilungen (Balken und Kuchen)
  • wie weit ist noch bis Projektabschluß (Pfeil)

und wenn es ausgefallener sein darf

  • wo haben wir den größten Erfolg (Karte)

Beschriften mit Titel, Legende, Achsenabschnitten lenkt schon ab. Stattdessen reicht stets die gleichen Farben für gleiche Inhalte zu verwenden. Die Detailinformationen brauche ich erst, wenn eine der Charts angeklickt wurde.

Zuerst dachte ich eine Komponente zu bauen, die als Widget eingeklinkt wird und über eine Variable vom Typ Object mit den Daten und Einstellungen zu füttern ist. Kein Problem mit 4D ab V14. Und doch viel zu kompliziert, wenn inhouse angepaßt werden muß.

Ins Dashboard gehören einfache Aussagen – Wo stehen wir, Wie geht es uns, Was muß angepackt werden. Die Aussagen müssen ins Auge springend verpackt sein. Kein Highchart ist ins Auge springend verpackt. Die einfachen Sachen muß ich mir selber bauen.

Wie weit sind wir. Welche Anteile haben die Einzelschritte
Wie weit sind wir. Welche Anteile haben die Einzelschritte

Sieht schick aus. Habe ich selber gebaut. Sind 7 Zeilen 4D SVG-Komponenten-Aufrufe in einer Schleife für jedes eingefärbte Element. Die anderen Graphiken liegen auch in dieser Größenordnung im Programmier-Aufwand.

Kuchen, Balken und Linien sind einfach. Die Idee zum Wo stehen wir-Pfeil – Sie wissen schon, wo einem so was einfällt – zu bekommen kostete, umsetzen ging schnell. Karten kann ich mir selber bauen, auch als SVG. Ist die Karte da, ist die Hexerei vorbei.

Als nächstes ein GIF. Es wechselt das Bild ± alle 1,5 Sekunden. 4D errechnet alle 5 Charts schneller als das GIF das Bild wechselt.

Fünf Charts aus einer Tabelle gespeist.
Fünf Charts aus einer Tabelle gespeist. Leider vermatscht GIF die Farben.

Dazugekommen

Sicher vertikale Balken und Donut-Ringe sind ebenso machbar.

Zusätzlich Donuts and vertikaler Balken
Zusätzlich Donuts and vertikaler Balken

Download

Die kompilierte Anwendung für V14 können Sie hier laden.

Selber machen

Sie brauchen genau das, wissen aber nicht wie bauen. Sie können

  • eine 4D-Komponente bei mir bestellen
  • eine Schulung buchen
  • den Sourcecode kaufen

4D Komponente oder Schulung

Bitte per eMail anfragen. Danke!

Sourcecode kaufen

Sie geben mir 100,- € und ich schicke Ihnen den Sourcecode zu.



Histograms, graphics, charts are always a good option to show how clever I am and to keep the audience in the dark. Surrounded by too many powerpoints and everybody will fell asleep. I need simple, striking-the-eye charts, explaining what the situation is for the dashboard of my 4D-app. Questions like these are to be answered

Einfache Charts, wie ich sie im Dashboard gebrauchen kann
Simple Charts, as I need them in the dashboard of my app
  • where are we compared to the last months (line, bars)
  • which section did have which cut (bars and pies)
  • how far till we are done (arrow-like)

if you like something more different

  • where do we have our most success (map)

Naming by title, explaining with legend, plotting x- and y-achses might already be distracting. Using the same colour for the same content might be sufficient. Revealing detail-information when the chart is clicked-on is early enough.

First I thought about packaging into a 4D-component. To be inserted as Widget and sending the widget data and preferences by using a subform-variable of type object. Easy to be achieved with 4D starting V14. On the other hand much to complicated, if this needs to be enhanced inhouse.

The dashboard is a place for simple answers to questions like these – where are we, how are we doing, what needs to be done. Dashboards need to by striking the eye. No Highchart strikes the eye. Simple things are my own business.

Wie weit sind wir. Welche Anteile haben die Einzelschritte
How far are we. Which section is done and how much resources did it cost

Looks popping. Build it myself. It’s 7 rows of 4D SVG-component-commands, called in a loop for every coloured entity. The other charts are about the same amount of 4D-code.

Pies, bars and lines are simple. Getting the idea for the where are we-arrow – you know, where you get those kind of ideas – was more challenging than writing the code. Drawing maps, as SVG nowadays, is what I did for many years. If the map is available, treating the map is as easy as pies.

Next some screenshots combined into a GIF. Pictures change every 1,5 seconds. 4D recalculates all five charts faster than that GIF changes pictures.

Fünf Charts aus einer Tabelle gespeist.
Five charts created from the same tabular data. Sorrily GIF and colours don’t cope well.

Enhancements

Of course vertical bars and donut-graphs are doable, too.

added Donuts and vertical bar
added Donuts and vertical bar

Download

The compiled app for V14 can be downloaded from here.

Do it yourself

You need that, but don’t know how to do it yourself. You could

  • order a 4D-component from me
  • book a training
  • buy the Sourcecode of this example

4D component or training

Please send an email. Thanks!

Buy sourcecode

You transfer me 100,- € and I’ll send you the sourcecode.