Charts im Browser – Eine Einführung in AG Grid (Teil 2)

Nachdem wir in Teil 1 unserer kleinen Reihe zum AG-Grid-Framework gezeigt haben, wie man damit schnell interaktive Tabellen erstellt, geht es in diesem Beitrag darum, wie man die gleichen Daten auch in Grafiken (wie Balkendiagramme, Pie Charts oder Zeitserien) darstellt.

Grafische Darstellung der Daten mit AG Grid

Genau wie bereits im ersten Beitrag haben wir die Codebeispiele mit dem React Wrapper erstellt. Die Screenshots zeigen mehr Dateneinträge als der hier angegebene Code, da dies sonst den Platz und die Übersicht sprengen würde. Für die exemplarische Erklärung sollten die reduzierten Daten jedoch reichen. Der gesamte Code ist auch wieder in einem GitHub-Projekt vorhanden und kann zum Ausprobieren geklont werden.

Balkendiagram

Um einen Barchart zu erstellen, ist der erste Schritt ist die Aufbereitung der Daten in das passende Format:

1const barPieData = [
2    { genre: "Adventure", amount: 8537 },
3    { genre: "Fantasy", amount: 2173 },
4    { genre: "Drama", amount: 15365 },
5    { genre: "Thriller", amount: 5966 },
6    { genre: "Comedy", amount: 7336 },
7    { genre: "Crime", amount: 9217 },
8    { genre: "Mystery", amount: 957 },
9    { genre: "Romance", amount: 2239 },
10    { genre: "War", amount: 1079 },
11    { genre: "Sci-Fi", amount: 2661 },
12    { genre: "History", amount: 829 },
13    { genre: "Animation", amount: 1281 },
14    { genre: "Biography", amount: 473 },
15    { genre: "Horror", amount: 2183 },
16    { genre: "Family", amount: 633 },
17    { genre: "Western", amount: 709 },
18    { genre: "Sport", amount: 329 },
19    { genre: "Music", amount: 225 },
20    { genre: " Musical", amount: 227 },
21  ];

Erwartet wird ein JSON-Objekt mit einem Array. Jedes Element im Array muss die gleichen Attribute enthalten. Diese Attribute können dann in den ChartOptions verwendet werden, um die Daten der „Serien“ festzulegen:

1const [barChartOptions] = useState({
2    autoSize: true,
3    data: barPieData,
4    theme: {
5      overrides: {
6        bar: {
7          series: {
8            strokeWidth: 0,
9          },
10        },
11      },
12    },
13    title: {
14      text: "Second Genres for Action Movies According to IMDB",
15      fontSize: 18,
16    },
17    subtitle: {
18      text: "Without genres with less 100 entries",
19    },
20    series: [
21      {
22        type: "bar",
23        xKey: "genre",
24        yKey: "amount",
25      },
26    ],
27    axes: [
28      {
29        type: "category",
30        position: "left",
31      },
32      {
33        type: "number",
34        position: "bottom",
35        title: {
36          enabled: true,
37          text: "How often",
38        },
39      },
40    ],
41    legend: {
42      enabled: false,
43    },
44  } as AgChartOptions);

Die hier gezeigten ChartOptions definieren außerdem noch:

• title: Dort kann im Text-Parameter der eigentliche Titel mitgegeben werden und dann auch noch, zum Beispiel, die Schriftgröße geändert werden.
• subtitle: ähnlich wie der title
• axes: Hier werden die zwei Achsen im Detail definiert, unter anderem, was gezeigt werden soll. Auch die Achsen können Titel erhalten, um die Lesbarkeit zu erhöhen.
• legend: Hier kann die Legende eingestellt werden.

Kuchendiagramm

Durch einfaches Verändern dieser (und weiterer, hier nicht gezeigter) Parameter kann der Graph sehr einfach den eigenen Wünschen entsprechend angepasst werden. Die gleichen Daten können auch in ein Kuchendiagramm übersetzt werden. Auch dies ist über die ChartOptions möglich:

1const numFormatter = new Intl.NumberFormat("de-DE");
2  const total = barPieData.reduce((sum, d) => sum + d["amount"], 0);
3  const [pieChartOptions] = useState({
4    container: document.getElementById("myChart"),
5    autoSize: true,
6    data: barPieData,
7    title: {
8      text: "Second Genres for Action Movies According to IMDB",
9      fontSize: 18,
10    },
11    subtitle: {
12      text: "Without genres with less 100 entries",
13    },
14    series: [
15      {
16        type: "pie",
17        calloutLabelKey: "genre",
18        angleKey: "amount",
19        sectorLabelKey: "amount",
20        calloutLabel: {
21          enabled: true,
22        },
23        sectorLabel: {
24          color: "white",
25          fontWeight: "bold",
26          formatter: ({
27            datum,
28            sectorLabelKey,
29          }: {
30            datum: any;
31            sectorLabelKey: string;
32          }) => {
33            const value = datum[sectorLabelKey];
34            return numFormatter.format(value);
35          },
36        },
37        title: {
38          text: "amount",
39        },
40        fills: [
41          "#fb7451",
42          "#f4b944",
43          "#57cc8b",
44          "#49afda",
45          "#3988dc",
46          "#72508c",
47          "#b499b5",
48          "#b7b5ba",
49        ],
50        innerRadiusRatio: 0.5,
51        innerLabels: [
52          {
53            text: numFormatter.format(total),
54            fontSize: 24,
55            fontWeight: "bold",
56          },
57          {
58            text: "Total",
59            fontSize: 16,
60          },
61        ],
62        highlightStyle: {
63          item: {
64            fillOpacity: 0,
65            stroke: "#535455",
66            strokeWidth: 1,
67          },
68        },
69        tooltip: {
70          renderer: ({
71            datum,
72            calloutLabelKey,
73            title,
74            sectorLabelKey,
75          }: {
76            datum: any;
77            calloutLabelKey: string;
78            title: string;
79            sectorLabelKey: string;
80          }) => {
81            return {
82              title,
83              content: `${datum[calloutLabelKey]}: ${numFormatter.format(
84                datum[sectorLabelKey]
85              )}`,
86            };
87          },
88        },
89      },
90    ],
91  } as AgChartOptions);

Das Wichtige ist hier, dass im Series Array der Type als „pie“ deklariert wird, ähnlich wie oben in Zeile x ein „bar“-Chart genutzt wurde. Das Kuchendiagramm ist in der Handhabung etwas aufwendiger, da hier mehrere Parameter genutzt werden. Aus dem obigen Bild kann man zusammen mit dem Code-Beispiel die Intention der meisten Parameter erkennen. Ein paar werden wir dennoch hier erläutern:

• angleKey: Der Key, anhand dessen der Kuchen gebildet wird. Meist eindeutig, da nur einer der Keys eine Zahl ist.
• innerRadiusRatio: macht aus dem Kuchendiagramm ein „Donutdiagramm“. Hier wird eine innere Sektion aus dem Kuchen herausgeschnitten, damit dort Platz für Labels oder ein zweites Diagramm ist.
• innerLabels: ein Array, in dem innerLabel-Objekte eingefügt werden können, die im Zentrum des Kuchendiagramms dargestellt werden. Am besten mit innerRadiusRatio verwenden.
• highlightStyle: ein Objekt, das Einstellungen bietet, wie ein Sektor bei einem Mouseover hervorgehoben werden soll

Liniendiagramm

Zum Abschluss zeigen wir hier noch ein Liniendiagramm und ein paar kleine Besonderheiten, die es hier zu beachten gilt.

1const LineChart: FC = () => {
2  const teslaData = getData();
3  const [pieChartOptions] = useState({
4    autoSize: true,
5    title: {
6      text: "Tesla Stock Price",
7    },
8
9    data: teslaData,
10    series: [
11      {
12        xKey: "date",
13        yKey: "price",
14        tooltip: {
15          renderer: ({
16            xKey,
17            yKey,
18            datum,
19          }: {
20            xKey: string;
21            yKey: string;
22            datum: any;
23          }) => {
24            return {
25              title: xKey,
26              content: `${yKey}: ${datum[yKey]}`,
27            };
28          },
29        },
30        marker: { enabled: true, shape: "diamond", size: 7 },
31        strokeWidth: 2.0,
32      },
33    ],
34    navigator: {
35      enabled: true,
36    },
37  } as AgChartOptions);

Die chartOptions halten hier nun keine Überraschungen mehr bereit. Den Type-Parameter können wir hier weglassen, da ein Linegraph der Default ist. Zwei Punkte, die hier erwähnenswert sind, sind der Marker-Parameter und der Navigator. Da der Linetype Datenpunkte automatisch verbindet, ist ein Marker hilfreich, um in dünn besetzten Daten echte Datenpunkte klar zu markieren und diese von den Verbindungen zu trennen. In unserem Beispiel sind die Daten sehr dicht und wir haben daher den Marker ausgeschaltet.

Der Navigator ermöglicht es dem Nutzer, interaktiv in die Daten zu zoomen. Durch einfaches Ziehen der Griffe an den Seiten kann der Nutzer so interessante und dichte Bereiche besser sichtbar machen. Hierfür haben wir auch die Marker eingeschaltet:

Abschluss

Ähnlich wie bereits bei den Tabellen zeichnet sich AG Grid auch bei Charts durch seine mächtigen und leicht zu nutzenden Funktionen aus. Kleine Parameterverschiebungen ermöglicht es, Graphentypen zu ändern und an die Nutzerwünsche anzupassen. Die hier vorgestellten Beispielgraphen sind hierbei nur die Spitze des Eisbergs. Auf der Website sind viele weitere Grafiken und Kombinationen zu sehen. Auch wird die Möglichkeit geboten, mit der Enterprise Edition Graphen und Charts zu verknüpfen, um so die Interaktion mit den Daten noch weiter zu erhöhen.