Hi everyone, I've been trying to make ui-chart (Dashboard2) show timeseries graph, but no luck: the chart does not update and no data is visible. I read the docs, followed the videos, but still nothing.
Versions:
This is my data:
And this is the chart configuration:
Anything wrong?
Thanks in advance for your help
That is not a particularly ideal format of data. Show us the original data that you get from your db or wherever it comes from. The chart config will probably be much easier using that.
The chart just isn't showing the data, no matter the format. So I don't really get the point in how the original format can influence it...
That is because the chart is not configured properly for your data, and without some research I don't know how to configure it for that strange format.
Alternatively insert a Change node configured to Move msg.payload.data To msg.payload and configure the chart as
Note that since you have the X-axis limit as 1 hour it will not show data older than one hour, but that may be what you want.
If your data comes as an array from the db you may be able to feed it directly into the chart with the appropriate keys.
Ok, thanks. I've done that as well, but it doesn't work either.
And no, as you can see from the second picture, it's a REST API
Does this work?
[{"id":"30389ad6d36d572b","type":"inject","z":"997da33a0beedade","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":4440,"wires":[["167541cb74c785ef"]]},{"id":"167541cb74c785ef","type":"function","z":"997da33a0beedade","name":"Generate data","func":"msg.payload = {data: [\n {\"x\": 1693433100000, \"y\": 0}, {\"x\": 1693433200000, \"y\": 20}\n]}\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":340,"y":4440,"wires":[["dba596e9a15e81b6","241e4c0eb94f1395"]]},{"id":"99530c40c741324e","type":"ui-chart","z":"997da33a0beedade","group":"4f87bd59a15b847e","name":"TEst data","label":"test data chart","order":4,"chartType":"line","category":"","categoryType":"none","xAxisLabel":"","xAxisProperty":"x","xAxisPropertyType":"property","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"y","yAxisPropertyType":"property","ymin":"","ymax":"","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":"0","removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":800,"y":4440,"wires":[[]]},{"id":"241e4c0eb94f1395","type":"change","z":"997da33a0beedade","name":"","rules":[{"t":"move","p":"payload.data","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":570,"y":4440,"wires":[["99530c40c741324e"]]},{"id":"4f87bd59a15b847e","type":"ui-group","name":"test","page":"c6ff182a4185f2f2","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"c6ff182a4185f2f2","type":"ui-page","name":"Test page","ui":"ID-BASE-1","path":"/testpage","icon":"home","layout":"grid","theme":"c4cba76c368d7996","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":9,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"c4cba76c368d7996","type":"ui-theme","name":"Test theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"6e4fe22d08fdafc3","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.2"}}]
Set the x axis limit to 0 (ie no limit) and the data type back to timestamp.
Oh, man, that did the trick. Thank you so much! 
I did say earlier:
Actually yes, but no data was shown with the limit anyways.
Oh, ok. My mistake. The data is test data from 2023, so that's why it was not showing.
Is this plug and play if i have dashboard 2.0 package installed or do i need to do some other setup to see something?
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy
