RGraph - Creating a bar chart using PHP

Here we go, Creating charts using data from MySql using PHP. The charting plugin we going to use rgraph which is an open source and you can download it from here. The rgraph libraries are written wih javascrit and it has made it easy like we just need to populate the values and we get the graph for the data.

Creating a bar graph:
Before we draw the graph we need to create a database and a table in MySQL. You can follow the steps here. Lets get into the important stuff now,

• After creating the table, create a new folder in htdocs folder give any name without space. 
• Move the libraries folder from the rgraph zip file which you have downloaded from the above link.
• Create a PHP file in the same folder and copy paste the below code.

below is the PHP code for the Bar Chart.


Similarly we can create different charts like line, pie, horizontal, etc. These charts proerties can be changed and we can make it even more better. It will appear in default variant if properties not changed.

Different Rgraphs available are,

Bar charts

Bi-polar charts

CornerGauge charts

Donut charts

Fuel charts

Funnel charts

Gauge charts

Gantt charts

Horizontal bar charts

Horizontal progress bar

LED Grid

Line charts

Meter charts

Odometer charts

Pie charts

Radar charts

Rose charts

Radial scatter charts

Scatter charts

Thermometer charts

Vertical progress bar

Waterfall charts

Javascript importanrt iMacros commands

I used JavaScript to have a controlled run of multiple macros. It's easy to control the order and flow of the data in iMacros using JavaScript, just basics will do. The few commands you need to know are,

  iimDisplay:-  Displays a short message in the iMacros browser.

This display the message like shown in the image within the imacro sidebar of firefox.
Syntax:
iimDisplay("Hello");

  iimSet():- Defines variables for use inside the macro and assigns values to them.
Syntax:
j=112332423;
iimSet("numeber",j); //it assigns the value of "j" to "number"

To use this variable in the macro enter it as {{number}} like,
TAG POS=1 TYPE=INPUT:TEXT FORM=ID:register_form ATTR=ID:cust_number CONTENT={{number}}

iimPlay:- Plays a macro. 
Syntax:
iimPlay("Demo-fill-form.iim");

iMacros - Why it is easy

iMacros is a browser automation tool, which comes for free in both Chrome and Firefox. This comes with record and replay functionality and this is considered as one of the best form filling automation extension. And if you know JavaScript you can do many more functionality combining iMacros with java script.

This is a very easy to use addon for browser. You just record whatever you want to do and replay it again, if you want you can even loop through the macro..

Pros:

• User-friendly, does the work in few clicks.
• Does not require any coding knowledge.
• Few tasks can be accomplished just by using few added lines which you always get from the wiki.
• It supports almost all scripting languages.

Cons:

• Cannot do complex testing using this addon.
• Coding knowledge is required to accomplish bigger tasks to have more easy control

How it is done...
Record:

• Click Record button and start doing the events.
• After recording all the events click stop, it will be saved in the name "#Current.iim" (.iim is the imacro file extension)

Play and Loop:

• Play the macro by clicking on the Play button to replay the macro. 
• For running as the loop, enter the max loop value and click Loop.

For more info http://wiki.imacros.net/
Tutorials click here

Where it all started - Javascript

It all started when I started researching on Greasemonkey plugin, which gives you the flexibility to run JavaScript on any web page. Started trying sample scripts and it was cool. I started online learning javascript in code academy.  Code Academy is a free online compiler where the courses are framed in such a way you learn as you code. It has a very easy interface and they start from the scratch. Rather watching youtube tutorial videos this is far far better way to learn.

External Links:-
Codeacademy.com
http://jsfiddle.net

After few courses I was successfully able to modify a javascript snippet and make it work without any errors for my personal use. A simple HTML table filter. It will hide the row if it matches the value you enter. The code is as below

       

hideRowsWithLargeCellValue("/html/body/table/tbody/tr[", 80, "]/td[", "]");
function hideRowsWithLargeCellValue(xpathPre, maxRows, xpathPost, maxpi) {
for (var J = maxRows; J >= 1; --J) 
for(var i=1;i<=7;i++){
var srchRez = document.evaluate(xpathPre + J + xpathPost + i + maxpi, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
if (srchRez.singleNodeValue && srchRez.singleNodeValue.textContent == "1") {
var rowToHide = srchRez.singleNodeValue.parentNode;
rowToHide.style.display = 'none';
        }
    }
}

       

This was a snippet taken from google and is edited according to my requirement. The jsfiddle link will explain with html example. This script will filter out all the rows that has "1" in any of the cell. To check how it works change "textContent == "1"" to "textContent == "0""  you can observe the difference in the result window.
Jsfiddle link : - http://jsfiddle.net/aravindshadow/YeBL4/7/