HTML5 Charting with jQuery and SVG

Recently, we released our first version of Wijmo - our next generation of UI for the Web. Now, it's time to look under the hood at some of the coolest widgets in Wijmo, the SVG Charts! As we see modern browsers launching new versions left (Firefox 4) and right (IE9), we hear a lot about HTML5. HTML5 is a working spec from the W3C that is defining a revolution in how we develop web apps.

Imagination, meet implementation. HTML5 is the cornerstone of the W3C's open web platform; a framework designed to support innovation and foster the full potential the web has to offer. -W3C

Pretty inspiring, but how does that help Web developers? Well, let's take a look at how you can benefit from HTML5 today.

Data Visualization via HTML5 and SVG

Wijmo has bar charts, line charts and pie charts all powered by inline Scalable Vector Graphics (SVG). This technology is not new, but it is new to most browsers. SVG is a powerful means of creating vector drawings in the browser. Vector drawings can be scaled to any size without losing any quality. They also have a very small XML format. That makes SVG perfect for creating data visualizations for the Web. We have done all the hard work to make using SVG effortless. Check out the benefits of charting with SVG.

True Client-side Charting

Our charts are actually drawn on the client and only require the data to be passed from the server. This eliminates the need for large graphics to be downloaded from the server. Since our charts are powered by SVG they are actually part of the DOM. Which means every aspect of our charts can be inspected, accessed and manipulated in JavaScript. They are perfect for building Ajax dashboards that have constantly-changing data. Nothing compares to being able to draw charts within the browser.

DOM-friendly

jQuery development is all about the DOM, so we built charts that not only utilized the DOM, but are completely a part of it. We are drawing SVG elements in the DOM. That means you can easily access the chart elements in JavaScript. With SVG, you can easily attach events to elements like "click" and "hover". You can also easily manipulate the elements like changing colors and positions. Most importantly, you can debug SVG elements in the browser. That's right; you can literally inspect every SVG element of our charts in Firebug. That is one of the major benefits of using SVG instead of Canvas.

Hardware Accelerated Graphics

Our charting is all about performance and SVG makes high-performance charting possible. SVG is now being hardware accelerated in every modern browser. Our charts written in JavaScript are actually utilizing powerful rendering engines in these browsers instead of drawing static images on the server. Browser vendors are putting a lot of work into making SVG even better in their browsers. That means our charts will just get faster as new versions come out.

Interactive Animations and Tooltips

SVG also allows us to make our charts more than static images on the Web. The Wijmo charts are fully interactive with built-in animations, transitions and tooltips. Adding interaction to your data is very important to User Experience (UX). We recognize that and have made doing so effortless. Our charts have animation that can be turned on with one property. When turned on, the points, lines and slices will animate when they are hovered over. The charts will also show smooth transitions when data is first loaded into them. It is important to keep charts informative yet uncluttered. Our charts have built-in tooltips that help you hide labels until they are needed. Tooltips are useful for popping up information when specific parts of the charts are selected. These rich interactions can take data from boring to brilliant. Check out some samples of our interactive charts.

Streaming Visualizations

Since SVG is drawn in the browser, the graphic can be transformed without refreshing the page. This feature creates powerful streaming charts for visualizing real-time data. The Wijmo charts can be used to display dynamic data. For instance, a line charts could be used to display live Stock Market data as it streams from a Web service. The line and points of the chart can even be animated to show data as is progresses through time. When it comes to working with constantly-changing data, having the ability to stream it smoothly in the browser is very important. Wijmo charts make it easy to bring your streaming data to life. Check out this sample of streaming data in our line chart.

Write Once, Run Anywhere (Without Plugins)

Our charts render in SVG and require no additional plugins. Many other charts have rich features like animation and interaction. However, said charts require plugins to be installed on the end user's machine. While Flash and Silverlight make for great charting tools, they have limitations. The obvious limitation is the dependency on a plugin. Another limitations is their lack of support in most modern Smart Phones. End users have come to expect rich experiences on today's mobile devices. When important parts of your application don't render on them, it is a problem. The good news is, most of these mobile devices support SVG! Our charts render beautifully on iPhones, iPads, and many more devices.

Start Charting in SVG with Wijmo

OK, enough of all this talk. Let's see some SVG charts in action! We are going to take a simple HTML table and turn it into a chart with just one line of code. The Wijmo charts are actually jQuery UI widgets. So they work by turning HTML elements into interactive widgets. Using a table is a means of representing data semantically and easily transforming it into a chart. You can also use a simple div element and provide the data to the widget in another form like JSON. To start we need our script and stylesheet references. We are going to use all CDN references in this example:

<link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />  
<link href="http://cdn.wijmo.com/jquery.wijmo-open.1.1.5.css" rel="stylesheet" type="text/css" />  
<link href="http://cdn.wijmo.com/jquery.wijmo-complete.1.1.5.css" rel="stylesheet" type="text/css" />  
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>  
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>  
<script src="http://cdn.wijmo.com/external/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>  
<script src="http://cdn.wijmo.com/external/jquery.glob.min.js" type="text/javascript"></script>  
<script src="http://cdn.wijmo.com/external/jquery.mousewheel.min.js" type="text/javascript"></script>  
<script src="http://cdn.wijmo.com/external/raphael-min.js" type="text/javascript"></script>  
<script src="http://cdn.wijmo.com/jquery.wijmo-open.1.1.5.min.js" type="text/javascript"></script>  
<script src="http://cdn.wijmo.com/jquery.wijmo-complete.1.1.5.min.js" type="text/javascript"></script>

Note: Make sure you always use the most recent version of the CDN here. Now we create a simple HTML table with a bit of data in it. Here is the markup for our table:

This table just represents some sales data for four quarters in a year across four product lines. It should look like this when rendered: While it looks ok, we can make this data more meaningful by charting it. We can do that by adding a little jQuery magic:

$("#tb").wijlinechart();

That's it! You literally only need that one line of jQuery and you have turned this plain onld HTML table into an interactive SVG chart. And here is what our new chart will look like when it renders. Pretty cool huh? Now, that was just a simple implementation. You could add all sorts of options and Ajax calls to build a fully interactive dashboard. In fact, we built a nice little dashboard using the StackOverflow API. It loads all data asynchronously from a Web service and then plots it in a Grid, Bar Chart, Line Chart and Pie Chart. You can play around with the StackOverflow dashboard online. Here is a snapshot of how it looks:

Try it for Yourself!

Now go build something cool with Wijmo charts! We believe that SVG and HTML5 are the future of the Web when comes to data visualization. Give them a try and let us know what you think. Download Wijmo Check out more Wijmo samples