# 3D Graph Visualization - Volumetric view

**URL:** <https://discourse.nodered.org/t/3d-graph-visualization-volumetric-view/80912>\
**Category:** Dashboard\
**Created:** [30 August 2023 14:03 UTC](https://discourse.nodered.org/t/3d-graph-visualization-volumetric-view/80912 "2023-08-30T14:03:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![spp](https://avatars.discourse-cdn.com/v4/letter/s/bc8723/32.png) [@spp](https://discourse.nodered.org/u/spp)\
**Post date:** [30 August 2023 14:03 UTC](https://discourse.nodered.org/t/3d-graph-visualization-volumetric-view/80912/1 "2023-08-30T14:03:53Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [30 August 2023 14:34 UTC](https://discourse.nodered.org/t/3d-graph-visualization-volumetric-view/80912/2 "2023-08-30T14:34:43Z")

</div>

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](https://canvas-gauges.com/)
- uPlot
- Chart.js

## amCharts 💲💲

## Apache ECharts

[Website](https://echarts.apache.org/en/index.html) [Docs](https://echarts.apache.org/handbook/en/get-started/) [GitHub](https://github.com/apache/echarts)  
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](https://apexcharts.com/) [Docs](https://apexcharts.com/docs/installation/) [GitHub](https://github.com/apexcharts/apexcharts.js)  
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](https://naver.github.io/billboard.js/) [Docs](https://naver.github.io/billboard.js/release/latest/doc/) [GitHub](https://github.com/naver/billboard.js)  
Lots of example charts. D3-based, 21 chart types

## canvas-gauges

[canvas-gauges](https://canvas-gauges.com/)  
Pure HTML, have to define colours yourself.

## CanvasJS​:heavy\_dollar\_sign:💲

[website]([Beautiful HTML5 Charts & Graphs | 10x Fast | Simple API (canvasjs.com)](https://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](https://www.chartjs.org/) [Docs](https://www.chartjs.org/docs/latest/) [GitHub](https://github.com/chartjs/Chart.js)  
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)](https://www.chartjs.org/docs/latest/migration/v4-migration.html)

## 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)](https://c3js.org/)

> D3-based reusable chart library

## D3.js

[Website](https://d3js.org/) [Docs](https://github.com/d3/d3/wiki) [GitHub](https://github.com/d3/d3)  
Data visualisation rather than pure charting

## dygraphs

[Dygraphs — main page](https://dygraphs.com/index.html)  
Timeseries plotter for very large datasets.

## Echarts

[Echarts on GitHub](https://github.com/ecomfe/echarts-examples)  
[Echarts examples](https://web.archive.org/web/20171013110649/https://ecomfe.github.io/echarts-examples/public/)  
Good with big datasets

## Flotr2

[HumbleSoftware/Flotr2: Graphs and Charts for Canvas in JavaScript. (github.com)](https://github.com/HumbleSoftware/Flotr2) [humble software development - flotr2](https://humblesoftware.com/flotr2/documentation)  
Types: lines, bars, candles, pies, bubbles

## Frappe

[Website](https://frappe.io/charts) [Docs](https://frappe.io/charts/docs) [GitHub](https://github.com/frappe/charts)  
Simple, SVG based.

## FusionCharts 💲💲💲

[website]([JavaScript charts for web & mobile | FusionCharts](https://www.fusioncharts.com/))

## G2

[Website](https://g2.antv.vision/en) [Docs](https://g2.antv.vision/en/docs/manual/about-g2) [GitHub](https://github.com/antvis/G2)  
"Visualization Grammar". Part of AntV  
Chinese documentation.

## Google Charts

Lots of options but overly complex.  
[Google Charts website](https://developers.google.com/chart/)  
[Google Charts gallery](https://developers.google.com/chart/interactive/docs/gallery)

## HighCharts 💲💲💲

Dated?

## JSXGraph

[website](https://jsxgraph.uni-bayreuth.de/wp/about/index.html)  
Dynamic math plots

## jqPlot

[jqPlot Charts and Graphs for jQuery](http://www.jqplot.com/)  
Mature library with good docs. Includes usual types plus gauges.

## Lightweight Charts

[Website](https://www.tradingview.com/lightweight-charts/) [Docs](https://tradingview.github.io/lightweight-charts/) [GitHub](https://github.com/tradingview/lightweight-charts)  
Specifically designed for finance. Streaming & large dataset support.

## Perspective

[Website](https://perspective.finos.org/) [Docs](https://perspective.finos.org/docs/js) [GitHub](https://github.com/finos/perspective)  
Finance, eCommerce, data grids, segmentation. Used in lots of COVID, and Olympics charts. Also available for Python. Uses custom web elements.

## Plotly

[Website](https://plotly.com/javascript/) [Docs](https://plotly.com/javascript/getting-started/) [GitHub](https://github.com/plotly/plotly.js)

## RGraph

[RGraph: Beautiful JavaScript charts for websites](https://www.rgraph.net/)

> 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)](https://tech.shutterstock.com/rickshaw/)

## Toast UI Chart

[Website](https://ui.toast.com/tui-chart) [Docs](https://github.com/nhn/tui.chart/blob/main/docs/en/getting-started.md) [GitHub](https://github.com/nhn/tui.chart)  
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)](https://github.com/leeoniya/uPlot)  
Very fast, especially for time series. Small library.

## Vega - Vega Lite

[A Visualization Grammar | Vega](https://vega.github.io/vega/)

## Vis.js (Community Edition)

[vis.js (visjs.org)](https://visjs.org/)

> 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

- [JavaScript Chart Libraries: 13 Popular Choices - Stack Diary](https://stackdiary.com/javascript-chart-libraries/)

---

<div class="post-metadata">

**Author:** ![spp](https://avatars.discourse-cdn.com/v4/letter/s/bc8723/32.png) [@spp](https://discourse.nodered.org/u/spp)\
**Post date:** [30 August 2023 14:42 UTC](https://discourse.nodered.org/t/3d-graph-visualization-volumetric-view/80912/3 "2023-08-30T14:42:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [30 August 2023 14:47 UTC](https://discourse.nodered.org/t/3d-graph-visualization-volumetric-view/80912/4 "2023-08-30T14:47:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [30 August 2023 17:05 UTC](https://discourse.nodered.org/t/3d-graph-visualization-volumetric-view/80912/5 "2023-08-30T17:05:03Z")

</div>

> [@TotallyInformation](#):
>
> ## Perspective
> 
> [Website](https://perspective.finos.org/) [Docs](https://perspective.finos.org/docs/js) [GitHub](https://github.com/finos/perspective)  
> Finance, eCommerce, data grids, segmentation. Used in lots of COVID, and Olympics charts. Also available for Python. Uses custom web elements.

Damn this lib is [crazy fast](https://perspective.finos.org/block/?example=streaming). Really nice.  
Thanks for listing these.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 September 2023 17:05 UTC](https://discourse.nodered.org/t/3d-graph-visualization-volumetric-view/80912/6 "2023-09-29T17:05:05Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.