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.

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’ll 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:

<anychart>
  <charts>
    <chart plot_type="CategorizedHorizontal">
      <data>
        <series name="Year 2003" type="Bar">
          <point name="Department Stores" y="637166" />
          <point name="Discount Stores" y="721630" />
          <point name="Men's/Women's Specialty Stores" y="148662" />
          <point name="Juvenile Specialty Stores" y="78662" />
          <point name="All other outlets" y="90000" />
        </series>
      </data>
      <chart_settings>
        <title>
          <text>Sales of ACME Corp.</text>
        </title>
        <axes>
          <y_axis>
            <title>
              <text>Sales</text>
            </title>
          </y_axis>
          <x_axis>
            <labels align="Outside" />
            <title>
              <text>Retail Channel</text>
            </title>
          </x_axis>
        </axes>
      </chart_settings>
    </chart>
  </charts>
</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:

<title>
  <text>Sales of ACME Corp.</text>
</title>

We've set an y axis title text:

<y_axis>
  <title>
    <text>Sales</text>
  </title>
</y_axis>

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

<x_axis>
  <labels align="Outside" />
  <title>
    <text>Retail Channel</text>
  </title>
</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

HTML File structure

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

Here is the code you should paste in anychart.html (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>

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

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 open folder with sample files from here: Open Folder With Sample

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

to top