Posted by ComponentOne on 6/14/2012 1:03 PM | Comments (0)

As we see modern browsers launching new versions, we hear a lot about HTML5. 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.

How does that help Web developers? Well, let’s take a look at how you can benefit from HTML5 today.

Data Visualisation 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 and is a means of creating vector drawings in the browser. Vector drawings can be scaled to any size without losing any quality. That makes SVG perfect for creating data visualisations for the web.

Benefits of SVG:

  • True Client-side Charting: As charts are 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 the charts are powered by SVG they are part of the Document Object Model (DOM) which means every aspect of our charts can be inspected, accessed and manipulated in JavaScript.
  • DOM-friendly: ComponentOne have built charts that are part of the DOM as jQuery development is all about the DOM. The SVG elements are drawn in the DOM meaning you can easily access the chart elements in JavaScript. With SVG, you can attach events to elements like “click” and “hover” and manipulate the elements like changing colours and positions.
  • Hardware Accelerated Graphics: Charts written in JavaScript utilise the powerful rendering engines in these browsers instead of drawing static images on the server.
  • Interactive Animations and Tooltips: The Wijmo charts are fully interactive with built-in animations, transitions and tooltips. Adding interaction to your data is very important to user experience. Animation can be turned on with one property. When turned on, the points, lines and slices will animate when they are hovered over.
  • Streaming Visualisations: The SVG graphic can be transformed without refreshing the page creating powerful streaming charts for visualising real-time data. When it comes to working with constantly-changing data, having the ability to stream it smoothly in the browser is very important. The Wijmo charts can be used to display dynamic data. For instance, a line chart 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 it progresses through time.
  • Write Once, Run Anywhere: Wijmo’s charts render in SVG and require no additional plugins. Many other charts have rich features like animation and interaction. Our charts render beautifully on iPhones, iPads and many other devices.

blog comments powered by Disqus