Hi All, new to this dashboard, liking the design.
Is there a way of integrating graphs?
I currently use “quick chart” with other dashboards, but would like to integrate with hubiVue.
They’re not the pretty and don’t have much functionality but it does help keep a track of temperatures and energy use.
2 Likes
If the above is an img, that can be referenced by a URL, then yes you can display it with hubiVue.
It would totally depend on what exactly the graph/chart is in terms of content.
1 Like
And if instead it’s rendering from HTML output, there’s a good chance it will display correctly in a URL/HTML TIle as well.
Ive tried hundred graghs and quick charts. No success, possible user error. If someone as an easy solution id be interested in seeing it.
I, too, came here to see if anyone has succeeded in displaying a graph, this time from HUBIGRAPH user app, which I successfully installed and configured on Hubitat.
I have all the necessary components: a long-term storage bin, a data set, and a Tile device assigned to Maker API, and linked to a URL/HTML tile in HubiVue. In HV, I set the Tile to “Device” and Attribute = Graph.
But I see nothing. Tile stays empty. Does this match others’ experience?
FWIW, here’s the information about that device spewed out by Maker API:
{"id":"644","name":"Hubigraph Tile Device","label":"FreeMem","type":"Hubigraph Tile Device","room":null,"attributes":[{"name":"Graph","currentValue":"\n <iframe style=\"width: 100%; height: 100%;\" src=\"http://192.168.86.38/apps/api/843/graph/?access_token=31df8243-28fc-401f-b5d3-928c7ba924ac\" data-fs=\"false\" onload=\"(() => {\n const body = this.contentDocument.body;\n const start = () => {\n if(this.dataset.fs == 'false') {\n this.style = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999;';\n this.dataset.fs = 'true';\n } else {\n this.style = 'width: 100%; height: 100%;';\n this.dataset.fs = 'false';\n }\n }\n body.addEventListener('dblclick', start);\n})()\"></iframe>\n \n","dataType":"STRING"},{"name":"Graph_No_Title","currentValue":"\n <iframe style=\"width: 100%; height: 100%;\" src=\"http://192.168.86.38/apps/api/843/graph/?access_token=31df8243-28fc-401f-b5d3-928c7ba924ac\" data-fs=\"false\" onload=\"(() => {\n const body = this.contentDocument.body;\n const start = () => {\n if(this.dataset.fs == 'false') {\n this.style = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999;';\n this.dataset.fs = 'true';\n } else {\n this.style = 'width: 100%; height: 100%;';\n this.dataset.fs = 'false';\n }\n }\n \n body.addEventListener('dblclick', start);\n this.parentElement.parentElement.parentElement.querySelector('.tile-title').style='display: none;';\n})()\"></iframe>\n \n","dataType":"STRING"}],"capabilities":["Actuator"],"commands":["setGraph"]}
Thus I wonder whether it’s the ‘iFrame’ causing HV’s renderer trouble.
Can you give me a link or something to try… I should be able to confirm quickly where the limitation is.
1 Like