Tutorial for using AnyChart with Classic ASP

AnyChart Flash Charting Component is a flexible Adobe Flash based solution that allows you to create interactive and great looking flash charts and dashboards. It is a cross-browser and cross-platform charting solution intended for everybody who deals with creation of dashboard, reporting, analytics, statistical, financial or any other data visualization solutions.

Please see more information about AnyChart at:

A lot of technologies allow developers to use Flash based products, but there are specific issues in each case. AnyChart Team have tried to creates samples that make the start of implementation of AnyChart easier and understandable. This particular sample explains how to use AnyChart Flash Charts, Maps, Gauges and Dashboards with Classic ASP.

If you want to use AnyChart with ASP you can start with downloading the following sample package:

download AnyChart with ASP Samples Package

These are samples of AnyChart Flash Charts usage with ASP, please download the zip file, unpack it and follow the instructions in readme.txt

All samples work as they are, but MS SQL Sample requires MS SQL configuration in ASP Code and attaching data to the database, please see "03_simple_chart_mssql/data.asp" source code from the package for more.

Below we will explain in details sample of usage AnyChart with ASP and MS SQL Database (03_simple_chart_mssql), all other samples in package contain a lot of comments in source code and samples themselves are really simple and comprehensive.

Simple Chart created using AnyChart and ASP

Introduction

AnyChart is a flexible component for creation charts in Web, you can easily create a lot of charts using it, ASP is one of the popular scripting engines, MS SQL - is the one of the most popular database to be used with ASP, so let's see step by step how to put them all together in a small sample.

to top

Package File Structure

When you unpack anychart-asp-samples.zip you will get the following file structure:

  • anychart-asp-samples
    • anychart_asp
      • 01_simple_chart
      • 02_simple_chart_array
      • 03_simple_chart_mssql
      • 04_self_drilldown
      • 05_drilldown
      • 06_map_sample
      • anychart_files
      • index.html
    • readme.txt

to top

Sample File Structure

Our point of interest is MS SQL Sample, so we will focus only on two folders:

  • anychart_asp
    • 03_simple_chart_mssql
      • dump.sql
      • data.asp
      • index.html
    • anychart_files
      • swf
        • anychart.swf
      • js
        • anychart.js

to top

AnyChart Engine Files

anychart_files folder contains two folders and two files: anychart.swf and anychart.js. SWF file is a file that is used to render charts by a Flash Player on client-side, anychart.js is a JavaScript file that is used to make easier embedding of AnyChart Flash Charts into HTML page. JavaScript file is not mandatory, but it makes embedding much easier and is recommended.

You don't have to understand what's inside these two files - they just have to be uploaded to your server to some folder of your choice. In this sample they are placed in anychart_files folder, please do not move them until you understand what you are doing.

to top

Sample File structure

03_simple_chart_mssql contains 3 files: dump.sql, index.html and data.asp, they are important, so we will talk about them in details:

Sample Database

dump.sql file contains SQL commands to create tables named anychart_sample_products and anychart_sample_orders in your database. These table are used in sample to show fetching data from MS SQL and passing it to AnyChart. The structure and content of these tables:

anychart_sample_products
product_id name
1 Product A
2 Product B
anychart_sample_orders
order_id product_id order_date volume
1 1 2008-07-09 120
2 1 2008-07-09 230
3 1 2008-06-09 160
4 1 2008-06-09 540
5 1 2008-06-01 110
6 2 2008-07-09 130
7 2 2008-07-09 250
8 2 2008-06-09 320
9 2 2008-06-09 420
10 2 2008-06-01 320

NOTE: To make this sample work you should add these tables to some database in your MS SQL Server.

to top

HTML Code Explained

index.html is a simple HTML page, here is its code:

<html>
<head>
<title>AnyChart Sample of Simple Using AnyChart with ASP and MS SQL Database</title>
<script type="text/javascript" language="javascript" src="../anychart_files/js/AnyChart.js"></script>
</head>
<body>
    <h1>AnyChart Sample of Simple Using AnyChart with ASP and MS SQL Database</h1>
    <p>Please see data.asp code to see how xml for AnyChart is created using ASP.</p>

    <div id="container"></div>

    <script type="text/javascript" language="javascript">
    var chart = new AnyChart('../anychart_files/swf/AnyChart.swf');
    chart.setXMLFile('./data.asp');
    chart.write('container');
    </script>

</body>
</html>

What you should know about this code:

  • anychart.js should be properly referenced in head section
  • div named container is used as a container for the chart, it can be placed anywhere in body.
  • javascript script code block should appear after div that should contain chart. This code tells AnyChart to use data.asp file with data and AnyChart.swf to render Flash chart.

to top

ASP Code Explained

data.asp is the ASP script that gets data from MS SQL Database and converts it into XML format acceptable by AnyChart, this script shows only some basics (learn more about XML).

To understand what exactly data.asp does it is better to view its source code and read comments, we will highlight only main points.

  • To make this sample work you should configure MS SQL Connection details in the beginning of the script.
  • Script consists of two large parts:
    • First part gets data from database and creates a data section of AnyChart XML, this data is contained in data variable.
    • Second part is a plain XML created according to AnyChart XML rules, data variable is output as a part of this XML.

to top

Final

When configuring the sample it may be useful to launch data.asp and look at its output, prior to trying to see the chart at index.html

If you did everything right you will see data.aspput like this: Click to view data.asp output.

to top

Please contact us at contact@anychart.com if you have any questions.

Please note that this sample (and those provided in downloadable package) uses only some of AnyChart features. AnyChart provides a number of other chart types and options, which are described in evaluation download.

To learn more about AnyChart, get User's Guide and XML Reference:
Download Full AnyChart Evaluation Package or View documentation online

to top


download Download Trial     buy Buy Now