RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 15 years
old) and has a wealth of features making it an ideal
choice to show charts on your website.
Get the latest version of RGraph (version 6.17) from
the download page. There's also older versions available,
minified files and links to cdnjs.com hosted libraries.
Can I integrate RGraph with Hubitat automation devices?
Posted by Mike at 04:17 on Sunday 2nd January 2022[link]
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 ?
Posted by Richard at 12:14 on Sunday 2nd January 2022[link]
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>
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 Monday 3rd January 2022[link]
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 Monday 3rd January 2022[link]
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.