JavaScript and HTML5 - Charting Made Easy
One of the valuable things that HTML5 conveys to developers is technology for doing rich visualizations directly in the browser. For years, web developers had to do one of the below mentioned scenarios if they want to present a visually rich element (for example a chart):
a. Conduct a round-trip to the server
The server fetches the needed image data and channels the results back to the browser. Works everywhere, but the results are usually static. Any changes to the image require more trips to the server.
b. Use a browser plug-in
Plug-ins clearly bypass browser limits and can provide rich visual renderings, but they require installation of software and introduce a whole new layer of technology that must be learned and maintained by developers.
c. Browser hacks
CSS and HTML that's manipulated to provide the appearance of something more "image-like." This is a painful and initially wrong method, still being one of the only options for years.
None of these options is always acceptable for the HTML/JavaScript developer. For drawing such a simple thing like basic shape, web developers have been unlucky to do it in the browser.
This was until now.
HTML5 brings two technologies that allow developers to draw in the browser: Canvas and SVG. With these two technologies developers can directly manipulate pixels in the browser, which exposes a whole lot of new possibilities for "pure" HTML and JavaScript applications. These two technologies differ in a way from one another and this is how.
Canvas
The HTML5 canvas element is used to draw graphics, on the fly, via scripting.The canvas element is only a container for graphics. You must use a script to actually draw the graphics.
The pixel-driven nature of canvas makes it applicable for scenarios where speed of rendering is important, such as games. There is no limit to the number of objects being painted to your canvas; if the resolution is the same then it's all about redrawing the same pixel area.
The week point of canvas' pixel-driven nature is that it's more difficult to interact with. If you do have "objects" that you want users to interact with, you have to create and track those objects on your own in JavaScript. API calls have to be programmed to make canvas work.
SVG
Scalable Vector Graphics have actually been around longer than HTML5. Browsers like Firefox, Opera, and Safari have offered varying degrees of support for SVG since 2005. However, since now SVG was not supported for Internet Explorer.
IE9 has finally added SVG support, though, and along with improved support across all other browsers, SVG is finally ready for primetime.
Unlike canvas, SVG is vector-based (not pixel-based) and is created with markup (instead of APIs). SVG elements, when rendered, actually become part of the page DOM, which means they have properties, events, and are much easier to use for illustrations that expect user interaction. SVG is great for things like data visualization or logos.
What about older browsers?
Clearly, adopting canvas and SVG for rich, interactive visualizations in HTML is a no-brainer, but what happens for older browsers, especially IE (which, as we said, lacks any SVG support pre-IE9)? Fortunately, there is a very similar technology to SVG baked-in to IE5 through IE9 called VML (Vector Markup Language)
Originally created for Microsoft Office, VML has a lot of overlap with SVG. When used in conjunction with SVG, VML gives us a way to reach most actively used browsers with some type of in-browser rendering.
Shield UI Charts
Now that you are fully acquainted with the “drawing" technologies of HTML5, let's explore how Shield UI Charts make it easy for you to add rich data visualizations to any HTML site or app.
Shield UI charting uses the following technologies to automatically provide broad browser support: SVG and VML. You need not worry about older versions of IE. Shield UI Charts will execute the proper rendering without requiring any additional code.
Another question springs to mind after all said so far. Why not canvas?
1. SVG is fully interactive. Features like the dynamic tooltips can be added easily
2. SVG/VML is more broadly supported. SVG/VML helps us support a broad range of new and older browsers.
3. SVG is vector based. As far as charts are relatively simple data visualizations, using SVG facilitates charts scaling crisply and accurately to any display size and avoids memory waste, while at the same time rendering more pixels on larger screens.
