How to easily create charts using jQuery and HTML5
The Web Dev Zone is brought to you in partnership with Mendix. Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.
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
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> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>Charts!</title> </head> <body> </body> </html>
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
<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">CatsWhoCode.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">WpRecipes.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">CatsWhoBlog.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>
Of course, feel free to add your own data to make the example more interesting for you.
Step 3: Let the magic happen
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.
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.
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:
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