Timeseries w/ images

I have a handful of sensors that collect metrics and images.

I’m trying to figure out the best way to show the associated photos to a particular data stream.

I would like a typical time series graph and when you hover a datapoint, you see either a tooltip with the image, another panel updates with the correct image, or even plotting the images as datapoints on the graph that associate the images to a timestamp.

I would also be interested in seeing a panel that lists all the images to scroll through for the selected date range.

I’ve looked into panels like Canvas, which very well may be able to do what I want, but I’m not sure how I can link a panel to show data based on hovering other datapoints in the graph or if anyone else has any good ideas to accomplish this.

Thanks!

@ttftw One of the community members implemented a similar use case using the Apache ECharts panel, which can update the dashboard variable or display image on the same panel on the Hover event.

If you decide to use dashboard variables to display an image in a separate panel, then you can use the Base64 image panel or various other panels depending on where and how you store your images:

To list all the images, you can display them in the table or use the Dynamic Text panel.

There are a lot of options on how to do it.

There was this

1 Like

What I did once was encode the images in base 64, then store the string of characters in a bucket with timestamp, with the table panel you can select image in the cell style.

2 Likes