Basically, developers use flash for creating charts. But you can easily create charts using JQuery with HTML5. For that you have to go through only 3 steps.
Step # 1: Preparing Files
At first you have to create a directory to save your prepared file. Say, your directory name is chart. You have to download some essential files from here:
http://code.google.com/p/dwpe/downloads/list
After this, create an HTML document. Say, your filename is : chart.html
After this, you have to paste the following lines inside the html file:
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><title>Charts!</title></head><body></body></html>
You might have a question that why we are using this line “<!DOCTYPE html>”? Because, it is the right doctype to use, as the javscript code we’ll add later will turn an html table into a HTML 5 canvas.
Step # 2: Adding Data:
We have already downloaded the javascript files and created an html page. Now, we have to add data into our chart.html file. We should put the following lines inside the <body> and </body> tags:
<table><caption>Visits from August 16 to August 21</caption><thead><tr><td></td><th scope="col">Monday</th><th scope="col">Tuesday</th><th scope="col">Wednesday</th><th scope="col">Thursday</th><th scope="col">Friday</th><th scope="col">Saturday</th><th scope="col">Sunday</th></tr></thead><tbody><tr><th scope="row">webdev3000.com</th><td>12541</td><td>11204</td><td>11354</td><td>10058</td><td>9871</td><td>8254</td><td>5477</td></tr><tr><th scope="row">Google.com</th><td>9855</td><td>8870</td><td>8731</td><td>7488</td><td>8159</td><td>6547</td><td>4512</td></tr><tr><th scope="row">yahoo.com</th><td>3241</td><td>2544</td><td>2597</td><td>3108</td><td>2114</td><td>2045</td><td>950</td></tr></tbody></table>
For sure, you can add your own data to create it in your own way.
Step # 3: The Final Touch:
It’s time to merge them all together and finally generate the chart.
Unzip the downloaded file and open the extracted directory. Copy the following files into your chart directory.
- charting/css/basic.css
- charting/css/visualize.css
- charting/css/visualize-light.css
- charting/js/visualize.js
Once done, we obviously have to link the css and javascript files to our document. Paste the following after the <title> tag of the document:
<link href="basic.css" rel="stylesheet" /><link href="visualize.css" rel="stylesheet" /><link href="visualize-light.css" rel="stylesheet" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script src="visualize.js"></script>It’s time to give life to our chart. Paste the final piece of code after the script calls:
<script>$(function(){$('table').visualize();});</script>
Once you saved the file, your HTML table should be displayed along with a good looking chart. If you don’t want the table to be visible, simply hide it using the “display:none” css property.
