Tutorial for using AnyChart with Classic ASP

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

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
• Package File Structure
• Sample File structure
• AnyChart Engine Files
• Sample Database
• HTML Code Explained
• ASP Code Explained
• Final

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.

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

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

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.

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:

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

HTML Code Explained

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

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.

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.

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.

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