Charts and graphs

[bongolf]

Anyone here who has made graphs or charts and presented them on a webpage?

I have temperature sensor connected to a Tellstick Duo, so I have a lot of raw data that needs to be presented in a better way.
The plan is to do some kind of python-script and use the webserver plugin, but what should I use for the charts?
Google chart, Matplotlib or something else...

Ant kind of advice would be much appreciated.

[Livin]

I really cannot help since I've never coded any python graphs/charts, and very little Python code... but since I like to try to help I did some research...

Looks like matplotlib is actively developed. Google Chart looks like it have not been updated in over a year, and just simply doing web searches on it looks like it is no where used as much as matplotlib.
-- thus you might get more community support with matplotlib also.

It would be cool if you made a plugin focused on charting... maybe something that reads a log file for a device/macro/etc and plots the chart/graph based on the options provided by the library and user input.

just a thought.

[bongolf]

I also think it would be cool if I could do such a plugin...

I'm a total python rookie, so I took a quick look at matplotlib and a Google Chart python API, but I couldnt make it work.
So what I ended up was this:.
I created a html-file based on a Google chart example (https://developers.google.com/chart/int ... rt#Example).
Then I made a python-script that found the data.addRows-section of the HTML-file and replaced it with my temperature data.

Not a pretty solution, but it works for my first and simple implementation.

But I would still like some advice on how to do it in a more proper way.

[RichPyke]

I'm looking in to the charts & graphs for my Owl energy meter and my Heatmiser Wifi Stat.

Both log the values to a MySQL db (although the heatmiser one isn't eg based but linux based and runs on a different box).

Highcharts, I believe it is called, looks like it would do it but it does need some clever coding to pick up the MySQL data.

If it's just a gauge for each value you are after, showing only the current value, then it may pay to look at open gauge. You will need to write some php code to pull the values from the MySQL db and feed them in to the gauges but it's not too difficult, simple google searches showed me how to do it.

Once I've played with Highcharts and a few others I'll come back here and let you know what I found was best. If in the mean time you find something please share.

http://bit.ly/RkjvM6 (highcharts in action, my heatmiser chart, this wasn't coded by me so I have no idea how it works, yet)

http://bit.ly/RkjZly (Open Gauge, a few of my values being shown and updated in realtime)

[RichPyke]

While not totally within eventghost the best option I have found is to use MySQL, apache and HighCharts to plot the chart.

It does require a MySQL database, the MySQL python package, web server software (I use apache) and some clever coding but it works and is extremely flexible. Fortunately I already have a MySQL database set up on an always on Ubuntu box for hosting and synchronising my XBMC database and for logging my Heatmiser WiFi stat so it wasn't too much of an issue.

Write your python script to parse any messages and set up the eg.vars.
Write your python script to log each value to the MySQL db when it's received.
Follow the tutorial at http://www.blueflame-software.com/blog/ ... and-mysql/ to set up the chart.

[RichPyke]

Another idea could be to use php to create the image like


Very simple to code that in PHP using MySQL to retreve any stored data.

Code: Select all

<?
//Set up DB
$hostname='';
//mysql user name
$username='';
//mysql user password
$password='';
//connect to the mysql server
$ss = mysql_pconnect($hostname, $username, $password) or die(mysql_error()); 
//select a database on the mysql server
mysql_select_db('');  

//Get jan power consumption
for($day=1; $day<=31; $day++) {
  $query = mysql_query(
    "SELECT SUM(kw*tdsecs) FROM data 
     WHERE year(time) = year(CURDATE()) AND month(time) = month(CURDATE()) AND day(time) = $day");
  $result = mysql_fetch_array($query);
  $kwm[$day] = $result[0] / 60;
  $kwh[$day] = round($kwm[$day] / 60,2);
}


	$values=array(
		"1" => $kwh[1],
		"2" => $kwh[2],
		"3" => $kwh[3],
		"4" => $kwh[4],
		"5" => $kwh[5],
		"6" => $kwh[6],
		"7" => $kwh[7],
		"8" => $kwh[8],
		"9" => $kwh[9],
		"10" => $kwh[10],
		"11" => $kwh[11],
		"12" => $kwh[12],
		"13" => $kwh[13],
		"14" => $kwh[14],
		"15" => $kwh[15],
		"16" => $kwh[16],
		"17" => $kwh[17],
		"18" => $kwh[18],
		"19" => $kwh[19],
		"20" => $kwh[20],
		"21" => $kwh[21],
		"22" => $kwh[22],
		"23" => $kwh[23],
		"24" => $kwh[24],
		"25" => $kwh[25],
		"26" => $kwh[26],
		"27" => $kwh[27],
		"28" => $kwh[28],
		"29" => $kwh[29],
		"30" => $kwh[30],
		"31" => $kwh[31]
	);

 
	$img_width=640;
	$img_height=480; 
	$margins=20;

 
	# ---- Find the size of graph by substracting the size of borders
	$graph_width=$img_width - $margins * 2;
	$graph_height=$img_height - $margins * 2; 
	$img=imagecreate($img_width,$img_height);

 
	$bar_width=20;
	$total_bars=count($values);
	$gap= ($graph_width- $total_bars * $bar_width ) / ($total_bars +1);

 
	# -------  Define Colors ----------------
	$bar_color=imagecolorallocate($img,0,128,64);
	$background_color=imagecolorallocate($img,240,240,255);
	$border_color=imagecolorallocate($img,200,200,200);
	$line_color=imagecolorallocate($img,220,220,220);
 
	# ------ Create the border around the graph ------

	imagefilledrectangle($img,1,1,$img_width-2,$img_height-2,$border_color);
	imagefilledrectangle($img,$margins,$margins,$img_width-1-$margins,$img_height-1-$margins,$background_color);

 
	# ------- Max value is required to adjust the scale	-------
	$max_value=max($values);
	$ratio= $graph_height/$max_value;

 
	# -------- Create scale and draw horizontal lines  --------
	$horizontal_lines=20;
	$horizontal_gap=$graph_height/$horizontal_lines;

	for($i=1;$i<=$horizontal_lines;$i++){
		$y=$img_height - $margins - $horizontal_gap * $i ;
		imageline($img,$margins,$y,$img_width-$margins,$y,$line_color);
		$v=intval($horizontal_gap * $i /$ratio);
		imagestring($img,0,5,$y-5,$v,$bar_color);

	}
 
 
	# ----------- Draw the bars here ------
	for($i=0;$i< $total_bars; $i++){ 
		# ------ Extract key and value pair from the current pointer position
		list($key,$value)=each($values); 
		$x1= $margins + $gap + $i * ($gap+$bar_width) ;
		$x2= $x1 + $bar_width; 
		$y1=$margins +$graph_height- intval($value * $ratio) ;
		$y2=$img_height-$margins;
		imagestring($img,0,$x1+3,$y1-10,$value,$bar_color);
		imagestring($img,0,$x1+3,$img_height-15,$key,$bar_color);		
		imagefilledrectangle($img,$x1,$y1,$x2,$y2,$bar_color);
	}
	header("Content-type:image/png");
	imagepng($img);

?>

My code may even be able to be made simpler too (I'm new at this).

Not as nice looking as HighCharts can look though but for basic bar charts it's simple (just alter my code to suit and it'll work).

[jaytee]

I use JpGraph to plot graphs of my power consumption for presentation on a web page.
http://jpgraph.net/

JpGraph is a library for PHP. The PHP scripts can be executed from web pages or from CLI. In my case I have my data in MSSQL from where I get the data to the graphs that are saved as PNG-files.

/jaytee