Data Visualization via HTML5 and SVG

Wijmo has bar charts, bubble charts, composite chartsline chartspie charts, scatter charts, linear gauges and radial gauges 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.

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

True Client-side Charting

Our charts and gauges 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 and gauges are powered by SVG they are actually part of the DOM. Which means every aspect of our widgets 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 and gauges 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 and gauges in Firebug. That is one of the major benefits of using SVG instead of Canvas.

Hardware Accelerated Graphics

Our data visualization widgets are all about performance and SVG makes high-performance data visualization possible. SVG is now being hardware accelerated in every modern browser. Our charts and gauges are written in JavaScript and utilize 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 and gauges will just get faster as new versions come out.

Interactive Animations and Tooltips

SVG also allows us to make our charts and gauges 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 widgets 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.

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 and gauges 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 and gauges make it easy to bring your streaming data to life.

Write Once, Run Anywhere (Without Plugins)

Our charts and gauges 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 and gauges render beautifully on iPhones, iPads, and many more devices.