Better Graphs - HighCharts

So for a couple of years i’ve been playing around with different home automation software, from openhab to pimatic to home assistant. Currently im using pimatic for one simple reason i think the built in graphs are better.

I know that home assistant supports external graphs and other tools that do a great job, but why cant i have an all in one home automation solution :P.

Wondering is anyone thinks home assistant would be better with better built in graphing tools.
Im keen on html5 dev and know of HighChats (https://www.highcharts.com/) and wonder why don’t home automation software use this tool more ?

I think it would be amazing if home assistant would utilize HighCharts. If so id absolutely use it!!!. I know that home assistant is better on most levels than pimatic, but its missing a key component in my opinion. I don’t want to have to set up 2 to 3 different services so that i can just visualize my data.

Tell me your thoughts Comunity :slight_smile:
Tim.

Because that would involve developers trying to reproduce code that has already been developed elsewhere. What is your problem with installing influxdb and grafana and using those?

Highcharts is not free. It’s a licensed product. I use it at work, it can be a pain. I find data visualization to be a far distant second to actually performing actions/automation on the home itself. Like @gpbenton mentioned, you have the db right there. Anyone can hook any graphing product they want into if they so desire.

Far from a deal breaker in my opinion.

My 2 cents…

Hello,

any manual (step-by-step), how to install these two for basic users like me? I’;m using hassbian 1.2 on rpi3 with latest update 0.46.1…
thank you

I’ve had a quick look at licencing and for non profit use I believe it is free ?

There’s no problem with setting up an external system, its just nice to have it built in ?

Fair enough. If you think of a good use case you might get some interest. I for one don’t really need a cool interactive animated chart showing the temperature of my house over the course of time. In fact I can’t really think of anything I really need to see over time when it comes to my automation’s and states. Only thing I have ever used history for is to settle a disagreement with my wife about when I came home on a certain day haha.

1 Like

Try

Personally, I have Grafana set up on my PC rather than the PI, because I don’t want to have my Pi spending processing time producing graphs.

I would back up the integration of highcharts into HA.
I also come from a different automation world: DomotiGa + SmartVISU.
SmartVISU has highcharts integrated and makes graphing anything a breeze.
Although it’s far from critical, I track temperature & humidity, atmospheric pressure, but also power consumption over time.
The latter actually enabled me to better understand which devices use the most power, but also helped me adjust/fine tune some automations which use power consumption as a condition.

1 Like


I made an integration with HighCharts server.

4 Likes

Care to share how you achieved this?
0.55 added graphs, but it is so process hungry that my whole HA is REALLY slow.

Thanks

Well that wasn’t that easy.

I created an PHP script that fetches data from MySQL and then with Highcharts to creates a graph.
I created a cronjob that runs every 5 minutes to create the graph and save them into a folder on the server.

In configuration.yaml add camera like this:

Camera:
  - platform: generic
    name: Solar Generation
    still_image_url: https://www.mydomain.com/chart/chart.png

If you would like to see the code of the PHP files and the cronjob let me know. Then I will post them.

yes I’d love to see that script please

Hi Lolouk44,

I will. But have no time at this moment.
Maybe tomorrow evening.
I also have to tidy up the code a bit to make it more readable.
Conrad

Here are the PHP programs and cronjob I use:
I am not the most experienced PHP programmer. So maybe the code can be smarter.

First fetch the data for the graph in MySQL and transform into the right format JSON file:

?PHP

$file = '/var/www/html/test/5min_usage.json';
$json_data = '';

$data_1 = '';
$data_2 = '';


$con = mysql_connect("localhost","username","password");

if (!$con) {
  die('Could not connect: ' . mysql_error());
};

mysql_select_db("p1", $con);

$result = mysql_query("SELECT DATE_FORMAT(timestamp,'%Y,%m,%d,%H,%i,%s') as tijd, (0 + P1_in_5min + P2_in_5min - P1_out_5min - P2_out_5min) as imex FROM `5minutes` WHERE Date(timestamp) = curdate()");

while($row = mysql_fetch_array($result)) {
  $maand = substr($row['tijd'],5,2) - 1;
  $data_1 = $data_1 . "[Date.UTC(".substr($row['tijd'],0,5).$maand.substr($row['tijd'],7,9)."),".$row['imex']."],";
};

$result = mysql_query("SELECT DATE_FORMAT(timestamp,'%Y,%m,%d,%H,%i,%s') as tijd, pow_usage FROM `5minutes` WHERE Date(timestamp) = curdate()");

while($row = mysql_fetch_array($result)) {
  $maand = substr($row['tijd'],5,2) - 1;
  $data_2 = $data_2 . "[Date.UTC(".substr($row['tijd'],0,5).$maand.substr($row['tijd'],7,9)."),".$row['pow_usage']."],";
};


$json_data = '{
    chart: {
        type: \'area\',
        width: 750,
        zoomType: \'x\'
    },
    title: {
        text: \'Import / Export vs Usage per 5 minutues today (kWh)\'
    },
    subtitle: {
        text: \''.date("d-m-Y H:i").'\'
    },
    credits: {
    	text: \'© Copyright Conrad Hagemans\',
    	href: false,
 	},
 	navigation: {
		buttonOptions: {
  		enabled: false
  		},
 	},
    xAxis: {
        type: \'datetime\'
    },
    series:[{
        name: \'Import/Export (kWh)\',
        color: \'orange\',
        negativeColor: \'green\',
        data: [ '. $data_1 . ' ]
        },{
        name: \'Power Usage (kWh)\',
        color: \'#000099\',
        data: [ '. $data_2 . ' ]
    }]
}';


file_put_contents($file, $json_data);
mysql_close($con);
?>

This script is stored under the name: json_impexp5min.php

Next step is call the highchart export server with the output of the file above as input and generate a picture to store in a folder that can be read by Home Assistant.
I am using a cronjob to this every 5 minutes:

In my crontab file I have the following 2 line:

*/5 * * * * /usr/bin/php /var/www/html/test/json_impexp5min.php
*/10 * * * * /usr/local/bin/highcharts-export-server -infile /var/www/html/test/5min_usage.json -outfile /var/www/html/chart/chart.png >> /var/log/highcharts.log

The result looks like this:

Thanks @conradh,

I’m busy on a different project but will come back here once done.
How much stress does that put on your system? I find that the history_graph from HA slow everything down so I’ve actually disabled them

I can live with the fact that the graphs are near realtime. Updated every 5 or 10 minutes.
So it calls the script to generate the graph-picture not so oft.
And to create the graphs hardly consumes any CPU.

Your php script could be improved with the json_encode function which reads an array and creates a json string.

And how did you manage to show the graph in Home assistant?

Re graphing, why not use something like the excellent seaborn within a python script. You call the script every 5 mins, and have seaborn save a graph as a .png that is then displayed by the camera component on the front end?

https://seaborn.pydata.org/

I have done that already with the grafana sharing image option. And than indead using the camera component for picking up the image. I stopped using it. It wast’n as flexible, can’t zoom the image and not real time. So was Just curious how someone else is doing this.

1 Like