How to create a climograph?

[duaw]

Dear all!

"Climographs display data for two variables …" (Climograph - Wikipedia) Basically temperature and som water-related stuff. Two axes: left: temp, right: precipitation, humidity, each w/ min/max and legend) over a period of time.

How do I create such a thing w/ NR ? So far I use two separate graphs.

Preferably w/ a low code approach, w/o css, template, … miracles, magic beyond my capabilities.

Cheers, Uwe

[hotNipi]

@duaw

low code approach

No way. the ui_template needed for custom charts no mater the dashboard 1 or 2.

Basically it is floating bar chart with dual y-axis.

Floating Bars | Chart.js

Multi Axis Line Chart | Chart.js

Made a little example for DB2 but for DB1 the chart config is same just the template stuff differs.

<template>
    <div class="base-container">
        <div class="chart-container"><canvas ref="floatingbarchart" /></div>
    </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    export default {        
        data() {
            return {               
            }
        },
        computed: {
            
        },
        mounted() {
            this.$socket.on('msg-input:' + this.id, this.onInput)
            let interval = setInterval(() => {
                if (window.Chart) {
                    clearInterval(interval);
                    this.draw()
                }
            }, 100);
        },
        methods: {
            draw () {
                const ctx = this.$refs.floatingbarchart
                const chart = new Chart(ctx, {
                    type: 'bar',                    
                    data: {
                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                        datasets: [                            
                            {
                                label: 'Water stuff',
                                data:[[0,4.9],[0,3.9],[0,3.5],[0,3.4],[0,4.2],[0,7.0],[0,6.7],[0,8.1],[0,5.8],[0,7.2],[0,6.1],[0,5.3]], 
                                backgroundColor: "lightblue" ,
                                yAxisID: 'y1'
                            },
                            {
                                label: 'Temperature',
                                data:[[10.1,-35.0],[10.1,-27.8],[18.4,-15.8],[27.6,-6.7],[33.1,-2.5],[32.4,0.5],[35.2,0.2],[35.6,-5.2],[30.2,-17.0],[22.2,-25.9],[14.3,-34.6],[12.5,-34.6]], 
                                backgroundColor: "orange", 
                                yAxisID: 'y'
                            },                           
                        ]
                    },
                    options: {                        
                        maintainAspectRatio: false,
                        animation: false,
                        responsive: true, 
                        plugins: {
                            legend: {
                                position: 'top',
                            },
                            title: {
                                display: true,
                                text: 'Floating bar chart'
                            }
                        },
                        scales: {
                            x: {
                                stacked: false,
                            },
                            y:{
                                type: 'linear',
                                display: true,
                                position: 'right'
                            },
                            y1:{
                                type: 'linear',
                                display: true,
                                position: 'left',                                
                                grid: {
                                    drawOnChartArea: false 
                                }
                            }
                        }
                    },
                });
                this.chart = chart                
            }
        }
    }


    
</script>
<style>
.base-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    container: chat / size;   
}

.chart-container {
    position: relative;
    margin: auto;
    height: 100cqb;   
    width: 100cqi;   
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

[jbudd]

I think there are online climatographs?

You could embed one in a dashboard template using an iframe, eg

<template>
    <div><iframe width="500" height="500" frameborder="0" src="https://climate.mapresso.com/chart.html?lat=45&lon=-1.2"></iframe>
    </div>
</template>

Lots of white space there, I presume one could get rid of that.

[duaw]

Thanks, a lot. That looks great

@hotNipi

@duaw

low code approach

No way. the ui_template needed for custom charts no mater the dashboard 1 or 2.

There is a clear tradeoff between "out of the NR box" ↔︎ "dig deep into Chart.js".

Adding to the NR box makes it clearly more powerful, but also more complex to use and heavier. And it is a huge effort, takes time, thought & manpower.

But I'd love to see some of the DB2 capabilities recently discussed here (with an answer along the lines "ui_template will do if you do this and that !") to be included in the nodes.

The threshold would be lower, acceptance higher for users and beginners expecting it to be easy to wire together flows and UIs, more effort could be spent on the problem to solve instead on the depths and abysses of whatever technology, tools, libraries under the hood they don't want to command.

Cheers, Uwe

[Steve-Mcl]

@duaw

But I'd love to see some of the DB2 capabilities recently discussed here (with an answer along the lines "ui_template will do if you do this and that !") to be included in the nodes.

How would you propose that is presented?

There is already extensive documentation and even live demos with downloadable flows: Template ui-template | Node-RED Dashboard 2.0

We cannot list everything the nodes "cannot do".

[duaw]

@jbudd

I think there are online climatographs?

Yes, but I want to visualize my own data.

The use case of two-axes extends easily to the situations, where you wish to visualize not only data coming of two sources of the same type (with one common axis), but data of two different types (and two different axes like in a climatograph) all in one graph.

Cheers, Uwe

[hotNipi]

@duaw

Adding to the NR box makes it clearly more powerful, but also more complex to use and heavier.

Clearly there's a limit how much is reasonable.

Such thing for example - how far from basics it is ... but still the situation is same.
I would say that it must be learnable and the learner must exercise his will.

ui_template and chart.js

[Colin]

@duaw

The use case of two-axes extends easily to the situations, where you wish to visualize not only data coming of two sources of the same type (with one common axis), but data of two different types (and two different axes like in a climatograph) all in one graph.

There is already an open feature request for left and right y axes. I suggest that you add your interest in the feature there.