I implemented a heat map in node-red using the template node. Each cell has a value and based on that value i have a color. Now for the next step i would like to have a volumetric view. So my initial thought is to turn it into a 3D bar chart, where the height of each bar correspond to the value attributed to each cell. It doesn't need to be exactly a bar chart but it needs to be a 3D representation of the space.
The values must be passed via msg.payload since it comes from a sensor through serial port.
Does anyone knows how to do such 3D representation?
There are many tools to do that. Not sure whether any of the Dashboard extensions will do it though isn't Plotly one of the extensions, I think it can do 3d bars?
Here is my Obsidian document on charting libraries - there will be something in there that you could use though you may need to add the library using a ui_template node (or via uibuilder if you don't need the handholding of other Dashboard features):
Website Docs GitHub
Lots of provided example charts. Data streaming, dynamic data. Accessible. Mobile-friendly. Many types including gauges, calendars, 3d
Negatives: Have to load lots of library files or the full library.
Website Docs GitHub
Native support for VueJS. SVG based.
Wrappers for Vue, REACT, Angular.
Responsive queries available, interactive
Negatives: Missing information from many examples (too many assumptions), behaves poorly with custom CSS and does not adapt to light/dark browser settings. Data structures too complex - causes reactivity issues that have to be worked around in VueJS. Text is not adaptive to sizing.
Pure HTML, have to define colours yourself.
[website](Beautiful HTML5 Charts & Graphs | 10x Fast | Simple API (canvasjs.com))
30+ chart types that are rendered in HTML divs rather than a canvas. Templates for many frameworks. Interactivity. High performance.
- Area Chart
- Bar Chart
- Bubble Chart
- Doughnut and Pie Charts
- Line Chart
- Mixed Chart Types
- Polar Area Chart
- Radar Chart
4.x Migration Guide | Chart.js (chartjs.org)
Although the animation effects are unique, working with this library may be tricky for beginners. Small: 60kb
D3-based reusable chart library
Dygraphs — main page
Timeseries plotter for very large datasets.
Types: lines, bars, candles, pies, bubbles
Dynamic math plots
jqPlot Charts and Graphs for jQuery
Mature library with good docs. Includes usual types plus gauges.
A small, fast chart for time series, lines, areas, ohlc & bars
leeoniya/uPlot: A small, fast chart for time series, lines, areas, ohlc & bars (github.com)
Very fast, especially for time series. Small library.
A dynamic, browser based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d.
Thank you for your reply!
I tried Plotty but the 3D bar chart didn't work. I then tried a surface graph but i am having a problem passing the values through the msg.payload (implemented in the ). Right now is only working with a static array. I read in some forums that i should try angular but it wasn't very clear how to implement and i never used angular, so i was trying to find an alternative.
I am going to look to all of those links you sent. Thank you.
If you don't need the support of Dashboard (which uses a very old version of AngularJS v1), you could use uibuilder to simplify things. With uibuilder, you could use any or no framework. It is pretty easy to use a simple uibuilder front-end library function to listen for incoming data updates to update the data for the chart. At this point, Dashboards Angular features only get in the way - unless you are needing Dashboard to do a larger UI.
I rarely ever need 3d charts and would normally "cheat" with Excel. But with uibuilder, you can often just take an example straight from the website and tweak with the comms from Node-RED via uibuilder.
Happy to try and help if you decide to go that route.
Damn this lib is crazy fast. Really nice.
Thanks for listing these.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.