HTML5 Migration Guide

Overview
Moving from 5.1.x to 6.x

Overview

AnyChart version 6.0 is the first version with build-in beta HTML5 support. Flash can't be rendered on the most of modern mobile devices, so we had been forced to create a chart engine in Java Script, that produces charts in SVG format.

This article helps you to understand what actions you should do (if any) to achieve your goals with the new version of AnyChart.

NOTE: HTML5 support is still in the beta phase, not all chart types and not all features are available for the moment and we do not guarantee that your charts in SVG version look and work exactly like they do in Flash version. However, we are going to cover all Flash version features by HTML5 engine by the end of the year and you will be able to upgrade your charts without any significant changes in your web sites and applications.

Moving from 5.1.x to 6.x

File Structure

As we have already said, besides Flash engine that resides in SWF file we have also developed JavaScript (HTML5) component that resides in AnyChartHTML5.js:

/AnyChartFolder
- /swf
  - AnyChart.swf
- /js
  - AnyChart.js
  - AnyChartHTML5.js
- anychart.xml
- anychart.html

We recommend you to place this file in js subfolder along with AnyChart.js file.

XML

XML structure is 100% compatible and you should not change anything, but note: HTML5 version, for the moment, doesn't support all chart types Flash version supports, we will cover all functionality in the later releases.

Embedding

Flash Only

If you don't want to use HTML5 charts yet, you can upgrade as usual, just replace swf files and do everything like you did earlier.

Simple code snippet shows this:

By default AnyChart.renderingType is set to anychart.RenderingType.FLASH_ONLY (see Rendering Options to learn what is it), which means that Flash Player is required to view charts and nothing is displayed if Flash Player is not available.

JavaScript (HTML5) Only

To use our new AnyChart JavaScript (HTML5) Component you have to use the following embedding code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AnyChart Sample</title>
<script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script>
<script type="text/javascript" language="javascript" src="./js/AnyChartHTML5.js"></script>
</head>
<body>
    <div id="chartContainer"></div>
    <script type="text/javascript" language="javascript">
    //<![CDATA[
      AnyChart.renderingType = anychart.RenderingType.SVG_ONLY;
      var chart = new AnyChart();
      chart.width = 700;
      chart.height = 300;
      chart.setXMLFile('./anychart.xml');
      chart.write('chartContainer');
    //]]>
    </script>
</body>
</html>

The lines in bold are the lines that are new and should be added to an old-style embedding code.

Note the AnyChart.renderingType set to anychart.RenderingType.SVG_ONLY and see Rendering Options to understand what it means.

Synchronous Combined Use

If you want to enable HTML5 support and use HTML5 charts whenever Flash Player is not available, you can do that in a following way:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AnyChart Sample</title>
<script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script>
<script type="text/javascript" language="javascript" src="./js/AnyChartHTML5.js"></script>
</head>
<body>
    <div id="chartContainer"></div>
    <script type="text/javascript" language="javascript">
    //<![CDATA[
      AnyChart.renderingType = anychart.RenderingType.FLASH_PREFERRED;
      var chart = new AnyChart('./swf/AnyChart.swf');
      chart.width = 700;
      chart.height = 300;
      chart.setXMLFile('./anychart.xml');
      chart.write('chartContainer');
    //]]>
    </script>
</body>
</html>

In this case if Flash Player is not available (the page is shown on iPhone, for example) AnyChart will switch to HTML5 engine and show SVG-based charts.

Asynchronous Combined Use

Most of the modern web sites use JavaScript extensively and a lot of javascript files should be loaded prior to page display - this slows down page loading and increases display time. If you use the code shown in the previous section - page will be displayed only when AnyChart HTML5 engine is fully loaded, but this may be unnecessary if Flash version is going to be used. So, to speed the loading and omit loading unnecessary engine you can use Asynchronous JavaScript loading.

Here is a sample code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AnyChart Sample</title>
<script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script>
</head>
<body>
   <div id="chartContainer"></div>
    <script type="text/javascript" language="javascript">
    //<![CDATA[
      AnyChart.renderingType = anychart.RenderingType.FLASH_PREFERRED;
      var chart = new AnyChart('./swf/AnyChart.swf');
      // check is Flash Player is available
      if (!AnyChart.platform.hasRequiredVersion) {
        // if not = load AnyChartHTML5.js
        // do some settings
        chart.width = 700;
        chart.height = 300;
        AnyChart.ready(function() {
          // set chart settings file and display it
          chart.setXMLFile('./anychart.xml');
          chart.write('chartContainer');
        });
       AnyChart.loadHTML5Engine();
       }else {
        // Flash Player is available - no need to load HTML5 Engine
        chart.setXMLFile('./anychart.xml');
        chart.write('chartContainer');
      }
    //]]>
    </script>
</body>
</html>

Note:

AnyChart.loadHTML5Engine() is a method that starts AnyChartHTML5.js loading and you can't do anything with charts before loading finishes.
AnyChart.ready() is a loading event handler it launches appropriate function when HTML5 engine loading finishes.

Rendering Options

You can choose what engine to use when you embed charts to the page, this is controlled using anychart.RenderingType, which can be set to:

Value	Description
anychart.RenderingType.FLASH_ONLY	Flash engine is used in any case.
anychart.RenderingType.SVG_ONLY	HTML5 engine is used in any case.
anychart.RenderingType.FLASH_PREFERRED	Flash is the first option if both Flash and HTML5 are available.
anychart.RenderingType.SVG_PREFERRED	HTML5 engine is the first option if both Flash and HTML5 are available.

If FLASH_ONLY is set - you will always need Flash Player to vie charts:

AnyChart.renderingType = anychart.RenderingType.FLASH_ONLY;

If SVG_ONLY is set - JavaScript and SVG support are required to see anything:

AnyChart.renderingType = anychart.RenderingType.SVG_ONLY;

If you set FLASH_PREFERRED then Flash version will be used even if SVG display is available:

AnyChart.renderingType = anychart.RenderingType.FLASH_PREFERRED;

Or, if RenderingType is set to SVG_PREFERRED, then SVG version is used even if Flash Player is present:

AnyChart.renderingType = anychart.RenderingType.SVG_PREFERRED;

Supported Plot Types

Plot type	Flash	JavaScript (HTML5)
CategorizedVertical	+	+
CategorizedBySeriesVertical	+	+
CategorizedHorizontal	+	+
CategorizedBySeriesHorizontal	+	+
Scatter	+	+
Pie	+	+
Doughnut	+	+
Funnel	+	+
TreeMap	+	+
HeatMap	+	+
Polar	+	+
Radar	+	+
Map	+	not yet

Supported Chart Types in JavaScript (HTML5) version

Chart type
Column / Range Column / Stacked Column / 100% Stacked Column	+
Bar / Range Bar / Stacked Bar / 100% Stacked Bar	+
Line / Step-Line	+
Spline	+
Area / Range Area / Step-Line Area	+
Stacked Area / 100% Stacked Area / Stacked Step-Line-Area / 100% Stacked Step-Line-Area	+
Spline Area / Range Spline Area / Step-Spline Area	not yet
Stacked Spline Area / 100% Stacked Spline Area / Stacked Step-Spline-Area / 100% Stacked Step-Spline-Area	not yet
Pie / Doughnut	+
TreeMap	+
HeatMap	+
Funnel Chart	+
Pyramid Chart	+
Candlestick / Stock(HLOC) Chart	+
Dot/Marker Chart	+
Radar	+
Polar	+
Dashboards	+
Gauge	+

Note: 3D Mode is not yet available in HTML5 version for Ranged Bars. Pyramid, Cylinder and Cone Shapes are replaced by the regular Bar/Column in 3D Mode.

Functionality in JavaScript (HTML5) Version

Axes	+
Title	+
Position	+
Labels	+
Tickmarks	+
Line	+
Grid	+
Dash grid	+
Interlace grid	+
Extra axes	+
Date time axes	+
Major interval	+
Minor interval	+
Linear scale	+
Logarithmic scale	+
Stacked	+
Percent stacked	+
Overlay	+
Sorted overlay	not yet
Min Max settings	+
Inverted scale	+
Crossing scale	+
Base axis scale value	+
Label Background	+
Label position	+
Label rotation	+
Label stager	+
Custom lines (trends)	+
Custom labels	+
Custom Ranges (areas)	+
Axis Labels	+
Enable\|Disable label	+
Formatting labels	+
Font settings	+
Multiline	+
Tooltips	+
Enable\|Disable tooltips	+
Formatting tooltips	+
Position tooltips	+
Background & effects	+
Tooltips style	+
Extra tooltips	+
Data labels	+
Enable\|Disable	+
Formatting	+
Custom attributes	+
Rotation	+
Background & effects	+
Style	+
Extra labels	+
General settings	+
Background Solid	+
Background gradient	+
Background Image	not yet
Hatch fill	+
Resources	not yet
Corners	+
Inside margins	+
Effects	not yet
Line gradient	+
Line opacity	+
Line solid	+
Line thickness	+
Dashed line	+
Caps & Joins	+
Color HEX	+
Color RGB	+
Color HSB	+
Color Web	+
Color Transformation	+
LightColor	+
DarkColor	+
Blend	+
Effects shadow	not yet
Effect bevel	not yet
Effect glow	not yet
Effect blur	not yet
Effect inner shadow	not yet
Effect inner glow	not yet
Change fonts	+
International Symbols Support	+
HTML formatting	not yet
HTML tags	not yet
Text Rotation	+
Text Effects	not yet
Color Palettes	+
apply_palettes_to	+
Templates	+
Internal Templates	+
External Templates	+
Controls	+
Chart title	+
Chart subtitle	+
Chart footer	+
Color swatch	+
Navigation panel	not yet
Zoom panel	not yet
Map moving panel	not yet
Custom labels	+
Custom images	not yet
Actions	+
Legend	+
Legend tokens	+
Enable\|Disable Legend title	+
Markers Symbols to Series Icon	not yet
Legend size	+
Legend position	+
Legend float	not yet
Items formatting	+
Background	+
Auto items	+
Custom items	+
Items separators	+
Custom attributes	+
Multiple Legend	+
Extra legends	+
Data thresholds	+
Custom thresholds	+
Legend thresholds	+
Automatic thresholds	+
Animation	not yet
Context Menu	not yet
Enable\|Disable	not yet
Localization	not yet
Saving charts	+
Printing charts	+
Interactivity	+
item states	+
item actions	+
Using CSV Data	+