Chart.js example flow

[Colin Law]

In case anyone is interested I have published an example of how to use the Chart.js charting library in node red to show fully configurable charts, with access to the full feature set of the library.  This includes persistency of the chart over browser refresh and also, optionally, over deployment or restart of node-red.

http://flows.nodered.org/flow/c3dc75c47323a2754f5285225bce64b5

Colin

[Larry Roy]

Cool!  Thanks!

I'm taking a look at HighCharts, but the ideas are applicable.

Larry

[Jéan Roux]

Are the plans that chart.js ends up on NodeRed dashboard on npm?

[Colin Law]

On 14 November 2016 at 09:15, Jéan Roux <je...@familyroux.com> wrote:
> Are the plans that chart.js ends up on NodeRed dashboard on npm?

My example flow shows how to do it yourself. I believe the built-in
dashboard chart is being moved over to use chart.js but I don't know
whether that will provide full access to the chart definition in the
way my example does.

Colin

[Nicholas O'Leary]

Hi,

node-red-dashboard will be moving over to chart.js in the next release.

As with other parts of the dashboard it trades off exposing the full api against being quick and easy to use in cases where sensible defaults are the right answer.

If there are particular parts of the api that you think are worth exposing, do let us know.

Nick

--
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+unsubscribe@googlegroups.com.
To post to this group, send an 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/CAL%3D0gLtePbaJyuz-i%2B4b9TCp00JEJ1kO_QDB5doz4xOTvBg%3Dpg%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

[Colin Law]

I suspect the only way of keeping someone who wants a fully
configurable chart happy would be to provide a way of passing the
complete chart.js chart definition to the node.

Colin

On 14 November 2016 at 09:38, Nicholas O'Leary <nick....@gmail.com> wrote:
> Hi,
>
> node-red-dashboard will be moving over to chart.js in the next release.
>
> As with other parts of the dashboard it trades off exposing the full api
> against being quick and easy to use in cases where sensible defaults are the
> right answer.
>
> If there are particular parts of the api that you think are worth exposing,
> do let us know.
>
> Nick
>
> On 14 November 2016 at 09:35, Colin Law <cla...@gmail.com> wrote:
>>
>> On 14 November 2016 at 09:15, Jéan Roux <je...@familyroux.com> wrote:
>> > Are the plans that chart.js ends up on NodeRed dashboard on npm?
>>
>> My example flow shows how to do it yourself. I believe the built-in
>> dashboard chart is being moved over to use chart.js but I don't know
>> whether that will provide full access to the chart definition in the
>> way my example does.
>>
>> Colin
>>
>> --
>> 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 an 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/CAL%3D0gLtePbaJyuz-i%2B4b9TCp00JEJ1kO_QDB5doz4xOTvBg%3Dpg%40mail.gmail.com.
>> For more options, visit https://groups.google.com/d/optout.
>
>

> --
> 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/CAF%3DvhqesGFxcKVpX%2BpD-kQLOs7r9v5ErRPeN%2B0tt3LFaj2%2BseA%40mail.gmail.com.

[Larry Roy]

+1.  

I think that the built-in charts are fantastic for quick charting, and it would be great to see chart.js implemented in a similar fashion.

Having said that, it would be great to be able to override the sensible defaults when we need to.

I think Colin's idea of passing in a replacement chart definition would satisfy the cases where customization is desired.

[Julian Knight]

To be honest, once you've seen an example, doing more complex charts via the template node is actually pretty easy.

[Simone Nicotra]

Hi, I need some support if it is possible, i Have to do an XY plot with data taken by an accelerometer, i have variable x and y for 10 sensors, how can i make the xy plot? I tried using your example but modifying the code it doesn't work.

[Colin Law]

Hi Simone

Possibly you would be best to start with this flow, which uses
basically the same technique but for an xy chart, I think.
https://flows.nodered.org/flow/720044a3c587a310813a9326ed3cb08a

Colin

> --
> 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/83de1f89-8326-42e4-b3a1-fcc884f5b173%40googlegroups.com.