Charting with HTML5

One of the new and exciting features of HTML5 is the ability to build chart without any plugin or server side programming. This can be done using the canvas element and some javascript coding. The Canvas is the HTML5 element and allows to draw graphics, 2D shapes on the web page using javascript. Google Chrome supports now HTML5, some other browsers may have problems with supporting HTML5 as of the time of this writing.

Here is the code example of canvas. The example is just drawing one line from (10,10) to (80,80). The output is shown under the code box.
<br /><br /> <canvas id=”myCanvas” width=”200″ height=”100″ style=”border: 1px solid #c3c3c3;”><br /><br /> </canvas><br /><br /> <script type=”text/javascript”><br /> var c=document.getElementById(“myCanvas”);<br /> var ctx=c.getContext(“2d”);<br /> ctx.moveTo(10,10);<br /> ctx.lineTo(80,80);<br /> ctx.stroke();<br /> </script></p> <p>

The good resource on HTML5 canvas tag is w3schools.com

Here is one more link if you want learn more on canvas element in HTML5. http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/ How to Draw with HTML 5 Canvas   By Jamie Newman

There are many different ways to do charting due to different javascript libraries:

RGraph: HTML5 Javascript charts library RGraph is a HTML5 Javascript charts library. Using the new HTML5 canvas tag, RGraph creates Javascript charts in the web browser.  RGraph supports over twenty different types of Javascript charts, including fuel gauges,  thermometer charts, waterfall charts. It is very cool looking charts, but there is one time fee for commercial usage.