Creating Chart Using jQuery and HTML5

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:

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>
               <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

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:

               <caption>Visits from August 16 to August 21</caption>
                                              <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>
                                              <th scope="row"></th>
                                              <th scope="row"></th>
                                              <th scope="row"></th>

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=""></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:


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.

No Responses

Leave a Reply

Your email address will not be published. Required fields are marked *