Building Custom Charts in Dashboard 2.0

[joepavitt]

Hi All, we had a FlowFuse customer recently ask about options for building custom charting inside a UI Template node for FlowFuse Dashboard (Node-RED Dashboard 2.0).

Today, I have added three examples (with increasing complexity) into the documentation, and thought the forum may appreciate me flagging them.

If you want to build your own, you can take a look at the ChartJS docs here, but this pattern used would equally be as valuable in Apache eCharts, or any other charting library.

Happy building all.

[Steve-Mcl]

And here is one using echarts: How to configure Echarts in Dashboard 2? - #4 by Steve-Mcl

And if you are wondering why I bang on about echarts, checkout these demos: Examples - Apache ECharts

[iiLaw]

@joepavitt thanks for this.

One thing I've struggled with is the vuetify grid/flexbox I wonder if a future example is one on Flexox/grid for Dummies like me who are in the currently in the Google/Try/Catch/Refactor cycle.

For example I only recently found setting the flex-grow: 0 is what I needed to get text/button inputs to horizontally align and density="compact" to shrink text inputs for more compact view.

I'm sure you and the team have plenty of tips that would help us newbies.

Thanks

[joepavitt]

So, generally speaking a great way (and the way I learned) CSS Flexbox is: https://flexboxfroggy.com/

That's not Vuetify specific though, but would at least get you familiar with the underlying concepts like space-between, space-around.

@iiLaw

density="compact" to shrink text inputs for more compact view.

On this topic particularly, we do have plans to introduce a "Compact View" option on a theme which is coming up a lot: Theme: Compact View · Issue #1095 · FlowFuse/node-red-dashboard · GitHub

[iiLaw]

Thanks for this.