Charts in node-red-dashboard, with contol of x-axis

6,718 views
Skip to first unread message

Charles Palmer

unread,
Feb 12, 2017, 4:42:33 PM2/12/17
to Node-RED
How can I make node-red-dashboard charts with an X-axis of my choice? (e.g. send (x,y) pairs? It seems that the -dashboard charts are restricted to time of the event as the x-axis. Could I use the template and place some other chart inside? Example, please.

Dave C-J

unread,
Feb 12, 2017, 4:50:31 PM2/12/17
to node...@googlegroups.com
yes to both approaches. If you send a single point it is assumed to be time based. You can instead send a complete array of points - this is usually used to preload / reload the graph... but can be used to do and x/y plot instead.

Or you can use a template with other graphs - for example this thread from Colin - https://groups.google.com/forum/#!searchin/node-red/chart.js%7Csort:relevance/node-red/1BKKHdNZBlc/pWdXppknBAAJ

Charles Palmer

unread,
Feb 13, 2017, 7:31:59 AM2/13/17
to Node-RED
As far as I can see, both the node-red-dashboard chart and Colin's code support ONLY time for the X-axis. Is that right? I guess Colin's code provides a more accessible starting point for modification: I have used his "load" action to draw a graph with an array where the x values are Date objects, but failed (so far) where x values are integers. Any suggestions or examples appreciated.

Colin Law

unread,
Feb 13, 2017, 8:25:51 AM2/13/17
to node...@googlegroups.com
There is nothing in my method that forces the x axis to be time. Make
sure you have not left the x axis specification in the chart structure
as time. So you don't want
options: {
scales: {
xAxes: [{
type: 'time',


If you cannot get it going post a simple flow here showing the problem.

Colin

On 13 February 2017 at 12:31, 'Charles Palmer' via Node-RED
> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups
> "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to node-red+u...@googlegroups.com.
> To post to this group, send email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit
> https://groups.google.com/d/msgid/node-red/cf52e080-5c41-4c31-8f6e-2ff411c7b767%40googlegroups.com.
>
> For more options, visit https://groups.google.com/d/optout.

Charles Palmer

unread,
Feb 13, 2017, 9:50:31 AM2/13/17
to Node-RED
Finger trouble. I have managed to get it to work, extending Colin's work with a simple example, available here with some documentation:
https://dl.dropboxusercontent.com/u/472780/Node-red-examples/chart_js_example.txt

Yes, one thing to do is to is to change the xAxes definition to:
             xAxes: [{
                    type: 'linear',
                    position: 'bottom'
                    }
                ],
Then you can send the chart.js template the data object with msg.action = "load".

Thanks Colin. You might consider if your Node-red Library example would be enhanced by adding my example. - Charles

Colin Law

unread,
Feb 13, 2017, 11:03:57 AM2/13/17
to node...@googlegroups.com
Hi Charles

Add your example to the library and then people should find both if
they look for it. If you reference mine on yours I will then ref yours
on mine.

Cheers

Colin

On 13 February 2017 at 14:50, 'Charles Palmer' via Node-RED
> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups
> "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to node-red+u...@googlegroups.com.
> To post to this group, send email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit
> https://groups.google.com/d/msgid/node-red/a02dd407-873a-457a-95ae-eda191396308%40googlegroups.com.

Charles Palmer

unread,
Feb 13, 2017, 12:01:32 PM2/13/17
to Node-RED
An example using integers rather than time on the X-axis, extending Colin's work, is available here:
http://flows.nodered.org/flow/720044a3c587a310813a9326ed3cb08a

Dave C-J

unread,
Feb 13, 2017, 2:22:45 PM2/13/17
to node...@googlegroups.com
+1 - nice work chaps

Colin Law

unread,
Feb 13, 2017, 4:16:41 PM2/13/17
to node...@googlegroups.com
Hi Charles, I have cross referenced yours from mine.

Cheers

Colin

On 13 February 2017 at 17:01, 'Charles Palmer' via Node-RED
> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups
> "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to node-red+u...@googlegroups.com.
> To post to this group, send email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit
> https://groups.google.com/d/msgid/node-red/ac725404-52e4-456b-84ee-8332b9ac4e51%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages