I don't quite understand what you mean by "dynamic" when referencing wattzon.
I also had to modify phpgraphlib.php to handle all the data on the line chart.
I should have been more clear - By dynamic, I mean zoom in and zoom out. I did see your page and how you use the javascript, but I just haven't got that far yet. I was thinking of re-building basically what you did to view the data from pyecm. Maybe it is worthwhile to change pyecm to have the same DB structure so they work with what you have made (if you're willing to share it) - but it does seem that you are using flat files from what I could see.
I also had to change phpgraphlib to make it display more and put less labels on the x axis.
After I went back and looked at the Wattzon charts I thought that might be what you meant.
My PHP looks just about like what's posted above, except that I am using flat files. I have a separate php file for each "timeframe" (minute, hour, day, month) and then just wrap it all with the following java script. I just kind of dabble in javascript/php so I'm not sure how to make the zoom type stuff work, but someone good with javascript should be able to figure it out. Modifying what I have to work with the DB file would be easy and that's probably what I should have done, but the flat files were easy to create and debug.
[codebox]script type="text/javascript" language="JavaScript">
<!--
var byhour_src = 'byhour.php?DAY=0&MONTH=0&YEAR=2009&';
var byday_src = 'byday.php?MONTH=0&YEAR=2009&';
var bymonth_src = 'bymonth.php?YEAR=2009&';
function refreshImages() {
var now = new Date();
document.getElementById("stripchart").src = 'energy.php?' + now.getTime();
document.getElementById("byhour").src = byhour_src + now.getTime();
document.getElementById("byday").src = byday_src + now.getTime();
document.getElementById("bymonth").src = bymonth_src + now.getTime();
setTimeout('refreshImages()', 25000); // Refresh in 25 seconds
}
function ChangeDate() {
var now = new Date();
var mon = 1 + document.getElementById("month_selection").selectedIndex;
var day = document.getElementById("day_selection").value;
byday_src = 'byday.php?MONTH=' + mon + '&YEAR=2009&';
document.getElementById("byday").src = byday_src + now.getTime();
byhour_src = 'byhour.php?DAY=' + day + '&MONTH=' + mon + '&YEAR=2009&';
document.getElementById("byhour").src = byhour_src + now.getTime();
}
<body onLoad="setTimeout('refreshImages()', 25000)">
<p>
<img id="byhour" src="byhour.php?DAY=0&MONTH=0&YEAR=2009" />
</p>
<p>
<img id="byday" src="byday.php?MONTH=0&YEAR=2009" />
</p>
<p>
<img id="bymonth" src="bymonth.php?YEAR=2009" />
</p>[/codebox]
The ChangeDate function just reads the user selections from the lists boxes on the page.
My PHP scripts read the arguments for DAY, MONTH, YEAR and use those to determine which flat file to read. It would be really easy to change so that it defines the SQL query instead. If my system would let me log into it remotely, I'd post one of the php scripts too.
To make the zoom type stuff work, it would be just a matter of somehow building the right arguments for an SQL query from the selection made with the mouse.
The other idea I've had in the back of my head is for the javascript to query for the data itself and somehow build what's needed for the phpgraphlib code to work without having to use multiple files or the flat files. Just haven't had time to experiment with it.
