Latest value for custom dashboard

Help
1

just cannot figure out how to setup the data for a vega bar chart properly.

I used an example for a colored bar chart from vega that shows up correctly:

  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": {{block.width}},  
  "height": {{block.height}},   
  "autosize": { "type": "fit",  "contains": "padding"  },
  "data": {
    "values": [
      { "height": "red", "b": 12 },
      { "height": "green", "b": 28 },
      { "height": "teal", "b": 35 },
      { "height": "brown", "b": 43 }
    ]
  },
  "mark": "bar",
  "encoding": {
    "y": { "field": "height", "type": "nominal"   },
    "x": { "field": "b", "type": "quantitative"    },
    "color": { "field": "height",  "type": "nominal",  "scale": null }
  }
}

I want to add the latest value from four different devices as bar graf.

Some help would be helpful… Man thanks!

2

Good afternoon,

The Custom Chart Block is a bit more difficult as the Query Name cannot be referenced with Handlebars like in other blocks. I am curious, could the Bar Chart Block be beneficial in your use case? I ask as it may save some time and is much simpler to configure. If the Bar Chart is not a good solution, let me know and we will look further into Vega Lite. :smile:

Thanks!
Julia

3

Hy Julia,

the current charting possibilities are a bit limited in Losant, so adding Vega (or any other charting lib) will (hopefully) open a way to overcome this limitations. My question was more about undstanding, how to use vega.

There are some diagram types that are very common like carpet plots or scatter plots

Most of this can be provided by Vega light, but might need some data processing first. NodeRed has the perfect way to do nearly “anything” in a well organized function node.

So, I´m curious to find out what we can do with the custom chart block.

Best regards, Eckehard