How to create a climograph?

Dashboard
1

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

2

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.

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

image
image657×284 13.9 KB

<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>
1 Like
3

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>

image
image953×876 21.8 KB

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

1 Like
4

Thanks, a lot. That looks great

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

5

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".

6

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

7

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.

image
image602×1187 81.1 KB

ui_template and chart.js

1 Like
8

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