Are there any plans for greater control over graphs? Some ideas:
- Change axis to days, months etc
- Ability to plot multiple lines across two axis
- Switch between bar and line
I’m a data nerd and would love a bit more control.
That is a great idea. The band-aid I use is node-red and Google charts.
1 Like
Ah interesting. Have you got a link to any further info?
Sorry for the slow response. Check out https://developers.google.com/chart/. I’ll try to upload my Node-Red flow sometime in the next couple of days.
Here’s the Node-Red flow that I use for graphing my thermostat temperature and humidity history. If you know JavaScript, I suspect it is pretty ugly, but it works. Also there is a bunch of extra code in there because I was starting to add the capability of graphing multiple sensors on one graph. Currently the flow only works for graphing a single sensor.
[{"id":"514883d4.8ebc3c","type":"http response","z":"6bf8fcda.067c04","name":"","statusCode":"","headers":{},"x":651.1666870117188,"y":440,"wires":[]},{"id":"e36eb098.b121b","type":"template","z":"6bf8fcda.067c04","name":"googlechart","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n\n\n<html>\n\n <script type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"></script>\n\n<script>\ngoogle.charts.load('current', {packages: ['corechart', 'line']});\ngoogle.charts.setOnLoadCallback(drawLineColors);\n\nfunction drawLineColors() {\n var data = new google.visualization.arrayToDataTable( [ {{{ metric }}} ] );\n\n\nvar options = {\n legend: {position: 'bottom'},\n\n hAxis: {\n gridlines: {\n count: -1,\n units: {\n days: {format: ['MMM dd']},\n hours: {format: ['HH:mm', 'ha']},\n }\n },\n minorGridlines: {\n units: {\n hours: {format: ['hh:mm:ss a', 'ha']},\n minutes: {format: ['HH:mm a Z', ':mm']}\n }\n }\n }\n }; \n \n \n \n \n\n var chart = new google.visualization.LineChart(document.getElementById('chart_div'));\n chart.draw(data, options);\n }\n\n</script>\n\n\n <div id=\"chart_div\"></div>\n              \n <a href=\"http://192.168.1.16:1880/temperature\">Start Over</a>\n\n </html>\n ","output":"str","x":270,"y":440,"wires":[["514883d4.8ebc3c"]]},{"id":"f359d21d.ca736","type":"function","z":"6bf8fcda.067c04","name":"Chart Prep","func":"\n\nvar newPayload = '[ \"datetime\", \"';\nvar parm = flow.get(\"what\");\n\n\n if ( Array.isArray(parm)) {\n for ( var i=0; i<parm.length; i++) {\n newPayload = newPayload + parm[i] + '\"';\n if ( i+1 < parm.length) {newPayload = newPayload + ', \"'; }\n }\n newPayload = newPayload + \"],\"; \n }\nelse {newPayload = newPayload + parm + '\"],'; }\n\n\nfor ( var i=0; i<msg.payload.length; i++ ) {\nnewPayload = newPayload + '[ new Date(\"' + msg.payload[i].msdate + '\") ,' + msg.payload[i].state + '],' ;\n}\n\n// [0,0,0], [1, 10,5], [2, 23, 15], [3, 17, 9], [4,18,10] \" ;\n \nmsg.metric = newPayload.replace(\"unknown\", \"null\");\nmsg.payload = newPayload.replace(\"unknown\", \"null\");\n\nreturn msg;\n","outputs":1,"noerr":0,"x":710,"y":300,"wires":[["e36eb098.b121b"]]},{"id":"c2e25d45.2d144","type":"postgres","z":"6bf8fcda.067c04","postgresdb":"101a7407.570d1c","name":"hass_db","output":true,"outputs":1,"x":420,"y":200,"wires":[["f359d21d.ca736"]]},{"id":"3f923ffd.407ba","type":"function","z":"6bf8fcda.067c04","name":"Build query pg","func":"var param = msg.payload;\nflow.set(\"what\", param.dbs);\n\n// select strftime('%s', last_changed) as last_changed, state from states where entity_id = \"sensor.downstairs_temperature\" order by last_changed\n\nmsg.topic = \" select last_changed as msDate, state, entity_id from states where ( entity_id = '\";\n\n\nif (Array.isArray( param.dbs)) {\n\n for ( var i=0; i<param.dbs.length; i++ ) {\n msg.topic = msg.topic + param.dbs[i] ; \n if ( i+1 < param.dbs.length) { msg.topic = msg.topic + \"' or entity_id = '\"; }\n }\n}\nelse { msg.topic = msg.topic + param.dbs; }\n\n msg.topic = msg.topic + \"' ) and state != 'unknown' and last_changed between '\" + param.beginingdate + \"' and '\" + param.endingdate + \"' order by msDate \";\n\n\nmsg.payload = [\n { query: msg.topic , \n output: true,\n },\n ]\n\n\nreturn msg;","outputs":1,"noerr":0,"x":200,"y":360,"wires":[["c2e25d45.2d144"]]},{"id":"7c514805.351618","type":"http in","z":"6bf8fcda.067c04","name":"Receive user input","url":"/test","method":"post","upload":false,"swaggerDoc":"","x":130.00000762939453,"y":202.0000171661377,"wires":[["3f923ffd.407ba"]]},{"id":"20479dc8.518d12","type":"http in","z":"6bf8fcda.067c04","name":"","url":"/temperature","method":"get","upload":false,"swaggerDoc":"","x":130,"y":120,"wires":[["61ac87cf.959208"]]},{"id":"61ac87cf.959208","type":"template","z":"6bf8fcda.067c04","name":"getDate","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html> \n <head>\n </head>\n <body>\n <form action=\"/test\" method=\"post\">\n <h1>Enter your information below</h1>\n <label for=\"beginingdate\">Begining date:</label>\n <input type=\"date\" name=\"beginingdate\" />\n <label for=\"endingdate\">Ending date:</label>\n <input type=\"date\" name=\"endingdate\" />\n <select name=\"dbs\" >\n <option value=\"sensor.downstairs_temperature\">Downstairs Temperature</option>\n <option value=\"sensor.bedroom_temperature\">Bedroom Temperature</option>\n <option value=\"sensor.guest_room_temperature\">Guest room Temperature</option>\n <option value=\"sensor.kitchen_temperature\">Kitchen Temperature</option>\n <option value=\"sensor.maras_room_temperature\">Mara's Room Temperature</option>\n <option value=\"sensor.thermostat_temperature\">Dining Room Temperature</option>\n <option value=\"sensor.thermostat_humidity\">Humidity</option>\n \n </select>\n <input type=\"submit\" />\n </form>\n </body>\n</html> ","output":"str","x":320,"y":120,"wires":[["e73bc661.0f9e68"]]},{"id":"e73bc661.0f9e68","type":"http response","z":"6bf8fcda.067c04","name":"","statusCode":"","headers":{},"x":530,"y":120,"wires":[]},{"id":"101a7407.570d1c","type":"postgresdb","z":"","hostname":"localhost","port":"5432","db":"homeassistant","ssl":false}]
1 Like