-Log in
-Register (free)

-RSS Feeds
-New MyDesk Module
-Update to Profile

Alternate color for RS looping with For Next
Northwind / ASP - Nested select
ASP SQL Injection

 Lesson 18: Turning numbers into graphs with ASP
Lesson 18: Turning numbers into graphs with ASP

Author: Alexander Haneng
Difficulty: Easy
Requires: ASP
Demo: Demo1, Demo2
Download: Lesson18.zip
Learn to display your data in a graphical way by using ASP driven charts.

Ok so now you probably know how to get data from databases, text files, forms etc. But when it comes to displaying that data people mostly use tables or listings. The fact is that pure text is bit boring and often you'll get your points across allot better with a simple graph than with a whole page of text. There are several ways to do this, and if you can afford it server components is probably the best way to do it. This is because such components can generate images serverside, giving you both a high grade of browser compatibility (no need for Java or plugins) as well as high grade of design freedom. But what if you can't pay up several hundred or thousands of dollars to buy such a component? There are alternatives. Our first approach is using images that we resize with ASP to display bar graphs. Our second approach is a Java applet that can display a more advanced graph, but depends on a Java capable browser.

VBScript & image resize bar chart:
I use this approach to display some of the things I log at haneng.com, such as page views per day, and it works good. The major disadvantages are:
a) Little design freedom, limiting your graphs to bar charts
b) Problems when you try to print them (at least with Netscape).
The pros are:
a) High compatibility
b) Easy to make, no components etc. needed
c) Free
So how does such a bar chart look like? Under is an example:


Try inserting data into this bar chart via a form.

Click to download the source code and the applet used in this lesson

In the demo I use data from the form you submit to create the chart, but it could be done with any data that you put in the value array. Collect info from a database or a text file and put it into the array, and voila you have a graph of that data.

The Java approach: a pie chart
Some time ago I discussed the problems of generating charts with my friend Arnstein. He was at the time attending a course at the University of Oslo about Java, and he came up with a little applet. The applet could take some parameters and then display that data as a pie diagram. He gave me the source code, and after I made some modifications it worked very well. With a Java applet you can display a wide variety of graphs, but it requires that your visitors have a Java enabled browser for it to work. Here's what the Java pie chart applet looks like:

This is a screenshot so all of you that don't have a Java enabled browser can see it also. The chart displays the percentage of different browsers used by visitors on one site.
Try inserting data into this pie chart via a form (Java needed).

You can download the pie applet and all the code used in this lesson.

The same goes for this applet as for the bar chart. You can fill the chart with data with VBScript from any data source. And you must admit that charts bring more life to your data. If you got other ways to make graphs with ASP and/or got a nice and free chart applet of some kind, let me know!

HanengCharts 2.0
Do you need more than 5 parameters for the pie chart?
Need other charts?
Need to set the colors?!
Download Our Free 30 Day Trial of HanengCharts 2.0!

Where to go next:
Check out the other lessons.

17: Access
19: Global.asa
| Info |
© Copyright 1997-2016 Alexander Haneng