Interactive Charts in Node-RED

[Ross Newby]

Hi, 

I'm looking to create a dashboard in node-RED. I'm experimenting with features before i make the decision that its the platform to use. I ca create and manipulate charts but can they be interactive?

For example, if i create a pie chart, can I click on a section to display information?

I'm able to pass the msg through pie charts and into buttons & text displays, so that it is displayed and then select using buttons, but I want a more refined, slick interface. Is it possible?

Thanks, Ross

[Dave C-J]

you can hover over a sector to see the detail, but currently clicking a sector does nothing.

Happy to consider a pull request though.

[Ross Newby]

I'm looking for a way to directly click it, but this doesn't seem possible

[steve rickus]

The best interactive graphs I've used are 3rd party libraries that generate svg and have hooks for implementing your own logic on mouse/keyboard events. In past projects, I've used dygraph, Highcharts, Google, and plotly, as well as rolled my own using just D3js. All of these libraries can be easily integrated into node-red using the ui_template nodes. This provides an Angular wrapper (with $scope so the graph can interact with node-red flows) around whatever graphing library you decide to use.

Of course, if you don't want to incorporate a javascript library and manage the interactions, you can use the ui_chart node (which is based on the chartjs library), or you can install node-red-contrib-graphs, which has a pluggable graph feature (defaults to dygraph library). However, you will be more limited to whatever interactions are already coded into these nodes. For instance, not all of the input options to chartjs are exposed in the ui_chart node wrapper.

Either way, there are lots of examples in this mailing list group (as well as the now mostly quiescent "Node-RED UI" group) and many people that are willing to provide answers and code samples.