HTML5 and ArcadiaCharts
How does a HTML5 document look like?
Let us start with a plain empty HTML5 document:
<!doctype html> <html> <head> <meta charset=UTF-8" /> <title>empty HTML5 document</title> </head> <body> </body> </html>
Compared to earlier versions, HTML5 has a noticeably simple doctype declaration as you can see it in the first line. Here is an example of an old HTML 4.01 doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
New semantic elements in HTML5
HTML5 means cleaner code since you don´t need to rely on an vast number of <div> tags. Instead, you can use semantic elements which improves readability so you can reduce development costs and focus on designing your HTML5 chart. Instead of...
... <body> <div class="header"> ... </div> <div class="nav"> ... </div> <div class="article"> <div class="section"> ... </div> ... </div> <div class="footer"> ... </div> </body>
you can use:
... <body> <header> ... </header> <nav> ... </nav> <article> <section> ... </section> ... </article> <footer> ... </footer> </body>
New media tags
Instead of using plugins like Flash to display videos or play audio, you can use elements like <video>, <audio> and <canvas> tags to embed media natively into your web site. By the way, ArcadiaCharts also uses canvas to display your HTML5 chart.
Advantages of using HTML5
- Less need of plugins - Just like ArcadiaCharts, using HTML5 makes you far less dependent on plugins like Flash, Silverlight or Flex to include animations, streaming video or interactive content into your website.
- Cleaner, better code - It´s by far easier to work with meaningful elements than with dozens of opening and closing <div> tags. The improved semantic value reduces development costs helps search engines to crawl your site, which leads to a better SEO.
- Improved HTML5 forms - HTML5 allows you to use fancier, more elegant forms and makes validation native to HTML.
- Better Accessibility - A better structure improves accessibility. It helps people with disabilities which rely on screen readers to understand your web site and follow your content.
Including the ArcadiaCharts library into your HTML5 page
As soon as this has completed the event-handler “onChartLibLoaded” will be called. The following example shows, how to put the code which creates the HTML5 chart directly into a routine which is assigned to the event handler:
The creation of the HTML5 chart is done by the ChartBuilder.