HTML5 and ArcadiaCharts

On this page we show you how to create a HTML5 Document and insert a basic JavaScript chart.

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

  1. 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.
  2. 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.
  3. Improved HTML5 forms - HTML5 allows you to use fancier, more elegant forms and makes validation native to HTML.
  4. 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

Before using any ArcadiaCharts library function, you need to insert the include command ‹script type=“text/javascript” src=“arcadiacharts/arcadiacharts.nocache.js”›‹/script›. It can be inserted anywhere inside your page, but please make sure that it is called before any chart functions are used. The arcadiaCharts-library must be loaded completely in order to create your HTML5 chart.

<body>
  <script type="text/javascript" src="arcadiacharts/arcadiacharts.nocache.js">
  </script>
</body>

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:

<body>
  <script type="text/javascript" src="arcadiacharts/arcadiacharts.nocache.js">
  </script>
  <script type="text/javascript">
    document.onChartLibLoaded = function(){
      // As soon as arcadiaCharts has been loaded completely the event handler 
      // 'onChartLibLoaded' will be called.  
      // Put chart-creation JavaScript-Code here ...
    }  
  </script>
</body>

Chart creation with JavaScript

The creation of the HTML5 chart is done by the ChartBuilder.

Complete example:

<body>
<div id="myHTML5chart"></div>
  
<script type="text/javascript" src="arcadiacharts/arcadiacharts.nocache.js">
</script>
<script type="text/javascript">
  
document.onChartLibLoaded = function() {
 
    var myChartData = "Month,Temperature, Precipitation\n"+
                "Jan, 4, 79\n"+
                "Feb, 4, 56\n"+
                "Mar, 7, 70\n"+
                "Apr, 10, 46\n"+
                "May, 13, 59\n"+
                "Jun, 16, 59\n"+
                "Jul, 17, 65\n"+
                "Aug, 17, 75\n"+
                "Sep, 15, 76\n"+
                "Oct, 12, 85\n"+
                "Nov, 7, 89\n"+
                "Dec, 6, 84\n";
  
    // Chart creation with ChartBuilder
    new ac.ACLineChartBuilder()
        .setTitle("Climate at Loch Ness, Scotland")
        .setData(myChartData)
        .build()
        .addToDom('myHTML5chart');
}
</script>
</body>

Further details of the chart creation are identical to our guide "Create a JavaScript chart.

Home | Features | Demos | Buy | Support | Company

© Arcadia Software GmbH | Heinestrasse 21 | 50931 Cologne | Germany