# How to create a climograph?

**URL:** <https://discourse.nodered.org/t/how-to-create-a-climograph/93094>\
**Category:** Dashboard\
**Created:** [12 November 2024 11:48 UTC](https://discourse.nodered.org/t/how-to-create-a-climograph/93094 "2024-11-12T11:48:27Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![duaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/duaw/32/20970_2.png) [@duaw](https://discourse.nodered.org/u/duaw)\
**Post date:** [12 November 2024 11:48 UTC](https://discourse.nodered.org/t/how-to-create-a-climograph/93094/1 "2024-11-12T11:48:27Z")

</div>

Dear all!

"Climographs display data for two variables …" ([Climograph - Wikipedia](https://en.wikipedia.org/wiki/Climograph)) 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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [12 November 2024 14:26 UTC](https://discourse.nodered.org/t/how-to-create-a-climograph/93094/2 "2024-11-12T14:26:16Z")

</div>

> [@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](https://www.chartjs.org/docs/latest/samples/bar/floating.html)**
>
> Open source HTML5 Charts for your website

> **[Multi Axis Line Chart | Chart.js](https://www.chartjs.org/docs/latest/samples/line/multi-axis.html)**
>
> Open source HTML5 Charts for your website

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/e/fe606db12475c6cd85c4a368e4b96fc14607cee3.png)

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [12 November 2024 15:53 UTC](https://discourse.nodered.org/t/how-to-create-a-climograph/93094/3 "2024-11-12T15:53:45Z")

</div>

I think there are online climatographs?

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

```auto
<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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/5/9594f9e1b6f12300919703fa5887a70088d02f47.png)  
Lots of white space there, I presume one could get rid of that.

---

<div class="post-metadata">

**Author:** ![duaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/duaw/32/20970_2.png) [@duaw](https://discourse.nodered.org/u/duaw)\
**Post date:** [13 November 2024 15:30 UTC](https://discourse.nodered.org/t/how-to-create-a-climograph/93094/4 "2024-11-13T15:30:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [13 November 2024 15:33 UTC](https://discourse.nodered.org/t/how-to-create-a-climograph/93094/5 "2024-11-13T15:33:43Z")

</div>

> [@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](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html)

We cannot list everything the nodes "cannot do".

---

<div class="post-metadata">

**Author:** ![duaw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/duaw/32/20970_2.png) [@duaw](https://discourse.nodered.org/u/duaw)\
**Post date:** [13 November 2024 15:36 UTC](https://discourse.nodered.org/t/how-to-create-a-climograph/93094/6 "2024-11-13T15:36:01Z")

</div>

> [@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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [13 November 2024 17:24 UTC](https://discourse.nodered.org/t/how-to-create-a-climograph/93094/7 "2024-11-13T17:24:44Z")

</div>

> [@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.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/8/e8b99aac879f946b4d41f144bde99c41f7349e05.jpeg)  
`ui_template and chart.js`

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [13 November 2024 20:44 UTC](https://discourse.nodered.org/t/how-to-create-a-climograph/93094/8 "2024-11-13T20:44:14Z")

</div>

> [@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](https://github.com/FlowFuse/node-red-dashboard/issues/752). I suggest that you add your interest in the feature there.

---

<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:** [13 December 2024 20:44 UTC](https://discourse.nodered.org/t/how-to-create-a-climograph/93094/9 "2024-12-13T20:44:16Z")

</div>

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