How to Visualize 2-Dimensional Temperature Data in Grafana

Introduction

We are currently thinking about how to transmit 2-dimensional temperature data (array / matrix) to Grafana and how to visualize it.


A 8 x 8 matrix of temperature information.

Raw data

So the raw data would be a serialized array following this convention
temp-ir-[#row]-[#column]

temp-ir-1-1
temp-ir-1-2
temp-ir-1-3
temp-ir-1-4
temp-ir-1-5
temp-ir-1-6
temp-ir-1-7
temp-ir-1-8
temp-ir-2-1
temp-ir-2-2
temp-ir-2-3
temp-ir-2-4
temp-ir-2-5
temp-ir-2-6
temp-ir-2-7
temp-ir-2-8
temp-ir-3-1
temp-ir-3-2
temp-ir-3-3
temp-ir-3-4
temp-ir-3-5
temp-ir-3-6
temp-ir-3-7
temp-ir-3-8
…
temp-ir-7-8
temp-ir-8-8

or the original array (this are real data from my desk, so it is really hot in Berlin today, but the sonsor is not calibrated, so I think you can substract some degree Celsius)

[
31.75, 32.00, 31.00, 33.25, 36.75, 36.00, 35.50, 35.00, 
31.75, 32.00, 31.25, 33.00, 37.00, 36.00, 35.50, 35.25, 
31.50, 32.00, 32.25, 32.50, 37.00, 36.75, 35.75, 35.00, 
32.00, 32.00, 31.75, 31.00, 36.00, 36.50, 36.25, 35.00, 
31.75, 32.25, 32.00, 32.00, 35.00, 37.00, 36.25, 35.00, 
32.00, 32.25, 32.25, 32.50, 34.00, 36.25, 32.25, 31.00, 
32.25, 31.75, 32.00, 31.75, 33.50, 30.75, 30.75, 29.75, 
31.50, 32.00, 31.75, 31.25, 32.25, 30.75, 30.00, 29.75, 
]

Questions

  • How can I visualize this data in Grafana so that I get a similar image to that on the small display?
  • Do you have some hints or recommendations for the data serialization format regarding a best-practice naming convention für InfluxDB and Grafana?
1 Like

Can the standard tabel panel do this job?

http://docs.grafana.org/features/panels/table_panel/

InfluxDB is a time-series data base, and by definition there is always ‘only’ a t/y association, no x/y. Even then, the individual pixel/block colouring would remain a problem. So assigning an x/y data cloud to a discrete point in time should be done via the external db where the ext annotations reside, rather than trying anything within InfluxDB.

Displaying images in Grafana can be done in at least two ways: besides the possibility to show an image as a URL- formed ressource (you can see this e.g. in @mois’ dashboard), there is one plugin which lets you display an image as a background for measurements: PictureIt. It would be nice if this was a beehive with measurements superimposed! (They both cache a given image, individual reloads will be needed if image source is dynamic. )

Rendering an image out of a point cloud and applying color maps, gradation changes, blurring, interpolation … (I think you have these in mind too) could be done with matplotlib (images example, image interpolation example ) or Bokeh - to name two sophisticated Python-based libraries for scientific presentation-quality plotting.

1 Like

Will the size of the matrix be fixed? If so, within which source can the data be found?

@wtf The size depends on the IR sensor. But I think we can focus on one sensor, so e.g. with the Panasonic AMG8833 it will be always 8 x 8 px or sensor data.

I have not uploaded data so far. In case it is helpful I will upload some example data to play around.

As I understood @weef he would recommand to upload or produce png / jpg whatever files with a defined timestamp and use this file instead of the original data.

2 posts were split to a new topic: Displaying values on top of SVG images in Grafana

Ok, I have created a SVG wit 8x8 = 64 squares:

8x8-with-2mm-each_smaller-edited

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="56mm" height="56mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 5600 5600"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .str0 {stroke:#000000;stroke-width:10}
    .fil0x {fill:#00ab00}
    .fil0 {fill:#D9DADA}
   ]]>
  </style>
 </defs>
 <g id="Ebene_x0020_1">
 
  <!-- 1st row, "px" 1 to 8 -->
  <rect id="temp-ir-1-1" class="fil0 str0" x="0000" y="0000" width="700" height="700"/>
  <rect id="temp-ir-1-2" class="fil0 str0" x="0700" y="0000" width="700" height="700"/>
  <rect id="temp-ir-1-3" class="fil0 str0" x="1400" y="0000" width="700" height="700"/>
  <rect id="temp-ir-1-4" class="fil0 str0" x="2100" y="0000" width="700" height="700"/>
  <rect id="temp-ir-1-5" class="fil0 str0" x="2800" y="0000" width="700" height="700"/>
  <rect id="temp-ir-1-6" class="fil0 str0" x="3500" y="0000" width="700" height="700"/>
  <rect id="temp-ir-1-7" class="fil0 str0" x="4200" y="0000" width="700" height="700"/>
  <rect id="temp-ir-1-8" class="fil0 str0" x="4900" y="0000" width="700" height="700"/>
  
  <rect id="temp-ir-2-1" class="fil0 str0" x="0000" y="0700" width="700" height="700"/>
  <rect id="temp-ir-2-2" class="fil0 str0" x="0700" y="0700" width="700" height="700"/>
  <rect id="temp-ir-2-3" class="fil0 str0" x="1400" y="0700" width="700" height="700"/>
  <rect id="temp-ir-2-4" class="fil0 str0" x="2100" y="0700" width="700" height="700"/>
  <rect id="temp-ir-2-5" class="fil0 str0" x="2800" y="0700" width="700" height="700"/>
  <rect id="temp-ir-2-6" class="fil0 str0" x="3500" y="0700" width="700" height="700"/>
  <rect id="temp-ir-2-7" class="fil0 str0" x="4200" y="0700" width="700" height="700"/>
  <rect id="temp-ir-2-8" class="fil0 str0" x="4900" y="0700" width="700" height="700"/>
  
  <rect id="temp-ir-3-1" class="fil0 str0" x="0000" y="1400" width="700" height="700"/>
  <rect id="temp-ir-3-2" class="fil0 str0" x="0700" y="1400" width="700" height="700"/>
  <rect id="temp-ir-3-3" class="fil0 str0" x="1400" y="1400" width="700" height="700"/>
  <rect id="temp-ir-3-4" class="fil0 str0" x="2100" y="1400" width="700" height="700"/>
  <rect id="temp-ir-3-5" class="fil0 str0" x="2800" y="1400" width="700" height="700"/>
  <rect id="temp-ir-3-6" class="fil0 str0" x="3500" y="1400" width="700" height="700"/>
  <rect id="temp-ir-3-7" class="fil0 str0" x="4200" y="1400" width="700" height="700"/>
  <rect id="temp-ir-3-8" class="fil0 str0" x="4900" y="1400" width="700" height="700"/>
  
  <rect id="temp-ir-4-1" class="fil0 str0" x="0000" y="2100" width="700" height="700"/>
  <rect id="temp-ir-4-2" class="fil0 str0" x="0700" y="2100" width="700" height="700"/>
  <rect id="temp-ir-4-3" class="fil0 str0" x="1400" y="2100" width="700" height="700"/>
  <rect id="temp-ir-4-4" class="fil0 str0" x="2100" y="2100" width="700" height="700"/>
  <rect id="temp-ir-4-5" class="fil0 str0" x="2800" y="2100" width="700" height="700"/>
  <rect id="temp-ir-4-6" class="fil0 str0" x="3500" y="2100" width="700" height="700"/>
  <rect id="temp-ir-4-7" class="fil0 str0" x="4200" y="2100" width="700" height="700"/>
  <rect id="temp-ir-4-8" class="fil0 str0" x="4900" y="2100" width="700" height="700"/>
  
  <rect id="temp-ir-5-1" class="fil0 str0" x="0000" y="2800" width="700" height="700"/>
  <rect id="temp-ir-5-2" class="fil0 str0" x="0700" y="2800" width="700" height="700"/>
  <rect id="temp-ir-5-3" class="fil0 str0" x="1400" y="2800" width="700" height="700"/>
  <rect id="temp-ir-5-4" class="fil0 str0" x="2100" y="2800" width="700" height="700"/>
  <rect id="temp-ir-5-5" class="fil0 str0" x="2800" y="2800" width="700" height="700"/>
  <rect id="temp-ir-5-6" class="fil0 str0" x="3500" y="2800" width="700" height="700"/>
  <rect id="temp-ir-5-7" class="fil0 str0" x="4200" y="2800" width="700" height="700"/>
  <rect id="temp-ir-5-8" class="fil0 str0" x="4900" y="2800" width="700" height="700"/>
  
  <rect id="temp-ir-6-1" class="fil0 str0" x="0000" y="3500" width="700" height="700"/>
  <rect id="temp-ir-6-2" class="fil0 str0" x="0700" y="3500" width="700" height="700"/>
  <rect id="temp-ir-6-3" class="fil0 str0" x="1400" y="3500" width="700" height="700"/>
  <rect id="temp-ir-6-4" class="fil0 str0" x="2100" y="3500" width="700" height="700"/>
  <rect id="temp-ir-6-5" class="fil0 str0" x="2800" y="3500" width="700" height="700"/>
  <rect id="temp-ir-6-6" class="fil0 str0" x="3500" y="3500" width="700" height="700"/>
  <rect id="temp-ir-6-7" class="fil0 str0" x="4200" y="3500" width="700" height="700"/>
  <rect id="temp-ir-6-8" class="fil0 str0" x="4900" y="3500" width="700" height="700"/>
  
  <rect id="temp-ir-7-1" class="fil0 str0" x="0000" y="4200" width="700" height="700"/>
  <rect id="temp-ir-7-2" class="fil0 str0" x="0700" y="4200" width="700" height="700"/>
  <rect id="temp-ir-7-3" class="fil0 str0" x="1400" y="4200" width="700" height="700"/>
  <rect id="temp-ir-7-4" class="fil0 str0" x="2100" y="4200" width="700" height="700"/>
  <rect id="temp-ir-7-5" class="fil0 str0" x="2800" y="4200" width="700" height="700"/>
  <rect id="temp-ir-7-6" class="fil0 str0" x="3500" y="4200" width="700" height="700"/>
  <rect id="temp-ir-7-7" class="fil0 str0" x="4200" y="4200" width="700" height="700"/>
  <rect id="temp-ir-7-8" class="fil0 str0" x="4900" y="4200" width="700" height="700"/>
  
  <rect id="temp-ir-8-1" class="fil0 str0" x="0000" y="4900" width="700" height="700"/>
  <rect id="temp-ir-8-2" class="fil0 str0" x="0700" y="4900" width="700" height="700"/>
  <rect id="temp-ir-8-3" class="fil0 str0" x="1400" y="4900" width="700" height="700"/>
  <rect id="temp-ir-8-4" class="fil0 str0" x="2100" y="4900" width="700" height="700"/>
  <rect id="temp-ir-8-5" class="fil0 str0" x="2800" y="4900" width="700" height="700"/>
  <rect id="temp-ir-8-6" class="fil0 str0" x="3500" y="4900" width="700" height="700"/>
  <rect id="temp-ir-8-7" class="fil0 str0" x="4200" y="4900" width="700" height="700"/>
  <rect id="temp-ir-8-8" class="fil0 str0" x="4900" y="4900" width="700" height="700"/>
 </g>
</svg>

I will have to upload some sample data. The color definition is also in the Arduino sketch. Perhaps the calculation can be done 1:1 here.

I have uploaded 36 datasets at

https://swarm.hiveeyes.org/grafana/d/fmgVQj5ikz/hiveeyes-test-irsensor?orgId=2&from=1534209360391&to=1534209397142

with the variables

temp-ir-1-1,temp-ir-1-2,temp-ir-1-3,temp-ir-1-4,temp-ir-1-5,temp-ir-1-6,temp-ir-1-7,temp-ir-1-8,
temp-ir-2-1,temp-ir-2-2,temp-ir-2-3,temp-ir-2-4,temp-ir-2-5,temp-ir-2-6,temp-ir-2-7,temp-ir-2-8,
temp-ir-3-1,temp-ir-3-2,temp-ir-3-3,temp-ir-3-4,temp-ir-3-5,temp-ir-3-6,temp-ir-3-7,temp-ir-3-8,
temp-ir-4-1,temp-ir-4-2,temp-ir-4-3,temp-ir-4-4,temp-ir-4-5,temp-ir-4-6,temp-ir-4-7,temp-ir-4-8,
temp-ir-5-1,temp-ir-5-2,temp-ir-5-3,temp-ir-5-4,temp-ir-5-5,temp-ir-5-6,temp-ir-5-7,temp-ir-5-8,
temp-ir-6-1,temp-ir-6-2,temp-ir-6-3,temp-ir-6-4,temp-ir-6-5,temp-ir-6-6,temp-ir-6-7,temp-ir-6-8,
temp-ir-7-1,temp-ir-7-2,temp-ir-7-3,temp-ir-7-4,temp-ir-7-5,temp-ir-7-6,temp-ir-7-7,temp-ir-7-8,
temp-ir-8-1,temp-ir-8-2,temp-ir-8-3,temp-ir-8-4,temp-ir-8-5,temp-ir-8-6,temp-ir-8-7,temp-ir-8-8,
1 Like

I duplicated this dashboard to Test: IR-Sensor SVG-Pixmap [wtf]. The “SVG-pixmap” on the right shows the “current-value” of the metric. Just hit within the dashboard “timewards” to the future (with a default of a two second time window).

@clemens: Sorry, I think misunderstood the height “rawness” of the color-value of the IR-sensor. Nevertheless @weef and I think that it would be much better to save the data within one instead of 64 measurements (InfluxDB) respectively metrics (Grafana) and use within this measurement 64 different values.

3 Likes

Really great! Sorry, I do not understand what “one” here means? One variable instead of 64??

Or 1 instead of 15.0° C, 2=15.1°C, 3=15.2°C and so on?

Sorry, forget what I said: You are already submitting the data the way I suggested. So the amount of metrics requests performed by Grafana is now reduced to 1 instead of 64 :)

1 Like

Really awesome! Many, many thanks!

Great i see now a text overlay also! Test: IR-Sensor SVG-Pixmap [wtf].

To honor your work on that, @clemens, @weef and @wtf, we just created an animation from your efforts regarding sensor unlocking, data gathering and visualization. Enjoy!

Howto

grafanimate \
  --scenario=ir_sensor_svg_pixmap \
  --header-layout=studio,no-folder --datetime-format=human-time \
  --grafana-url=https://swarm.hiveeyes.org/grafana/ --dashboard-uid=acUXbj_mz --panel-id=8

Results

GIF Format

Suitable for embedding into web pages and instant messaging channels.

MP4 Format


Suitable for full screen display.
2 Likes