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.

left panel: SVG data

{
  "aliasColors": {},
  "cacheTimeout": null,
  "datasource": "hiveeyes_test_irsensor",<?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" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100%" height="100%" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 100 100">
 <defs>
  
 </defs>
 <g id="Ebene_x0020_1">
 
  <!-- 1st row, "px" 1 to 8 -->
  <rect id="temp-ir-1-1" x="0" y="000" width="12.5%" height="12.5%"/>
  <text id="temp-ir-1-1" x="0" y="000" width="12.5%" height="12.5%"></text>
  
  <rect id="temp-ir-1-2" x="12.5" y="000" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-1-3" x="25.0" y="000" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-1-4" x="37.5" y="000" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-1-5" x="50.0" y="000" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-1-6" x="62.5" y="000" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-1-7" x="75.0" y="000" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-1-8" x="87.5" y="000" width="12.5%" height="12.5%"/>
  
  
    <!-- 2nd row, "px" 1 to 8 -->
  <rect id="temp-ir-2-1" x="0" y="12.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-2-2" x="12.5" y="12.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-2-3" x="25.0" y="12.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-2-4" x="37.5" y="12.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-2-5" x="50.0" y="12.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-2-6" x="62.5" y="12.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-2-7" x="75.0" y="12.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-2-8" x="87.5" y="12.5" width="12.5%" height="12.5%"/>

  <!-- 3rd row, "px" 1 to 8 -->
  <rect id="temp-ir-3-1" x="0" y="25.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-3-2" x="12.5" y="25.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-3-3" x="25.0" y="25.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-3-4" x="37.5" y="25.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-3-5" x="50.0" y="25.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-3-6" x="62.5" y="25.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-3-7" x="75.0" y="25.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-3-8" x="87.5" y="25.0" width="12.5%" height="12.5%"/>

  <!-- 4th row, "px" 1 to 8 -->
  <rect id="temp-ir-4-1" x="0" y="37.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-4-2" x="12.5" y="37.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-4-3" x="25.0" y="37.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-4-4" x="37.5" y="37.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-4-5" x="50.0" y="37.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-4-6" x="62.5" y="37.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-4-7" x="75.0" y="37.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-4-8" x="87.5" y="37.5" width="12.5%" height="12.5%"/>

  <!-- 5th row, "px" 1 to 8 -->
  <rect id="temp-ir-5-1" x="0" y="50.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-5-2" x="12.5" y="50.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-5-3" x="25.0" y="50.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-5-4" x="37.5" y="50.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-5-5" x="50.0" y="50.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-5-6" x="62.5" y="50.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-5-7" x="75.0" y="50.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-5-8" x="87.5" y="50.0" width="12.5%" height="12.5%"/>

  <!-- 6th row, "px" 1 to 8 -->
  <rect id="temp-ir-6-1" x="0" y="62.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-6-2" x="12.5" y="62.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-6-3" x="25.0" y="62.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-6-4" x="37.5" y="62.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-6-5" x="50.0" y="62.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-6-6" x="62.5" y="62.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-6-7" x="75.0" y="62.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-6-8" x="87.5" y="62.5" width="12.5%" height="12.5%"/>

  <!-- 7th row, "px" 1 to 8 -->
  <rect id="temp-ir-7-1" x="0" y="75.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-7-2" x="12.5" y="75.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-7-3" x="25.0" y="75.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-7-4" x="37.5" y="75.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-7-5" x="50.0" y="75.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-7-6" x="62.5" y="75.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-7-7" x="75.0" y="75.0" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-7-8" x="87.5" y="75.0" width="12.5%" height="12.5%"/>

  <!-- 8th row, "px" 1 to 8 -->
  <rect id="temp-ir-8-1" x="0" y="87.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-8-2" x="12.5" y="87.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-8-3" x="25.0" y="87.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-8-4" x="37.5" y="87.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-8-5" x="50.0" y="87.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-8-6" x="62.5" y="87.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-8-7" x="75.0" y="87.5" width="12.5%" height="12.5%"/>
  <rect id="temp-ir-8-8" x="87.5" y="87.5" width="12.5%" height="12.5%"/>



  
 </g>
</svg>
  "doInit": {},
  "format": "short",
  "gridPos": {
    "h": 13,
    "w": 10,
    "x": 14,
    "y": 1
  },
  "handleMetric": {},
  "id": 4,
  "interval": null,

  "js_init_code": "",
  "links": [],
  "maxDataPoints": 3,
  "nullPointMode": "connected",
  "repositories": {
    "rtmaster": {
      "url": "https://github.com/rtmaster",
      "description": "simple examples",
      "license": "Apache 2.0",
      "items": [
        {
          "category": "arrows",
          "name": "arrow-up",
          "path": "rtmaster/arrows/arrow-up.svg",
          "description": "Arrow facing up"
        },
        {
          "category": "arrows",
          "name": "arrow-down",
          "path": "rtmaster/arrows/arrow-down.svg",
          "description": "Arrow facing down"
        },
        {
          "category": "arrows",
          "name": "arrow-right",
          "path": "rtmaster/arrows/arrow-right.svg",
          "description": "Arrow facing right"
        },
        {
          "category": "arrows",
          "name": "arrow-left",
          "path": "rtmaster/arrows/arrow-left.svg",
          "description": "Arrow facing left"
        },
        {
          "category": "arrows",
          "name": "arrow-up-right",
          "path": "rtmaster/arrows/arrow-up-right.svg",
          "description": "Arrow facing up right"
        },
        {
          "category": "arrows",
          "name": "arrow-up-left",
          "path": "rtmaster/arrows/arrow-up-left.svg",
          "description": "Arrow facing up left"
        },
        {
          "category": "arrows",
          "name": "arrow-down-left",
          "path": "rtmaster/arrows/arrow-down-left.svg",
          "description": "Arrow facing down left"
        },
        {
          "category": "arrows",
          "name": "arrow-down-right",
          "path": "rtmaster/arrows/arrow-down-right.svg",
          "description": "Arrow facing down right"
        },
        {
          "category": "arrows",
          "name": "arrow-left-right",
          "path": "rtmaster/arrows/arrow-left-right.svg",
          "description": "Arrow facing left right"
        },
        {
          "category": "arrows",
          "name": "arrow-up-down",
          "path": "rtmaster/arrows/arrow-up-down.svg",
          "description": "Arrow facing up down"
        },
        {
          "category": "arrows",
          "name": "arrow-up-down-left-right",
          "path": "rtmaster/arrows/arrow-up-down-left-right.svg",
          "description": "Arrow facing up down left right"
        },
        {
          "category": "facilities",
          "name": "factory",
          "path": "rtmaster/facilities/factory.svg",
          "description": "Factory"
        },
        {
          "category": "facilities",
          "name": "jackup",
          "path": "rtmaster/facilities/jackup.svg",
          "description": "Jackup"
        },
        {
          "category": "facilities",
          "name": "plant",
          "path": "rtmaster/facilities/plant.svg",
          "description": "Plant"
        },
        {
          "category": "facilities",
          "name": "semisub",
          "path": "rtmaster/facilities/semisub.svg",
          "description": "Semisub"
        },
        {
          "category": "facilities",
          "name": "ship",
          "path": "rtmaster/facilities/ship.svg",
          "description": "Ship"
        },
        {
          "category": "facilities",
          "name": "truck",
          "path": "rtmaster/facilities/truck.svg",
          "description": "Truck"
        },
        {
          "category": "indicators",
          "name": "light-bulb",
          "path": "rtmaster/indicators/light-bulb.svg",
          "description": "Light Bulb"
        },
        {
          "category": "indicators",
          "name": "light-green",
          "path": "rtmaster/indicators/light-green.svg",
          "description": "Green Light Indicator"
        },
        {
          "category": "indicators",
          "name": "light-orange",
          "path": "rtmaster/indicators/light-orange.svg",
          "description": "Orange Light Indicator"
        },
        {
          "category": "indicators",
          "name": "light-red",
          "path": "rtmaster/indicators/light-red.svg",
          "description": "Red Light Indicator"
        },
        {
          "category": "industrial",
          "name": "compressor",
          "path": "rtmaster/industrial/compressor.svg",
          "description": "Compressor"
        },
        {
          "category": "industrial",
          "name": "derrick",
          "path": "rtmaster/industrial/derrick.svg",
          "description": "Derrick"
        },
        {
          "category": "industrial",
          "name": "heatexchanger",
          "path": "rtmaster/industrial/heatexchanger.svg",
          "description": "Heat Exchanger"
        },
        {
          "category": "industrial",
          "name": "motor",
          "path": "rtmaster/industrial/motor.svg",
          "description": "Motor"
        },
        {
          "category": "industrial",
          "name": "pump",
          "path": "rtmaster/industrial/pump.svg",
          "description": "Pump"
        },
        {
          "category": "industrial",
          "name": "tank-horizontal",
          "path": "rtmaster/industrial/tank-horizontal.svg",
          "description": "Horizontal Tank"
        },
        {
          "category": "industrial",
          "name": "tank-vertical",
          "path": "rtmaster/industrial/tank-vertical.svg",
          "description": "Vertical Tank"
        },
        {
          "category": "industrial",
          "name": "turbine",
          "path": "rtmaster/industrial/turbine.svg",
          "description": "Turbine"
        },
        {
          "category": "industrial",
          "name": "vessel-horizontal",
          "path": "rtmaster/industrial/vessel-horizontal.svg",
          "description": "Horizontal Vessel"
        },
        {
          "category": "industrial",
          "name": "vessel-vertical",
          "path": "rtmaster/industrial/vessel-vertical.svg",
          "description": "Vertical Vessel"
        },
        {
          "category": "letters",
          "name": "A",
          "path": "rtmaster/letters/letter-a.svg",
          "description": "A"
        },
        {
          "category": "letters",
          "name": "B",
          "path": "rtmaster/letters/letter-b.svg",
          "description": "B"
        },
        {
          "category": "letters",
          "name": "C",
          "path": "rtmaster/letters/letter-c.svg",
          "description": "C"
        },
        {
          "category": "letters",
          "name": "D",
          "path": "rtmaster/letters/letter-d.svg",
          "description": "D"
        },
        {
          "category": "letters",
          "name": "E",
          "path": "rtmaster/letters/letter-e.svg",
          "description": "E"
        },
        {
          "category": "letters",
          "name": "F",
          "path": "rtmaster/letters/letter-f.svg",
          "description": "F"
        },
        {
          "category": "letters",
          "name": "G",
          "path": "rtmaster/letters/letter-g.svg",
          "description": "G"
        },
        {
          "category": "letters",
          "name": "H",
          "path": "rtmaster/letters/letter-h.svg",
          "description": "H"
        },
        {
          "category": "letters",
          "name": "I",
          "path": "rtmaster/letters/letter-i.svg",
          "description": "I"
        },
        {
          "category": "letters",
          "name": "J",
          "path": "rtmaster/letters/letter-j.svg",
          "description": "J"
        },
        {
          "category": "letters",
          "name": "K",
          "path": "rtmaster/letters/letter-k.svg",
          "description": "K"
        },
        {
          "category": "letters",
          "name": "L",
          "path": "rtmaster/letters/letter-l.svg",
          "description": "L"
        },
        {
          "category": "letters",
          "name": "M",
          "path": "rtmaster/letters/letter-m.svg",
          "description": "M"
        },
        {
          "category": "letters",
          "name": "N",
          "path": "rtmaster/letters/letter-n.svg",
          "description": "N"
        },
        {
          "category": "letters",
          "name": "O",
          "path": "rtmaster/letters/letter-o.svg",
          "description": "O"
        },
        {
          "category": "letters",
          "name": "P",
          "path": "rtmaster/letters/letter-p.svg",
          "description": "P"
        },
        {
          "category": "letters",
          "name": "Q",
          "path": "rtmaster/letters/letter-q.svg",
          "description": "Q"
        },
        {
          "category": "letters",
          "name": "R",
          "path": "rtmaster/letters-letter-r.svg",
          "description": "R"
        },
        {
          "category": "letters",
          "name": "S",
          "path": "rtmaster/letters/letter-s.svg",
          "description": "S"
        },
        {
          "category": "letters",
          "name": "T",
          "path": "rtmaster/letters/letter-t.svg",
          "description": "T"
        },
        {
          "category": "letters",
          "name": "U",
          "path": "rtmaster/letters/letter-u.svg",
          "description": "U"
        },
        {
          "category": "letters",
          "name": "V",
          "path": "rtmaster/letters/letter-v.svg",
          "description": "V"
        },
        {
          "category": "letters",
          "name": "W",
          "path": "rtmaster/letters/letter-w.svg",
          "description": "W"
        },
        {
          "category": "letters",
          "name": "X",
          "path": "rtmaster/letters/letter-x.svg",
          "description": "X"
        },
        {
          "category": "letters",
          "name": "Y",
          "path": "rtmaster/letters/letter-y.svg",
          "description": "Y"
        },
        {
          "category": "letters",
          "name": "Z",
          "path": "rtmaster/letters/letter-z.svg",
          "description": "Z"
        },
        {
          "category": "meters",
          "name": "flask",
          "path": "rtmaster/meters/flask.svg",
          "description": "Laboratory Flask"
        },
        {
          "category": "meters",
          "name": "flowmeter",
          "path": "rtmaster/meters/flowmeter.svg",
          "description": "Flowmeter"
        },
        {
          "category": "meters",
          "name": "gauge",
          "path": "rtmaster/meters/gauge.svg",
          "description": "Gauge"
        },
        {
          "category": "numbers",
          "name": "0",
          "path": "rtmaster/numbers/number-0.svg",
          "description": "0"
        },
        {
          "category": "numbers",
          "name": "1",
          "path": "rtmaster/numbers/number-1.svg",
          "description": "1"
        },
        {
          "category": "numbers",
          "name": "2",
          "path": "rtmaster/numbers/number-2.svg",
          "description": "2"
        },
        {
          "category": "numbers",
          "name": "3",
          "path": "rtmaster/numbers/number-3.svg",
          "description": "3"
        },
        {
          "category": "numbers",
          "name": "4",
          "path": "rtmaster/numbers/number-4.svg",
          "description": "4"
        },
        {
          "category": "numbers",
          "name": "5",
          "path": "rtmaster/numbers/number-5.svg",
          "description": "5"
        },
        {
          "category": "numbers",
          "name": "6",
          "path": "rtmaster/numbers/number-6.svg",
          "description": "6"
        },
        {
          "category": "numbers",
          "name": "7",
          "path": "rtmaster/numbers/number-7.svg",
          "description": "7"
        },
        {
          "category": "numbers",
          "name": "8",
          "path": "rtmaster/numbers/number-8.svg",
          "description": "8"
        },
        {
          "category": "numbers",
          "name": "9",
          "path": "rtmaster/numbers/number-9.svg",
          "description": "9"
        },
        {
          "category": "pipes",
          "name": "pipe-curve-down",
          "path": "rtmaster/pipes/pipe-curve-down.svg",
          "description": "Pipe curve down"
        },
        {
          "category": "pipes",
          "name": "pipe-curve-down-left",
          "path": "rtmaster/pipes/pipe-curve-down-left.svg",
          "description": "Pipe curve down left"
        },
        {
          "category": "pipes",
          "name": "pipe-curve-down-right",
          "path": "rtmaster/pipes/pipe-curve-down-right.svg",
          "description": "Pipe curve down right"
        },
        {
          "category": "pipes",
          "name": "pipe-curve-left",
          "path": "rtmaster/pipes/pipe-curve-left.svg",
          "description": "Pipe curve left"
        },
        {
          "category": "pipes",
          "name": "pipe-curve-right",
          "path": "rtmaster/pipes/pipe-curve-right.svg",
          "description": "Pipe curve right"
        },
        {
          "category": "pipes",
          "name": "pipe-curve-up",
          "path": "rtmaster/pipes/pipe-curve-up.svg",
          "description": "Pipe curve up"
        },
        {
          "category": "pipes",
          "name": "pipe-curve-up-left",
          "path": "rtmaster/pipes/pipe-curve-up-left.svg",
          "description": "Pipe curve up left"
        },
        {
          "category": "pipes",
          "name": "pipe-curve-up-right",
          "path": "rtmaster/pipes/pipe-curve-up-right.svg",
          "description": "Pipe curve up right"
        },
        {
          "category": "pipes",
          "name": "pipe-diagonal-left",
          "path": "rtmaster/pipes/pipe-diagonal-left.svg",
          "description": "Pipe diagonal left"
        },
        {
          "category": "pipes",
          "name": "pipe-diagonal-right",
          "path": "rtmaster/pipes/pipe-diagonal-right.svg",
          "description": "Pipe diagonal right"
        },
        {
          "category": "pipes",
          "name": "pipe-flange-horizontal",
          "path": "rtmaster/pipes/pipe-flange-horizontal.svg",
          "description": "Pipe flange horizontal"
        },
        {
          "category": "pipes",
          "name": "pipe-flange-intersection",
          "path": "rtmaster/pipes/pipe-flange-intersection.svg",
          "description": "Pipe flange intersection"
        },
        {
          "category": "pipes",
          "name": "pipe-flange-vertical",
          "path": "rtmaster/pipes/pipe-flange-vertical.svg",
          "description": "Pipe flange vertical"
        },
        {
          "category": "pipes",
          "name": "pipe-horizontal",
          "path": "rtmaster/pipes/pipe-horizontal.svg",
          "description": "Pipe horizontal"
        },
        {
          "category": "pipes",
          "name": "pipe-tee-down",
          "path": "rtmaster/pipes/pipe-tee-down.svg",
          "description": "Pipe tee down"
        },
        {
          "category": "pipes",
          "name": "pipe-tee-left",
          "path": "rtmaster/pipes/pipe-tee-left.svg",
          "description": "Pipe tee left"
        },
        {
          "category": "pipes",
          "name": "pipe-tee-right",
          "path": "rtmaster/pipes/pipe-tee-right.svg",
          "description": "Pipe tee right"
        },
        {
          "category": "pipes",
          "name": "pipe-tee-up",
          "path": "rtmaster/pipes/pipe-tee-up",
          "description": "Pipe tee up"
        },
        {
          "category": "pipes",
          "name": "pipe-vertical",
          "path": "rtmaster/pipes/pipe-vertical.svg",
          "description": "Pipe vertical"
        },
        {
          "category": "shapes",
          "name": "circle",
          "path": "rtmaster/shapes/circle.svg",
          "description": "Circle"
        },
        {
          "category": "shapes",
          "name": "gear",
          "path": "rtmaster/shapes/gear.svg",
          "description": "Gear"
        },
        {
          "category": "shapes",
          "name": "line-horizontal",
          "path": "rtmaster/shapes/line-horizontal.svg",
          "description": "Line horizontal"
        },
        {
          "category": "shapes",
          "name": "line-horizontal-arrow-left",
          "path": "rtmaster/shapes/line-horizontal-arrow-left.svg",
          "description": "Line horizontal arrow left"
        },
        {
          "category": "shapes",
          "name": "line-horizontal-arrow-right",
          "path": "rtmaster/shapes/line-horizontal-arrow-right.svg",
          "description": "Line horizontal arrow right"
        },
        {
          "category": "shapes",
          "name": "line-vertical",
          "path": "rtmaster/shapes/line-vertical.svg",
          "description": "Line vertical"
        },
        {
          "category": "shapes",
          "name": "line-vertical-arrow-down",
          "path": "rtmaster/shapes/line-vertical-arrow-down.svg",
          "description": "Line vertical arrow down"
        },
        {
          "category": "shapes",
          "name": "line-vertical-arrow-up",
          "path": "rtmaster/shapes/line-vertical-arrow-up.svg",
          "description": "Line vertical arrow up"
        },
        {
          "category": "shapes",
          "name": "square",
          "path": "rtmaster/shapes/square.svg",
          "description": "Square"
        },
        {
          "category": "shapes",
          "name": "triangle-down",
          "path": "rtmaster/shapes/triangle-down.svg",
          "description": "Triangle down"
        },
        {
          "category": "shapes",
          "name": "triangle-left",
          "path": "rtmaster/shapes/triangle-left.svg",
          "description": "Triangle left"
        },
        {
          "category": "shapes",
          "name": "triangle-right",
          "path": "rtmaster/shapes/triangle-right.svg",
          "description": "Triangle right"
        },
        {
          "category": "shapes",
          "name": "triangle-up",
          "path": "rtmaster/shapes/triangle-up.svg",
          "description": "Triangle-up"
        },
        {
          "category": "valves",
          "name": "valve-horizontal",
          "path": "rtmaster/valves/valve-horizontal.svg",
          "description": "Valve Horizontal"
        },
        {
          "category": "valves",
          "name": "valve-left-right",
          "path": "rtmaster/valves/valve-left-right.svg",
          "description": "Valve left right"
        },
        {
          "category": "valves",
          "name": "valve-round-down",
          "path": "rtmaster/valves/valve-round-down.svg",
          "description": "Valve round down"
        },
        {
          "category": "valves",
          "name": "valve-round-left",
          "path": "rtmaster/valves/valve-round-left.svg",
          "description": "Valve round left"
        },
        {
          "category": "valves",
          "name": "valve-round-right",
          "path": "rtmaster/valves/valve-round-right.svg",
          "description": "Valve round right"
        },
        {
          "category": "valves",
          "name": "valve-round-up",
          "path": "rtmaster/valves/valve-round-up.svg",
          "description": "Valve round up"
        },
        {
          "category": "valves",
          "name": "valve-square-down",
          "path": "rtmaster/valves/valve-square-down.svg",
          "description": "Valve square down"
        },
        {
          "category": "valves",
          "name": "valve-square-left",
          "path": "rtmaster/valves/valve-square-left.svg",
          "description": "Valve square left"
        },
        {
          "category": "valves",
          "name": "valve-square-right",
          "path": "rtmaster/valves/valve-square-right.svg",
          "description": "Valve square right"
        },
        {
          "category": "valves",
          "name": "valve-square-up",
          "path": "rtmaster/valves/valve-square-up.svg",
          "description": "Valve square up"
        },
        {
          "category": "valves",
          "name": "valve-vertical",
          "path": "rtmaster/valves/valve-vertical",
          "description": "Valve vertical"
        }
      ]
    }
  },
  "svgBuilderData": {
    "elements": [],
    "height": "100%",
    "viewport": {
      "height": 1000,
      "width": 1000,
      "x": 0,
      "y": 0
    },
    "width": "100%"
  },
  "targets": [
    {
      "alias": "",
      "groupBy": [
        {
          "params": [
            "$__interval"
          ],
          "type": "time"
        },
        {
          "params": [
            "null"
          ],
          "type": "fill"
        }
      ],
      "measurement": "default_test1_sensors",
      "orderByTime": "ASC",
      "policy": "default",
      "refId": "A",
      "resultFormat": "time_series",
      "select": [
        [
          {
            "params": [
              "*"
            ],
            "type": "field"
          },
          {
            "params": [],
            "type": "mean"
          }
        ]
      ],
      "tags": []
    }
  ],
  "title": "IR-Sensor SVG-Pixmap",
  "transparent": true,
  "type": "marcuscalidus-svg-panel",
  "useSVGBuilder": false
}

See JavaScript code in some post below. max post size sucks.

4 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

left panel: JavaScript code

function hslToRgb(h, s, l){
    var r, g, b;
    if(s === 0){
        r = g = b = l; // achromatic

    }else{
        var hue2rgb = function hue2rgb(p, q, t){
            if(t < 0) t += 1;
            if(t > 1) t -= 1;
            if(t < 1/6) return p + (q - p) * 6 * t;
            if(t < 1/2) return q;
            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }

    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

function rangePercentage (input, range_min, range_max, range_2ndMax){
    var percentage = ((input - range_min) * 100) / (range_max - range_min);
    
    if (percentage > 100) {
        if (typeof range_2ndMax !== 'undefined'){
            percentage = ((range_2ndMax - input) * 100) / (range_2ndMax - range_max);
            if (percentage < 0) {
                percentage = 0;
            }

        } else {
            percentage = 100;
        }
    } else if (percentage < 0){
        percentage = 0;
    }

    var percent = (percentage / 100)
    return percent;
}

function percentageToHsl(percentage, hue0, hue1) {
    var hue = (percentage * (hue1 - hue0)) + hue0;
    return 'hsl(' + hue + ', 100%, 50%)';
}

function celsiusToColor(celsius){
    var celsiusColor = percentageToHsl( rangePercentage( celsius, -20, 40), 0.55, 0);
    return celsiusColor;
}


var S = Snap(svgnode);

var rect_ir_1_1 = S.select("#temp-ir-1-1");
var rect_ir_1_2 = S.select("#temp-ir-1-2");
var rect_ir_1_3 = S.select("#temp-ir-1-3");
var rect_ir_1_4 = S.select("#temp-ir-1-4");
var rect_ir_1_5 = S.select("#temp-ir-1-5");
var rect_ir_1_6 = S.select("#temp-ir-1-6");
var rect_ir_1_7 = S.select("#temp-ir-1-7");
var rect_ir_1_8 = S.select("#temp-ir-1-8");

rect_ir_1_1.attr({"fill": celsiusToColor( ctrl.series[0].stats.avg ) });
rect_ir_1_2.attr({"fill": celsiusToColor( ctrl.series[1].stats.avg ) });
rect_ir_1_3.attr({"fill": celsiusToColor( ctrl.series[2].stats.avg ) });
rect_ir_1_4.attr({"fill": celsiusToColor( ctrl.series[3].stats.avg ) });
rect_ir_1_5.attr({"fill": celsiusToColor( ctrl.series[4].stats.avg ) });
rect_ir_1_6.attr({"fill": celsiusToColor( ctrl.series[5].stats.avg ) });
rect_ir_1_7.attr({"fill": celsiusToColor( ctrl.series[6].stats.avg ) });
rect_ir_1_8.attr({"fill": celsiusToColor( ctrl.series[7].stats.avg ) });


var rect_ir_2_1 = S.select("#temp-ir-2-1");
var rect_ir_2_2 = S.select("#temp-ir-2-2");
var rect_ir_2_3 = S.select("#temp-ir-2-3");
var rect_ir_2_4 = S.select("#temp-ir-2-4");
var rect_ir_2_5 = S.select("#temp-ir-2-5");
var rect_ir_2_6 = S.select("#temp-ir-2-6");
var rect_ir_2_7 = S.select("#temp-ir-2-7");
var rect_ir_2_8 = S.select("#temp-ir-2-8");

rect_ir_2_1.attr({"fill": celsiusToColor( ctrl.series[8].stats.avg ) });
rect_ir_2_2.attr({"fill": celsiusToColor( ctrl.series[9].stats.avg ) });
rect_ir_2_3.attr({"fill": celsiusToColor( ctrl.series[10].stats.avg ) });
rect_ir_2_4.attr({"fill": celsiusToColor( ctrl.series[11].stats.avg ) });
rect_ir_2_5.attr({"fill": celsiusToColor( ctrl.series[12].stats.avg ) });
rect_ir_2_6.attr({"fill": celsiusToColor( ctrl.series[13].stats.avg ) });
rect_ir_2_7.attr({"fill": celsiusToColor( ctrl.series[14].stats.avg ) });
rect_ir_2_8.attr({"fill": celsiusToColor( ctrl.series[15].stats.avg ) });


var rect_ir_3_1 = S.select("#temp-ir-3-1");
var rect_ir_3_2 = S.select("#temp-ir-3-2");
var rect_ir_3_3 = S.select("#temp-ir-3-3");
var rect_ir_3_4 = S.select("#temp-ir-3-4");
var rect_ir_3_5 = S.select("#temp-ir-3-5");
var rect_ir_3_6 = S.select("#temp-ir-3-6");
var rect_ir_3_7 = S.select("#temp-ir-3-7");
var rect_ir_3_8 = S.select("#temp-ir-3-8");

rect_ir_3_1.attr({"fill": celsiusToColor( ctrl.series[16].stats.avg ) });
rect_ir_3_2.attr({"fill": celsiusToColor( ctrl.series[17].stats.avg ) });
rect_ir_3_3.attr({"fill": celsiusToColor( ctrl.series[18].stats.avg ) });
rect_ir_3_4.attr({"fill": celsiusToColor( ctrl.series[19].stats.avg ) });
rect_ir_3_5.attr({"fill": celsiusToColor( ctrl.series[20].stats.avg ) });
rect_ir_3_6.attr({"fill": celsiusToColor( ctrl.series[21].stats.avg ) });
rect_ir_3_7.attr({"fill": celsiusToColor( ctrl.series[22].stats.avg ) });
rect_ir_3_8.attr({"fill": celsiusToColor( ctrl.series[23].stats.avg ) });


var rect_ir_4_1 = S.select("#temp-ir-4-1");
var rect_ir_4_2 = S.select("#temp-ir-4-2");
var rect_ir_4_3 = S.select("#temp-ir-4-3");
var rect_ir_4_4 = S.select("#temp-ir-4-4");
var rect_ir_4_5 = S.select("#temp-ir-4-5");
var rect_ir_4_6 = S.select("#temp-ir-4-6");
var rect_ir_4_7 = S.select("#temp-ir-4-7");
var rect_ir_4_8 = S.select("#temp-ir-4-8");

rect_ir_4_1.attr({"fill": celsiusToColor( ctrl.series[24].stats.avg ) });
rect_ir_4_2.attr({"fill": celsiusToColor( ctrl.series[25].stats.avg ) });
rect_ir_4_3.attr({"fill": celsiusToColor( ctrl.series[26].stats.avg ) });
rect_ir_4_4.attr({"fill": celsiusToColor( ctrl.series[27].stats.avg ) });
rect_ir_4_5.attr({"fill": celsiusToColor( ctrl.series[28].stats.avg ) });
rect_ir_4_6.attr({"fill": celsiusToColor( ctrl.series[29].stats.avg ) });
rect_ir_4_7.attr({"fill": celsiusToColor( ctrl.series[30].stats.avg ) });
rect_ir_4_8.attr({"fill": celsiusToColor( ctrl.series[31].stats.avg ) });


var rect_ir_5_1 = S.select("#temp-ir-5-1");
var rect_ir_5_2 = S.select("#temp-ir-5-2");
var rect_ir_5_3 = S.select("#temp-ir-5-3");
var rect_ir_5_4 = S.select("#temp-ir-5-4");
var rect_ir_5_5 = S.select("#temp-ir-5-5");
var rect_ir_5_6 = S.select("#temp-ir-5-6");
var rect_ir_5_7 = S.select("#temp-ir-5-7");
var rect_ir_5_8 = S.select("#temp-ir-5-8");

rect_ir_5_1.attr({"fill": celsiusToColor( ctrl.series[32].stats.avg ) });
rect_ir_5_2.attr({"fill": celsiusToColor( ctrl.series[33].stats.avg ) });
rect_ir_5_3.attr({"fill": celsiusToColor( ctrl.series[34].stats.avg ) });
rect_ir_5_4.attr({"fill": celsiusToColor( ctrl.series[35].stats.avg ) });
rect_ir_5_5.attr({"fill": celsiusToColor( ctrl.series[36].stats.avg ) });
rect_ir_5_6.attr({"fill": celsiusToColor( ctrl.series[37].stats.avg ) });
rect_ir_5_7.attr({"fill": celsiusToColor( ctrl.series[38].stats.avg ) });
rect_ir_5_8.attr({"fill": celsiusToColor( ctrl.series[39].stats.avg ) });


var rect_ir_6_1 = S.select("#temp-ir-6-1");
var rect_ir_6_2 = S.select("#temp-ir-6-2");
var rect_ir_6_3 = S.select("#temp-ir-6-3");
var rect_ir_6_4 = S.select("#temp-ir-6-4");
var rect_ir_6_5 = S.select("#temp-ir-6-5");
var rect_ir_6_6 = S.select("#temp-ir-6-6");
var rect_ir_6_7 = S.select("#temp-ir-6-7");
var rect_ir_6_8 = S.select("#temp-ir-6-8");

rect_ir_6_1.attr({"fill": celsiusToColor( ctrl.series[40].stats.avg ) });
rect_ir_6_2.attr({"fill": celsiusToColor( ctrl.series[41].stats.avg ) });
rect_ir_6_3.attr({"fill": celsiusToColor( ctrl.series[42].stats.avg ) });
rect_ir_6_4.attr({"fill": celsiusToColor( ctrl.series[43].stats.avg ) });
rect_ir_6_5.attr({"fill": celsiusToColor( ctrl.series[44].stats.avg ) });
rect_ir_6_6.attr({"fill": celsiusToColor( ctrl.series[45].stats.avg ) });
rect_ir_6_7.attr({"fill": celsiusToColor( ctrl.series[46].stats.avg ) });
rect_ir_6_8.attr({"fill": celsiusToColor( ctrl.series[47].stats.avg ) });


var rect_ir_7_1 = S.select("#temp-ir-7-1");
var rect_ir_7_2 = S.select("#temp-ir-7-2");
var rect_ir_7_3 = S.select("#temp-ir-7-3");
var rect_ir_7_4 = S.select("#temp-ir-7-4");
var rect_ir_7_5 = S.select("#temp-ir-7-5");
var rect_ir_7_6 = S.select("#temp-ir-7-6");
var rect_ir_7_7 = S.select("#temp-ir-7-7");
var rect_ir_7_8 = S.select("#temp-ir-7-8");

rect_ir_7_1.attr({"fill": celsiusToColor( ctrl.series[48].stats.avg ) });
rect_ir_7_2.attr({"fill": celsiusToColor( ctrl.series[49].stats.avg ) });
rect_ir_7_3.attr({"fill": celsiusToColor( ctrl.series[50].stats.avg ) });
rect_ir_7_4.attr({"fill": celsiusToColor( ctrl.series[51].stats.avg ) });
rect_ir_7_5.attr({"fill": celsiusToColor( ctrl.series[52].stats.avg ) });
rect_ir_7_6.attr({"fill": celsiusToColor( ctrl.series[53].stats.avg ) });
rect_ir_7_7.attr({"fill": celsiusToColor( ctrl.series[54].stats.avg ) });
rect_ir_7_8.attr({"fill": celsiusToColor( ctrl.series[55].stats.avg ) });


var rect_ir_8_1 = S.select("#temp-ir-8-1");
var rect_ir_8_2 = S.select("#temp-ir-8-2");
var rect_ir_8_3 = S.select("#temp-ir-8-3");
var rect_ir_8_4 = S.select("#temp-ir-8-4");
var rect_ir_8_5 = S.select("#temp-ir-8-5");
var rect_ir_8_6 = S.select("#temp-ir-8-6");
var rect_ir_8_7 = S.select("#temp-ir-8-7");
var rect_ir_8_8 = S.select("#temp-ir-8-8");

rect_ir_8_1.attr({"fill": celsiusToColor( ctrl.series[56].stats.avg ) });
rect_ir_8_2.attr({"fill": celsiusToColor( ctrl.series[57].stats.avg ) });
rect_ir_8_3.attr({"fill": celsiusToColor( ctrl.series[58].stats.avg ) });
rect_ir_8_4.attr({"fill": celsiusToColor( ctrl.series[59].stats.avg ) });
rect_ir_8_5.attr({"fill": celsiusToColor( ctrl.series[60].stats.avg ) });
rect_ir_8_6.attr({"fill": celsiusToColor( ctrl.series[61].stats.avg ) });
rect_ir_8_7.attr({"fill": celsiusToColor( ctrl.series[62].stats.avg ) });
rect_ir_8_8.attr({"fill": celsiusToColor( ctrl.series[63].stats.avg ) });
2 Likes

why does this dashboard in copy throw an “unexpected error: ctrl.series[0] is undefined” as soon as I try to change the quiery to my channel? I can find ctrl.series in the javascript of the svg-panels. an issue about this with the programmer of the panel is not useful (for me).

the morning after:

answer: because the data source is not defined adequately.

workaround: do not copy svg-panels, but rebuild them. set the correct data source first, only then copy&paste of the svg and js codes into the panel.
don’t forget to adjust percentages and data array field numbers if your matrix is a different size (the original is 8x8, mine is 4x5).

3 Likes