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