ASP Charts - Using csDrawGraph to produce bar chart and pie charts.
The simple example of using csDrawGraph is explained below. If you want to run the example yourself you will need the csDrawGraph component installed on your server and the sample scripts, which can be downloaded below.
There are two files in chartdemo.zip. "chartdemo.asp" is the page that needs to be viewed in the browser. It is an asp file although it contains no VBScript and could have been a simple html file.
The script that draws the graphs is called up by placing the script name inside an image tag. A URL parameter is passed with each <img> tag so that the same script can be used to draw both graphs.
<img src="chartimages.asp?Type=Pie">
<img src="chartimages.asp?Type=Chart">
The work is done by the chartimages.asp script which creates an instance of the csDrawGraph object, feeds in the data and then draws either a pie or bar chart, depending on the URL parameter. The chart is streamed to the browser in gif format. This script is listed below with some notes.
<%
'These 3 lines prevent the page being cached
'and make the server finish processing it before streaming it.
'Use this method when asp output is an image rather than html.
Response.Expires = 0
Response.Buffer = true
Response.Clear
'Prepare to stream a GIF
Response.ContentType = "image/gif"
Set Chart = CreateObject("csDrawGraphTrial.Draw")>
'Add the data
Chart.AddData "Item 1", 17, "ff0000"
Chart.AddData "Item 2", 28, "00ff00"
Chart.AddData "Item 3", 5, "0000ff"
If Request.QueryString("Type") = "Pie" Then
'Change some colours and set the title text
Chart.Title = "Sample Pie Chart"
Chart.BGColor = "eeeeee"
Chart.LabelBGColor = "eeeeee"
Chart.TitleBGColor = "eeeeee"
'Stream the chart as a GIF
Response.BinaryWrite Chart.GifPie
Else
'Set the title text for the bar chart
Chart.Title = "Sample Bar Chart"
'Stream the chart as a GIF
Response.BinaryWrite Chart.GifBar
End If
The same demo using Base64 encoding
A relatively recent addition to csDrawGraph is support for base64 encoding of image output. This removes the need for a separate script to stream the file, but it is at a cost of a larger download size. A third script is included in the demo, "chartdemobase64.asp", which includes the HTML, the IMG tags and the ASP to generate the graphs.
The code used to generate each graph is the same as described above but the image is displayed as follows:
<img src="data:image/gif;base64,<%= Chart.Base64Out(0, 1) %>" width="400" height="300">
The Base64Out command takes two parameters, the first specifies the graph type and the second the image format. The 0 is for a pie chart and the 1 for a GIF. See the instruction manual for the available options.