How to upload image and show the movement of object on it in grafana dashboard

Grafana Dashboards
1

Hi,
I have a requirement for uploading the image on panel and Influxdb has data for x& y axis to be shown on image.

I have tried using imageit, pictureit, flowcharting panel. All of these can show the value changing, but not the movement of object based on values.

2

hello

please post sample data as csv? here is one way using apache echart grafana plugin

image
image803Ă—467 7.71 KB

3

Hi,
image
I have to upload this kind of background image on the panel and show x-axis, y-axis data moving. Its like location of mobile moving around.
I am using Influxdb ,can’t share the data.

4

Cool. Well I cant help you without sample data. If confidential obfuscate it.

5

If you cannot share real data for security / privacy / legal / commercial
reasons, just show us a sample of it, modified so that we can still see what it
looks like, but anonymised / obfuscated so that it’s no longer real data
relating to real people or real customers.

All we need to see is “what does the data look like?” We don’t care about
what it actually is as data. Dummy values are fine.

Antony.

1 Like
6

the data is just time ,x and y axis as columns having numbers.

x-axis y-axis
160 180
210 210
240 220

7

So are you using flux query or influxql query language?

Also check this out

8

i use normal select .Is it same as ACE.svg plugin? I hope the starting and end point is not fixed in this.

1 Like
9

Yes ace svg plugin is one option. Not sure what you mean

10

@geethaj It’s hard to see the details in your screenshot, but it looks very similar to one of the Apache ECharts examples, which displays SVG as a map and adds movements on top of it.

Screen Shot 2022-11-12 at 22.17.55
Screen Shot 2022-11-12 at 22.17.55722Ă—1013 78.6 KB

Here is the code: Examples - Apache ECharts

1 Like
11

It is expected to be like scatter plot with image on the background.
The object is expected to move based on x and y co-ordinates i get from the influxdb.

In Apache Echarts, the example u have shown, how do i configure the movement of object C depending on x and y co-ordinates.

12

@geethaj We prepared a series of YouTube videos, which should explain how to get the data from any datasource and display it using Apache ECharts Panel with Scatter or any other supported visualizations: https://www.youtube.com/playlist?list=PLPow72ygztmQHGWFqksEf3LebUfhqBfFu