Can I integrate RGraph with Hubitat automation devices? - Official RGraph support forum

Can I integrate RGraph with Hubitat automation devices?

Post a reply
Posted by Mike at 04:17 on 2nd January 2022
Hi Richard (and happy new year 2022...),

I'm a fan of home automation and I use Hubitat as hardware. This is derivated from Samsung Smartthings, including the language (Groovy).
But this unit is lacking some built-in graphics capabilities. One guy developped an alternative (called hubigraph), using Google charts API.
I use for my personnal pleasure your rgraph libraries since years with my plc's and I'm happy with it.
I'm wondering: is it possible to integrate your libraries and groovy language to obtain the ultimate graphic library for IOT ?

Some links:
https://hubitat.com/pages/home-automation-features
https://community.hubitat.com/t/hubigraphs-4-8-the-final-chapter/39184



Posted by Richard at 12:14 on 2nd January 2022
Happy new year to you too!

I've never used these devices and don't even know anything about them or how they work, but if you can integrate Google Charts then there's a chance that you can integrate RGraph I guess.

A basic RGraph chart needs three bits:

1. The <script> tags (these examples use the CDNJS libraries):

<script src="https://cdnjs.cloudflare.com/ajax/libs/RGraph/6.05/RGraph.common.core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/RGraph/6.05/RGraph.bar.js"></script>

2. The canvas (or SVG) tag:

<canvas id="cvs" width="700" height="300"></canvas>

3. The JavaScript that creates the chart:

<script>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,8,6,5,3,2,5],
        options: {
        }
    }).draw();
</script>

If you can edit the resulting HTML page that is generated by these reports then I would imagine that adding these three bits should be quite easy.

The data ( [4,8,6,5,3,2,5] ) needs to be replaced with the data that you want to be displayed on the chart.

You might need to get this with AJAX - there are some AJAX functions in RGraph that you could use (for example RGraph.AJAX.getNumber() ) or you could use jQuery for this I guess. Perhaps like this:

<script>
    RGraph.AJAX.getNumber('URL_TO_GET_THE_DATA_FROM', function (num)
    {
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [num],
            options: {
            }
        }).draw();
    }
</script>

Do you use AJAX to get information from the device to use on your own web page(s)?

Posted by Mike at 01:00 on 3rd January 2022
thank you for your reply.

About Ajax, I don't know (I'm a user, not a developper). Will ask Hubitat team/forum about this.
But I discovered yesterday about Google sheets (yep, not charts) that can be feeded automatically from/through hubitat. So a way to fill a sheet with data and maybe use your chart to dig into it and automatically display nice graphs.

Will test this at first and will come back with some results.

Is it useful to you if I send you a link to a populated form (in fact a regular linked google sheet) with data ?

Posted by Richard at 10:38 on 3rd January 2022
If Hubitat can fill a Google Sheet with data then RGraph should be able to read it - there are three different Google Sheets readers in RGraph: one for canvas, one for SVG (those are very similar) and one for PHP.

Feel free to send the link.

Post a reply

What's your name?
What do you want to say?