Real-Time Data Aquisition online Graph (Arduino)

Introductions:

Its been  a while that we had posted here the different tutorials ,DIY ,How-tos that discussed  embedded system.But this time we'll be dealing with web programming  and  simple database to log  data  and graph the  corresponding informations  on the web.We also solicited tips and ideas about web programming  especially Java-scripting; and I would like to mention them: Sir Tito,Richard and Sir Val as my buddy of  experts in the said field. 

Besides, we've crawled the net to select which available graphing tools are easy to used and offer a lot of features . As we google all the tips & tricks pertaining to  this topic, it seems that geeks have their  different scheme and designs how they graph data in the internet.Well, it depends  upon us which of which tutorials meet our appetite to do internet of  things-web data logging. By downloading all the resources , I came up with a simple technique on how to classify procedures   graphing/charting  data on-line either simple or complicated.

A very good tips & trick to simplify the said system is to render  the design and task into three procedures of simple open or close control system; and these are the following:

Input ---------------------------------------> Process -------------------------------------> Output

Input/s . These are the source of signals analogue /digital coming from your sensors or transducer .
In our discussion , temperature ,humidity ,light sensor signals.All these inputs are being feed trough an I/O communication port (rs232,i2C ,SPI ) of microcontroler (Arduino) .Our MCU will handles channelling and  protocols before we proceed into the stage of processing. 

Process. A stage where  we contained , modify , grouped and the conversion of  various  formats of data .In this stage ,data type were already identified ,yet web protocols will decode it as as series of string like format of data. 
In our discussion , data will be populated , stored and polled from MySql and update of its database sets only to the first row id.  PHP script will  echo rows of data queried by JavaScript .This row of data  from record set will be parsed inside the html program .Therefore polled data serve as the parameter being process as a substitute to the  coordinates of lines to be plot in the chart.

Outputs. A stage where data is being interpreted  and results to a sensible and definitive informations.It could be further used as reference to the previous stages.In our discussion , we simply plot the data and produce a meaningful graph or chart.

So what are we waiting for? Get the code and start running until we can think another ideas that required us web programming and on-line data logging.Please follow  the tutorials as enumerated below.

Cheers!

Note:
You may use the myC.c to simulate inputs from MySQL so that  we can run the program without MCU at first.



Requirements:

Software:
Linux OS : Fedora/Ubunto
Flot library (http://code.google.com/p/flot/)
PHP5 /JavaScript
APACHE
MYSQL

simpleFlot.zip  https://attachment.fbsbx.com/file_download.php?id=249896215178478&eid=ASulqPMaOsMEgZ1Thyo7RyqP-tVtElXuHqI-CToU6gi3MqouQbuXZARcHfM-gQ4zNIA&ext=1389676849&hash=ASsPAh2tYL_2Cn2o

Hardware:
PC Server: Xitrix i7 (optional)
MCU -Arduino Mega 2560


Objectives:
1) To store  data coming from an Arduino based sensors  using mysql
2) To poll stored data from mysql using PHP and JavaScript
3) To display the chart or graph o real-time data acquisition  online

Methodology:
1) Download or installed all required softwares
root@localhost# yum install httpd* mysqld* php5*

3)Getting  flot files
root@localhost# wget  http://www.flotcharts.org/downloads/flot-0.8.2.zip
root@localhost# unzip flot-0x.x.zip
root@locahost# cd /flot/examples/realtime/

4) Data base using MySQL
...create database
mysql> create database sensorDB;
mysql> use sensorDB;

..create table
mysql> create table sensorData ( A integer not null, B integer not null);

..populate data
mysql> insert into sensorData(sensorid,Light) values(1,45);

..check simple schema
mysql> describe sensorData;

..check stored data
mysql> select *from  sensorData;


5) Simulating data inputs in MySql using C
 Compiling myC.c
root@localhost# gcc -Wall -o myC myC.c  `mysql_config --cflags --libs`
root@localhost# ./myC


Details:

Details(0) Download site for flot software


















Details(1) Web directory and files 
















Details(2) C program for MySQL
















Details(3) PHP script to poll data from MySql



















Details(4) JavaScript using Flot graphics libraries
 













Detail(5) CSS code



















Details(6) Simulating input to mysql-C program







Detail(7) Web real-time chart/graph demo


Remarks:

Conclusions:
A simple start of graphing  data online