AJAX PHP Chart Widget

I have written a PHP widget for making AJAX charts, the motivation was to produce a visual, dynamic charting tool for the web that didn’t require much in the way of system resources.

We have been looking at dynamic charting for a long time (in our work with system monitoring) and solutions either require a plugin such as Java or Flash or could not dynamically update on the fly (pre-rendered charts like SVG). The plugin approaches get you the dynamic charts but at the cost of system resources, if you want several charts on the same page they tend to batter your browser (and maybe even crash it). My AJAX PHP Chart Widget uses Javascript and CSS to make bar charts that will dynamically update from a database back-end using a negligible amount of CU and memory.

Here is a screen shot of 3 charts showing data from a wireless sensor (mote), the bars all update dynamically when the database changes. I could use this widget as part of a mashup to create a GUI for visualising multiple motes, other people could use it for their own lightweight charting needs.

I have been testing the chart using live data from a mote sitting on my desk, monitoring the environment in our lab. When the mote inserts a new record into the database the chart automatically updates. Here is the SQL for the table that is feeding the chart.


CREATE TABLE `raw_mote_data` (
`id` bigint(20) NOT NULL auto_increment,
`base_time` bigint(20) NOT NULL,
`mote_id` int(11) NOT NULL,
`mote_time` bigint(20) NOT NULL,
`hops` int(11) NOT NULL,
`sequence` bigint(20) NOT NULL,
`light` int(11) NOT NULL,
`temp` int(11) NOT NULL,
`volt` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=84999 DEFAULT CHARSET=latin1 AUTO_INCREMENT=84999 ;


Motes are small wireless sensor nodes, here is a scale picture of 2 motes, a UK stamp and an American quarter.

If you want to know more about motes you can read about them on the Reading Environmental Sensor Network (RESN) project pages.