Integrating pictures in App Elements

Apps (Frontend)
1

Dear App Builders,
one of our customers would like to integrate pictures in our App Elements.
For example, imagine a bubble chart where every bubble represents a supermarket-article. When you hover with the mouse over the bubble, you get the tooltip - and in the tooltip you see the picture of the respective article (does not necessarily have to involve tooltips - but you get the general idea). Has anybody of you already had a similar use case - and if yes, how did you implement it?

2

I received the following reply from @kai.geukes :

Have you already tried this? Most of the Highcharts API Syntax is working in Apps.
how to display image in tooltip - Highcharts official support forum

3

In the end, I used the hint from Kai to integrate the pictures as follows:

"tooltip": {
      "useHTML": true,
      "headerFormat": "<table>",
      "pointFormat": "<tr><th colspan='2'><h4>Artikel: {point.article}</h3></th></tr><tr><th>Restbon-Umsatz (Mittelwert):</th><td>{point.x}</td></tr><tr><th>Filialumsatz (Mittelwert):</th><td>{point.y}</td></tr><tr><th>Summe verkaufter Artikel:</th><td>{point.z} {point.sales_unit}</td></tr><tr><th>Artikelnummer:</th><td>{point.article_id}</td></tr></tr><tr><th>Anzahl Filialen: </th><td>{point.num_shops}</td></tr></tr><tr><th>Süßes Katzenbild: </th><td><img src = 'https://haustier-portal.de/wp-content/uploads/Suesses-Katzenbild-mit-miauendem-Kitten.jpg' height='82' width='122'/></td></tr></tr>",
      "footerFormat": "</table>",
      "followPointer": false
    },

Bildschirm_foto 2022-11-23 um 09.38.33

1 Like
4

You can also store the html-links or the base64 strings for each data point in a OD Data Table, and by addressing these data points in the tooltip the image renders without any problems.

1 Like