Hello everyone.
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):
My favourites
- canvas-gauges
- uPlot
- Chart.js
amCharts 
Apache ECharts
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.
Positives: Free.
ApexCharts
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.
Positives: Free.
Billboard
Website Docs GitHub
Lots of example charts. D3-based, 21 chart types
canvas-gauges
canvas-gauges
Pure HTML, have to define colours yourself.
CanvasJS​:heavy_dollar_sign:
[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.
Chart.js
Website Docs GitHub
Good for simple requirements. Has simple data structure.
- 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)
Chartist.js
Although the animation effects are unique, working with this library may be tricky for beginners. Small: 60kb
C3.js
C3.js | D3-based reusable chart library (c3js.org)
D3-based reusable chart library
D3.js
Website Docs GitHub
Data visualisation rather than pure charting
dygraphs
Dygraphs — main page
Timeseries plotter for very large datasets.
Echarts
Echarts on GitHub
Echarts examples
Good with big datasets
Flotr2
HumbleSoftware/Flotr2: Graphs and Charts for Canvas in JavaScript. (github.com) humble software development - flotr2
Types: lines, bars, candles, pies, bubbles
Frappe
Website Docs GitHub
Simple, SVG based.
FusionCharts
[website](JavaScript charts for web & mobile | FusionCharts)
G2
Website Docs GitHub
"Visualization Grammar". Part of AntV
Chinese documentation.
Google Charts
Lots of options but overly complex.
Google Charts website
Google Charts gallery
HighCharts
Dated?
JSXGraph
website
Dynamic math plots
jqPlot
jqPlot Charts and Graphs for jQuery
Mature library with good docs. Includes usual types plus gauges.
Lightweight Charts
Website Docs GitHub
Specifically designed for finance. Streaming & large dataset support.
Perspective
Website Docs GitHub
Finance, eCommerce, data grids, segmentation. Used in lots of COVID, and Olympics charts. Also available for Python. Uses custom web elements.
Plotly
RGraph
RGraph: Beautiful JavaScript charts for websites
is a JavaScript library that makes fast, functional and pretty web-based charts
Rickshaw
Rickshaw: A JavaScript toolkit for creating interactive time-series graphs (shutterstock.com)
Toast UI Chart
Website Docs GitHub
Bars, columns, lines, areas, bubbles, treemaps, radars, radial bars, and others.
uPlot (AKA ÎĽPlot)
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.
Vega - Vega Lite
A Visualization Grammar | Vega
Vis.js (Community Edition)
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.
ZoomCharts
References
3 Likes
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.
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
