#Howto use in-tooltip-charts with 23degrees.io EN/GER

6 min readSep 11, 2020

## für Deutsche Version nach unten scrollen ##

In our last blog entry we explained to you the basics of how to use tooltips in charts and maps. Today we’ll go a step further and explore how to insert one or more visualizations into the tooltip of a chart or map with 23degrees.

How to insert a visualization into a tooltip

To insert a visualization into a tooltip first go to the tooltip editor of your chart or map and select insert statistic.

Now choose from one of the three following options.

1. My existing statistics & 3. Insert a Specific slug

When selecting my existing statistics pick your visualization for the tooltip from the folder where it’s stored. Then click on the chart or map you would like to insert.

Alternatively, you can Insert a Specific slug of an existing chart or map into an input field. Slug = the part of the url that comes after “https://app.23degrees.io/view/”

In the next step, you can set parameters effecting the way the visualization will be displayed in the tooltip. These settings include width and height (as % of total tooltip) and the possibility to merge your in-tooltip-chart with the corresponding visualization according to a specific data field (column).
We call this a Join.

In the example below we merged the two visualization by the columns containing the country names (“Land”). Note that you can also merge by two or more columns

Once the Join is active click on ADD STATISTIC to insert your chart into the tooltip.

And there it is! Your tooltip now contains a line chart and thanks to the Join function the values displayed in the line chart correspond to the country selected on the map.

2. Data field

Another way to create an in-tooltip-chart is to insert a slug (the part of the url after https://app.23degrees.io/view/) of an existing visualization in the data table of your chart/map.

Here, the first step is to copy the slug of the visualization that will later appear in your tooltip.

Next, paste the slug into a data field (column) of the main visualization.

Create your visualization (save -> continue to statistic) and go to the tooltip editor. Click insert statistic and select Insert statistic from Data Field. Now chose the data field, that contains your slug from the dropdown menu.

The next steps are the same are the same as before. Mind that the Join function does not exist with this type of in-tooltip visualization.

As you can see, the diagram in the tooltip is only displayed, when the element containing a slug in the corresponding row of the data table is selected. In this case, the tooltip only shows a graphic for the “e-paper readers” because the other rows in the data table do not contain any slugs.

## Deutsche Version ##

#Howto: Wie man Visualisierungen in ein Tooltip einfügt

In unserem letzten Blog-Eintrag haben wir die Grundlagen der Verwendung von Tooltips in Diagrammen und Karten erklärt. Heute gehen wir einen Schritt weiter und zeigen euch, wie man eine oder mehrere Visualisierungen in das Tooltip eines Diagramms oder einer Karte einfügt.

Wie man eine Visualisierung in ein Tooltip einfügt

Um eine Visualisierung in ein Tooltip einzufügen, gehe zunächst in den Tooltip-Editor des Diagramms oder der Karte und klicke auf Statistik einfügen.

Wähle nun eine der drei folgenden Optionen aus.

1. Meine vorhandenen Statistiken & 3. Spezfischer Slug

Wenn du meine vorhandenen Statistiken auswählst, kannst Du die Visualisierung für das Tooltip aus einem deiner Ordner auswählen. Klicke dann auf das Diagramm oder die Karte, welches Du einfügen möchtest.

Alternativ kann ein Spezfischer Slug eines bestehenden Diagramms oder einer Karte in ein Eingabefeld eingefügt werden.
(Slug = der Teil der Url einer Grafik der nach “https://app.23degrees.io/view/" kommt.)

Als nächstes können einige Parameter zur Darstellung der Grafik im Tooltip eingestellt werden. Zu diesen Einstellungen gehören Breite und Höhe (in % des gesamten Tooltips) sowie die Möglichkeit, ein In-Tooltip-Diagramm mit der entsprechenden Visualisierung gemäß eines bestimmten Datenfeldes (Spalte) zusammenzuführen.
Wir nennen diese Funktion Verknüpfung.

Im Beispiel unten haben wir die beiden Visualisierungen anhand der Ländernamen (Geo-Spalte: “Land”) verknüpft. Es können allerdings auch mehrere Spalten miteinander verknüpft werden .

Sobald die Verknüpfung aktiv ist, klicke auf STATISTIK HINZUFÜGEN, um das Diagramm ins Tooltip einzufügen.

Dein Tooltip enthält nun ein Liniendiagramm und dank der Verknüpfungs-Funktion entsprechen die im Liniendiagramm angezeigten Werte immer dem auf der Karte ausgewählten Land.

2. Datenfeld

Eine andere Möglichkeit, ein In-Tooltip-Diagramm zu erstellen, besteht darin, einen Slug (den Teil der URL eines Diagramms nach https://app.23degrees.io/view/) einer vorhandenen Visualisierung in die verknüpfte Datentabelle eines Diagramms oder einer Karten einzufügen.

Hier besteht der erste Schritt darin, den Slug der Visualisierung zu kopieren, der später im Tooltip erscheinen soll.

Den Slug fügt man nun in ein Datenfeld (Spalte im Datensatz der Hauptvisualisierung) ein.

Erstelle nun die Visualisierung (Speichern -> Weiter zur Statistik) und gehe in den Tooltip-Editor.

Klicke auf Statistik einfügen und wähle “Statistik einfügen von Datenfeld aus”. Wählen nun das Datenfeld, welches den Slug enthält, aus dem Dropdown-Menü aus.

Du kannst nun wie gehabt Höhe und Breite der in-Tooltip-Grafik einstellen. Beachte allerdings, dass die Verknüpfungs-Funktion bei dieser Art der In-Tooltip-Visualisierung nicht existiert.

Wie du siehst, wird das Diagramm im Tooltip nur angezeigt, wenn das Element ausgewählt wird, das einen Slug in der entsprechenden Zeile der Datentabelle enthält. In diesem Fall zeigt das Tooltip nur bei den “E-Paper-Leser” eine Grafik an, da die anderen Zeilen in der Datentabelle keine Slugs enthalten.