Key Mapping in Dashboard 2.0
An example of how to use key-mapping with Dashboard 2.0's ui-chart node. It provides the option to parse data such as:
[
{
"time": "2023-11-14T19:00Z",
"screenTemperature": 10.03,
"maxScreenAirTemp": 10.4,
"minScreenAirTemp": 9.99,
"screenDewPointTemperature": 7.56,
"feelsLikeTemperature": 8.09,
"windSpeed10m": 3.86,
"windDirectionFrom10m": 263,
"windGustSpeed10m": 7.72,
"max10mWindGust": 10.13,
"visibility": 16258,
"screenRelativeHumidity": 84.48,
"mslp": 100360,
"uvIndex": 0,
"significantWeatherCode": 0,
"precipitationRate": 0,
"totalPrecipAmount": 0,
"totalSnowAmount": 0,
"probOfPrecipitation": 0
}, ...
]
Without the need for data manipulation before rendering, as we can use the built-in "key" properties for the x/y axes.
For example in the first chart we render, we set:
Which will render each point of the array using (time, feelsLikeTemperature) as coordinates.
[{"id":"fce77c1a380e8201","type":"inject","z":"e80e76260ef9846b","name":"Sample Met Office Data","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"time\":\"2023-11-14T19:00Z\",\"screenTemperature\":10.03,\"maxScreenAirTemp\":10.4,\"minScreenAirTemp\":9.99,\"screenDewPointTemperature\":7.56,\"feelsLikeTemperature\":8.09,\"windSpeed10m\":3.86,\"windDirectionFrom10m\":263,\"windGustSpeed10m\":7.72,\"max10mWindGust\":10.13,\"visibility\":16258,\"screenRelativeHumidity\":84.48,\"mslp\":100360,\"uvIndex\":0,\"significantWeatherCode\":0,\"precipitationRate\":0,\"totalPrecipAmount\":0,\"totalSnowAmount\":0,\"probOfPrecipitation\":0},{\"time\":\"2023-11-15T19:00Z\",\"screenTemperature\":12.13,\"maxScreenAirTemp\":13.2,\"minScreenAirTemp\":9.9,\"screenDewPointTemperature\":7.56,\"feelsLikeTemperature\":10.1,\"windSpeed10m\":4.53,\"windDirectionFrom10m\":254,\"windGustSpeed10m\":8.4,\"max10mWindGust\":11.1,\"visibility\":16365,\"screenRelativeHumidity\":75.36,\"mslp\":100372,\"uvIndex\":0.1,\"significantWeatherCode\":0,\"precipitationRate\":0,\"totalPrecipAmount\":0,\"totalSnowAmount\":0,\"probOfPrecipitation\":0}]","payloadType":"json","x":160,"y":60,"wires":[["c6624545f4820893","eb1eb4ae3f46518e"]]},{"id":"c6624545f4820893","type":"ui-chart","z":"e80e76260ef9846b","group":"e23512b61ee4b0a2","name":"","label":"Feel Like Temperature","order":9007199254740991,"chartType":"line","category":"feels-like","categoryType":"str","xAxisProperty":"time","xAxisPropertyType":"msg","xAxisType":"time","yAxisProperty":"feelsLikeTemperature","ymin":"","ymax":"","showLegend":false,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"width":6,"height":8,"className":"","x":480,"y":60,"wires":[[]]},{"id":"eb1eb4ae3f46518e","type":"ui-chart","z":"e80e76260ef9846b","group":"e23512b61ee4b0a2","name":"","label":"Multiple Lines Example","order":9007199254740991,"chartType":"line","category":"[\"screenTemperature\", \"feelsLikeTemperature\"]","categoryType":"json","xAxisProperty":"time","xAxisPropertyType":"msg","xAxisType":"time","yAxisProperty":"","ymin":"","ymax":"","showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"width":6,"height":8,"className":"","x":490,"y":100,"wires":[[]]},{"id":"8864477d6b15168d","type":"inject","z":"e80e76260ef9846b","name":"Clear","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":210,"y":100,"wires":[["c6624545f4820893","eb1eb4ae3f46518e"]]},{"id":"e23512b61ee4b0a2","type":"ui-group","name":"Chart Examples","page":"22b5519aa675ad88","width":"6","height":"1","order":-1,"showTitle":true,"className":""},{"id":"22b5519aa675ad88","type":"ui-page","name":"Discourse Forums","ui":"c2e1aa56f50f03bd","path":"/discourse","layout":"grid","theme":"129e99574def90a3","order":-1,"className":""},{"id":"c2e1aa56f50f03bd","type":"ui-base","name":"UI Name","path":"/dashboard"},{"id":"129e99574def90a3","type":"ui-theme","name":"Another Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"}}]
