How to create a simple chart and embed it into a web page

Intro

AnyChart is a flexible component for creation charts in Web, you can easily create a lot of charts using it, so let's see step by step how to create a page with chart.

Note: in this document only AnyChart.swf is mentioned, but you can optimize the page with selected chart type if you use custom type dependent swf. These swfs are described in SWFs Guide.

Note: you don't need SWF file at all, if you use only SVG rendering.

to top

Create a web page

First of all we need a plain HTML page that contains a Flash object, and place it to some folder on your web site: Below we've done it, creating AnyChartTest folder in IIS wwwroot folder with the following structure:

to top

Terms

Container page: a page where chart will be displayed; this page can be HTML, ASP, ASP.NET, CF, PHP, CGI, Perl (or any other scripting language capable to produce HTML output).

Data provider: AnyChart accepts all data needed to show the chart in a single XML File. The structure of this file will be explained later.

Chart SWF: Charts displayed by AnyChart is contained in a single swf file - that is why we created an swf subfolder.

AnyChart JavaScript library: to embed a chart into a web page we use AnyChart JavaScript Integration Library.

to top

Choosing Chart data and its visual style

As we are creating a chart we need some data for it. Imagine that we want to compare sales of ACME Corp. retail channels in one year. So, we have the following numbers:

Retail Channel Sales
Department Stores $637.166
Discount Stores $721.630
Men's/Women's Specialty Stores $148.662
Juvenile Specialty Stores $78.662
All other outlets $90.000

To transmit this data to AnyChart component we need to convert it to XML, like that:

XML Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03   <charts>
04     <chart plot_type="CategorizedHorizontal">
05       <data>
06         <series name="Year 2003" type="Bar">
07           <point name="Department Stores" y="637166" />
08           <point name="Discount Stores" y="721630" />
09           <point name="Men's/Women's Specialty Stores" y="148662" />
10           <point name="Juvenile Specialty Stores" y="78662" />
11           <point name="All other outlets" y="90000" />
12         </series>
13       </data>
14       <chart_settings>
15         <title>
16           <text><![CDATA[Sales of ACME Corp.]]></text>
17         </title>
18         <axes>
19           <y_axis>
20             <title>
21               <text><![CDATA[Sales]]></text>
22             </title>
23           </y_axis>
24           <x_axis>
25             <labels align="Outside" />
26             <title>
27               <text><![CDATA[Retail Channel]]></text>
28             </title>
29           </x_axis>
30         </axes>
31       </chart_settings>
32     </chart>
33   </charts>
34 </anychart>

Now copy the above code, open anychart.xml from AnyChartTest folder in any plain text editor and paste code there.

XML structure may look complex, but most of the tags are self descriptive and we can describe everything done in XML in several words:

In <chart> node we described chart orientation: we've set a horizontal plot type - <chart plot_type="CategorizedHorizontal">

In <chart_settings> node we described how our chart should look like:

We've set a chart title text:

XML Syntax
Plain code
01 <title>
02   <text><![CDATA[Sales of ACME Corp.]]></text>
03 </title>

We've set an y axis title text:

XML Syntax
Plain code
01 <y_axis>
02   <title>
03     <text><![CDATA[Sales]]></text>
04   </title>
05 </y_axis>

We've set a x axis title text and align of axis labels:

XML Syntax
Plain code
01 <x_axis>
02   <labels align="Outside" />
03   <title>
04     <text><![CDATA[Retail Channel]]></text>
05   </title>
06 </x_axis>

In <data> node we've created one <series> of data (we will need more series when building a multiseries charts)

In <series> node we've added one <point> node for each retail channel in our table, entered its name and sales value. e.g. <point name = "Department Stores" y="637166"/> and set series name and type. Series type specifies the way of displaying for this series.

to top

Rendering options

AnyChart chart can be rendered using Flash or JavaScript and you can choose which version should be displayed on the page. To do that you have to set renderingType static property of AnyChart class, which can be one of the following constants:

RenderingType Description
FLASH_ONLY Charts are always rendered using Flash Player, nothing is displayed if Flash is not supported.
SVG_ONLY Charts are always rendered using Java Script as SVG objects, nothing is displayed is SVG is not supported.
FLASH_PREFERRED If both SVG and Flash are supported, Flash is used.
SVG_PREFERRED If both Flash and SVG are supported, SVG is used.

Once again: if FLASH_ONLY option is set, end user must have a supported version of Flash Player to see AnyChart Chart:

AnyChart.renderingType = anychart.RenderingType.FLASH_ONLY;

If SVG_ONLY is set, only browsers capable to render SVG object will display a chart:

AnyChart.renderingType = anychart.RenderingType.SVG_ONLY;

If you use FLASH_PREFERRED or SVG_PREFERRED - you set the priority either to Flash:

AnyChart.renderingType = anychart.RenderingType.FLASH_PREFERRED;

Or to SVG:

AnyChart.renderingType = anychart.RenderingType.SVG_PREFERRED;

HTML File structure

Only one step remains and we will see our chart on the Web!

Here is a sample anychart.html, with AnyChart Flash component embedded (just open it in any text editor and copy-paste the 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>
    <script type="text/javascript" language="javascript">
    //<![CDATA[
    var chart = new AnyChart('./swf/AnyChart.swf');
    chart.width = 700;
    chart.height = 300;
    chart.setXMLFile('./anychart.xml');
    chart.write();
    //]]>
    </script>
</body>
</html>

Or you can create anychart.html with AnyChart JavaScript HTML5 Chart:

<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>
    <script type="text/javascript" language="javascript">
    //<![CDATA[
    AnyChart.renderingType = anychart.RenderingType.SVG_PREFERRED;
    var chart = new AnyChart();
    chart.width = 700;
    chart.height = 300;
    chart.setXMLFile('./anychart.xml');
    chart.write();
    //]]>
    </script>
</body>
</html>

Only text in bold is the html code, that you need to embed AnyChart into a HTML page.

Alter renderingType as described in Rendering options if you want to use HTML5 version.

to top

Final

Now we should launch our html page in a web browser, in our case we can use both:
http://localhost/AnyChartTest/anychart.html
or
C:\Inetpub\wwwroot\AnyChartTest\anychart.html

If everything was done exactly as described above, you will see the following chart:
Results

You can open this sample from here: Open the Simple Chart Sample

You can download the sample files from here: Download the Sample

If you want to try to modify sample in a folder other than live sample folder of AnyChart Documentation you should follow the installation tutorial: Installation of AnyChart to the Web Server of Local Machine

to top