How to easily create charts using jQuery and HTML5

For years, Flash was the only solution to display a dynamic chart on a website. But thanks to modern techniques, the dying Flash isn't needed anymore. In this tutorial, I'll show you how easy it is to transform a basic HTML table into a profesionnal looking chart using visualize.js, a very useful jQuery plugin.

Step 1: Preparing files

Here we go! The first thing to do is obviously to create a directory on your Mac (or PC, nobody’s perfect 😉 ). You should name it chart for example. Once done, download the required Javascript and CSS files and save it on your hard drive.

Now, create a new html document, named charts.html. Copy the html structure below, and paste it into your newly created charts.html file.

<!DOCTYPE html>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />




Did you notice that I used the <!DOCTYPE html> doctype? It is the right doctype to use, as the javscript code we’ll add later will turn a html table into a HTML 5 canvas.

Step 2: Adding data

Now that we downloaded the javascript files and created an html document, it’s time to add data. Copy the code below and paste it within the <body> and </body> tags of your charts.html file.

	<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>

Of course, feel free to add your own data to make the example more interesting for you.

Step 3: Let the magic happen

Alright, now we have a bunch of downloaded files and an html document. 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" type="text/css" rel="stylesheet" />
<link href="visualize.css" type="text/css" rel="stylesheet" />
<link href="visualize-light.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="visualize.js"></script>

It’s time to give life to our chart. Paste the final piece of code after the script calls:

<script type="text/javascript">

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.

Additional explanations

Generating bar charts is definitely great, but what if your preference goes to a pie chart? No problem, visualize.js allows 4 different type of charts: Bar, area, pie and line.

Changing the default type is pretty easy: Just add the type parameter as shown below:

$('table').visualize({type: 'pie'});

Cool, isn’t it? Visualize.js accepts even more parameters to make sure your chart will look exactly how you want. Here are the parameters which can be used:

  • type: string. Accepts ‘bar’, ‘area’, ‘pie’, ‘line’. Default: ‘bar’.
  • width: number. Width of chart. Defaults to table width
  • height: number. Height of chart. Defaults to table height
  • appendTitle: boolean. Add title to chart. Default: true.
  • title: string. Title for chart. Defaults to text of table’s Caption element.
  • appendKey: boolean. Adds the color key to the chart. Default: true.
  • colors: array. Array items are hex values, used in order of appearance. Default: [‘#be1e2d’,’#666699′,’#92d5ea’,’#ee8310′,’#8d10ee’,’#5a3b16′,’#26a4ed’,’#f45a90′,’#e9e744′]
  • textColors: array. Array items are hex values. Each item corresponds with colors array. null/undefined items will fall back to CSS text color. Default: [].
  • parseDirection: string. Direction to parse the table data. Accepts ‘x’ and ‘y’. Default: ‘x’.
  • pieMargin: number. Space around outer circle of Pie chart. Default: 20.
  • pieLabelPos: string. Position of text labels in Pie chart. Accepts ‘inside’ and ‘outside’. Default: ‘inside’.
  • lineWeight: number. Stroke weight for lines in line and area charts. Default: 4.
  • barGroupMargin: number. Space around each group of bars in a bar chart. Default: 10.
  • barMargin: number. Creates space around bars in bar chart (added to both sides of each bar). Default: 1

That’s all for today. Have fun with the charts 🙂

  • Great article but you have some error in your markup.



  • Mark Acosta

    What about a demo? 😀

    • Adam

      Agreed, not one for trying new technologies without a proper demo.

  • Good stuff! I wouldn’t close a title tag with /table though… 😉

  • What about Google Charts?

    Pretty cool also, fast and easy to build.

    Would you prefer this one using 3 CSS and 2 JavaScript Files?

  • I’d really love a way to use the Google Analytics API to dynamically import data for charts like this.

    Great tutorial!

  • Jae

    Thank you for this great tutorial!
    By the way, it should be Charts!, not Charts!. 🙂

    • What’s difference ?!!

  • HTML file is very easy to use, I got some reviews on the new tags and I think I can write code with about 50% less typing. It is extremely easy especially for embedding videos and great a proper styles and proper text formating.

  • Excellent tips, usually I am using another javascript library MooTools ,but I see that it is very similar and can create very good effect. Thanks for this great article.

  • Thanks for visualize.js. Very usefull lib for me

  • Ya,Good post.I am following your blog regularly and got great information..Very interesting.
    Thanks for your great post also thanks for that your giving us great information about facebook’s ads.thanks for share this info….
    Keep posting.

  • Ah mate thanks a lot. I’ve been looking for a lot of jQuery tutorials regarding charts and i stumbled upon this. Just wanted to thank you for the help 🙂

  • Great tips, I never thought that it can be that easy, I read few books but explanations were for geeks, not for somebody that try to learn.

  • Jim Browning

    Do you have a degraded mark up for websites not in HTML5?

  • Mika

    How can you reference a table with an id so you can generate multiple charts on one page please?

  • This is really good guide for jQuery and HTML5 forms, one of the companies that I am doing SEO have automate exactly the same process. This can really make amazing presentations.

  • NetSolutions

    I used only 2 values for pie chart, and it was wrong, values 100 and 25, pie sum values, so on output it was 80% and 20%, when correct would be 75% and 25%. So, for correct result, I wrote little code.

    if(i == 0){
    var dataSum = memberTotals[0] – memberTotals[1];
    var fraction = (this <= 0 || isNaN(this))? 0 : dataSum / this;
    var dataSum = memberTotals[0];
    var fraction = (this <= 0 || isNaN(this))? 0 : this / dataSum;

    after line:
    //draw the pie pieces
    $.each(memberTotals, function(i){

    hope it will helps!

  • Chris

    Hi, great tutorial. Which aspects of HTML 5 are being utilised here?


  • Jason

    Not a single HTML5 tag was used here. There is ZERO HTML5 involved in this “tutorial”. You used some CSS3 and Javascript.

    For the love of all that is holy, stop posting articles if you don’t know what you are doing.

    • Jeromy

      This post is making use of Filament Group’s jQuery plugin (named visualize). Filament touts a technique called “Progressive Enhancement” that layers on CSS/JavaScript/fancy HTML widgets after testing and verifying that the browser can make use of the enhancements. For example: older browsers, or limited mobile browsers, or even good browsers with JavaScript disabled by the user can’t make use of the visualize.js plugin, so why make them download it? It’s really brilliant. I wish I worked for them!
      Anyway, you’re mistaken about this code not making use of HTML5. The visualize.js appends the HTML5 “canvas” element to the DOM, then fills it with the markup necessary to display the target table’s data.

  • Rain

    How do you put the bar values in a bar graph?

  • Kiran

    I need I remove the chart (or hide it) which I created using the visualize method and create a fresh one. Can you please suggest a solution ?

  • Addy

    I want to draw a chart by taking some coulm of table ie.In my example I want to drwa cahrt only by taking column count and time.Is ther e any way to draw this?

    Count Time Name
    2 20 Michael
    3 40 Amit
    5 80 Nathalie
    8 70 Addy

    Thanks in Advance,

  • Satish

    It;s not working please check ur markup again or please specify steps correctly again.

  • Niranjan

    Thank you very much.
    I tried this and its working fine but its not working in ie7 and ie8. Could anyone please let me know why its not working in ie7 and ie8?

    Thanks for your help

  • Sorry, but where is demo?

  • gabriel

    hi may i know which line of the codes for the visualize.jquery.js is in charge for plotting the axis , sorry if i seem to be a noob in this.

    • gabriel

      because the graphs right now is plotting the points from left to right and i would like to plot the points based from the top of the column to downwards