
	ASP Shopping Cart, Forum & BBS - all for $20 from CodeToad Plus!

Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || Forums || RAM

Search Site:

Home » ASP » Article

ASP Cool Chart

Article by:

Glen (7/13/2002)

	Add to Favourites
	Tell a friend

Sponsored by:

FindMyHosting - Web Hosting Search

Summary:

This script allows you to create customisable bar charts in an instant using pure ASP code.

Viewed: 40289 times

Rating (3 votes):

4.7 out of 5

Rate this Article

Read Comments

Post Comments

Written by Glen from Cool ASP Stuff

View Live Demo
Download zip file.

Rated:

by Aspin.com users

What do you think?

This script allows creates a bar chart on the fly. It is very simple to customize using the array values at the bottom of the script. Simply enter a different line of values and keys here to customise the graph. You could also of course pull these values from a database for on-the-fly graphs. Hey! This stuff could save you a fortune!

Select All Code

 

<html>
<head>
    <title>Cool Chart 1.0</title>
</head>


<body>


<%sub displayverticalgraph(strtitle,strytitle,strxtitle,avalues,alabels)

 

'******************************* 
'           user customizeable values for different formats
'            of the graph
'             FREEWARE!!
'    Just tell me if you are going to use it - info@cool.co.za
'******************************** 


const GRAPH_HEIGHT     = 300              'set up the graph height
const GRAPH_WIDTH     = 400           'set up the graph width
const GRAPH_SPACING     = 0    
const GRAPH_BORDER     = 0             'if you would like to see the borders to align things differently    
const GRAPH_BARS     = 2             'loops through different colored bars e.g. 2 bars = gold,blue,gold,blue
const USELOWVALUE     = FALSE         'this uses the low value of the array as the value of origin (default = 0)
const SHOWLABELS     = TRUE          'set this to toggle whether or not the labels are shown
const L_LABEL_SEPARATOR = "|"            ' |Label
const R_LABEL_SEPARATOR = "|"            ' Label|
const LABELSIZE     = -4            
const GRAPHBORDERSIZE     = 1
const INTIMGBORDER     = 1               'border around the bars
Const ALT_TEXT        = 3            'Changes the format of the alternate text of the bar image
                        '1 = Labels ,2 = Values , 3 = Labels + Values , 4 = Percent

 

'************************************************************************
'array of different bars to loop through
'you can change the order of these 
'Count = 10 
'"dark_green","red","gold","blue","pink","light_blue","light_gold","orange","green","purple"
'cut and paste from here and insert into the agraph_bars array below Make sure the 
'number specified in the const GRAPH_BARS is the same as or less than that in the array 
' 7 graph_bars <= 7 elements in array
'************************************************************************


agraph_bars = array("dark_green","red","gold","blue","pink","light_blue","light_gold","orange","green","purple")


intmax = 0

 

'find the maximum value of the values array


	
for i = 0 to ubound(avalues)
if  cint(intmax) < cint(avalues(i)) then  intmax = cint(avalues(i)) 
next
if uselowvalue then 
intmin = avalues(0)
for i = 0 to ubound(avalues)
if  cint(intmin) > cint(avalues(i)) then  intmin = cint(avalues(i)) 
next
end if

 

'establish the graph multiplier


graphmultiplier = round(graph_height-100/intmax)

imgwidth = round(300/(ubound(avalues)+1))
if imgwidth > 16 then imgwidth = 16 


%>

<table border =<%=GRAPH_BORDER%> width:100% height=<%=graph_height%>>
  
  <tr>
    <td rowspan=3 valign="middle"><%=strytitle%> </td>
    <td colspan=<%=ubound(avalues)+2%> height=50 align="center">
    
      <h4><%=strtitle%></h4></td>
    </tr>
    <% count = 0%>
     <tr>
       <td>
     <table border=<%=graph_border%> cellpadding = 0 cellspacing = <%=graph_spacing%>><tr>
        <tr>
         <TD height="100%">
          <table border="<%=graph_border%>" height="100%">
             <tr>
             <td height="50%" valign="top" align=right><%=intmax%></td>
             </tr>
             <tr>
             <td height="50%" valign="bottom" align=right>
         
         <%if uselowvalue then
                 response.write cstr(intmin)
           else
             response.write "0"
           end if
          %>
         </td>
             </tr>
          </table>
         </td>
         <td valign="bottom" align="right"><img src="leftbord.gif" width="2" height="<%=graphmultiplier+8%>">
         </td>
             
             <%

 

             '*******************MAIN PART OF THE CHART************************************


         for i = 0 to ubound(avalues)
           strgraph = agraph_bars(count)
               if alt_text = 1 then 
           stralt = alabels(i)
          elseif alt_text = 2 then 
            stralt = avalues(i)
          elseif alt_text = 3 then 
            stralt = alabels(i) &" - "  &avalues(i)
          elseif alt_text = 4 then   
            stralt = round(avalues(i) /intmax  *100,2) &"%"
         end if     
            
            if uselowvalue then  %>
                  <td valign="bottom" align="center">
              <img src="<%=strgraph%>.gif" height="<%=round((avalues(i)-intmin)/intmax*graphmultiplier,0)%>" 
width="<%=imgwidth%>" alt="<%=strAlt%>" border="<%=intimgborder%>"></td>
           <%else%>
              <td valign="bottom" align="center">
              <img src="<%=strgraph%>.gif" height="<%=round(avalues(i)/intmax*graphmultiplier,0)%>" 
width="<%=imgwidth %>" alt="<%=strAlt%>" border="<%=intimgborder%>"></td>
           <%end if 
        
            if count = graph_bars-1 then 
              count = 0 
            else
              count = count + 1
            end if        
          next  
          

 

            'write out the border at the bottom of the bars also leave a blank cell for spacing on the right


             response.write "<td width='50'> </td></tr><tr><td width=8> </td>" _
&"<td> </td><td 	=" &(ubound(avalues)+1) &" valign='top'>" _
             &"<img src='botbord.gif' width='100%' height='2'</td></tr>"
         if showlabels then %>
             <tr><td width=8 height=1> </td><td> </td>
                <%for i = 0 to ubound(avalues)%>
                   <td valign="bottom" width=<%=imgwidth%> ><font size=
                   <%=labelsize &">" &l_label_separator &alabels(i) &r_label_separator %></font></td>
                <%next%>
             </tr>
         <%end if%>
        <tr><td colspan=<%=ubound(avalues)+3%> height=50 align="center"><%=strxtitle%></td>
        </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td></td></tr>
    </table>

<%end sub %>


<%
aMonthValues = array(1,9,0,23,28,31,13,22,31,7,1,14)
aMonthNames = array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
displayverticalgraph "TEST GRAPH","Y-AXIS","X-AXIS",aMonthValues,aMonthNames 
%>
</body>
</html>

View Live Demo
Download zip file.

Useful Links

Affordable Windows Hosting

Reseller Hosting

Web+Hosting=$1.66

Web Hosting

Hosting

Windows Hosting

Web Hosting Providers

Cheap Hosting

Advertise here

CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums

Rate this article: Poor Excellent

View highlighted Comments

User Comments on 'ASP CoolChart'

Posted by : Archive Import (Mike) at 14:50 on Friday, August 16, 2002

The graph height doesn‹t work.
This is a nice piece of work. I suggest cleaning up the code and packaging it up. Sell it for 3 bucks or something.

HTH

Posted by : Archive Import (olivier dsm) at 11:11 on Monday, August 26, 2002

nice sample of code, easy to integrate into your asp script and to use.

Posted by : Archive Import (JJ) at 10:57 on Monday, October 21, 2002

Nice Histogram. You did a good job.

Posted by : Archive Import (Dayakar Sama) at 14:14 on Thursday, October 31, 2002

Hi This is Excellent Chart Site

Posted by : Archive Import (Mark h) at 17:29 on Thursday, November 28, 2002

Hello! i've used asp graphing code from 4guys before but your gif's make it really stand out!

Posted by : Archive Import (bouaskar) at 10:30 on Wednesday, January 15, 2003

Simple and cleaver!

Posted by : Archive Import (Earlyman) at 22:40 on Monday, January 20, 2003

Cooooooooool!!!

Posted by : Archive Import (Brian) at 01:36 on Thursday, February 06, 2003

Nice graphs. I like the images. Very sharp looking images.

Question,
Is there a way to make the graph Horizontil?;

instead of vertical.

Posted by : Archive Import (jasmita) at 05:49 on Friday, February 14, 2003

Its really very nice n useful code, the best i found on net (form Bar charts in ASP program)

Posted by : Archive Import (s) at 17:48 on Sunday, March 09, 2003

nice visual cant work out if it works not a good download for hardworking writers

Posted by : Archive Import (ajay) at 06:36 on Friday, August 08, 2003

hi this is nice

Posted by : Archive Import (Mike) at 20:43 on Tuesday, August 19, 2003

How can this be modified so that it is dynamically data driven?

Posted by : Deon at 15:12 on Saturday, December 13, 2003

Hi there,
has anybody changed this so that it can pull the data from an existing DB - Access 2k with ASP VBScript.

Thanx,
Deon

Posted by : sbaartman at 08:08 on Friday, December 19, 2003

Works nice, I did manage to hook this up to database values.
Using Vb Split function to build the arrays - easy. Hopes this answer previous questions on how to handle data.

Well done dudde.
[b]Shane.[/b]

Posted by : stephen at 15:39 on Wednesday, March 16, 2005

Hi folks,

I am a student and i am having to code a bar chart in svg using asp taking the values from a database.
Im very lost and finding great difficulties. If anyone would have some sort of code that would help me or has done something similar, your help would be greatly appreciated.

Regards,
Stephen

Posted by : jdidol at 16:02 on Friday, January 05, 2007

Great script! I have modified it slightly to accept data from an access database. Thanks so much you saved me many hours of coding.

To post comments you need to become a member. If you are already a member, please log in .

RELATED ARTICLES
ASP Format Date and Time Script by Jeff Anderson An ASP script showing the variety of date and time formats possible using the FormatDateTime Function.

ASP FilesystemObject by Jeff Anderson An introduction to the Filesystemobject

Email validation using Regular Expression by Jeff Anderson Using regular expression syntax is an exellent way to thoroughly validate an email. It's possible in ASP.

Creating a Dynamic Reports using ASP and Excel by Jeff Anderson A simple way to generate Excel reports from a database using Excel.

Create an ASP SQL Stored Procedure by Jeff Anderson A beginners guide to setting up a stored procedure in SQL server and calling it from an ASP page.

Creating an SQL Trigger by Jeff Anderson A beginners guide to creating a Trigger in SQL Server

ASP Shopping Cart by CodeToad Plus! Complete source code and demo database(Access, though SQL compatible) to an ASP database driven e-commerce shopping basket, taking the user through from product selection to checkout. Available to CodeToad Plus! Members

Concatenate strings in sql by Jeff Anderson A brief introduction to concatenating strings in an sql query (using SQL server or access databases).

ASP OpenTextFile by Jeff Anderson An introduction to the OpenTextFile Method of the FileSystemObject

The asp:checkbox and asp:checkboxlist control by David Sussman, et al Checkboxes are similar to radio buttons, and in HTML, they were used to allow multiple choices from a group of buttons.

Recent Forum Threads

•	hidden div block when displayed, displays at an offset of 200px only in IE 6..
•	help - sketch
•	Re: Perl Script - File Handling.
•	Open a file from website
•	Re: to open 5 terminals from one and also execute different commands on each terminal
•	read a selected multiple line, those should match some of the values read in the files..
•	Help me please
•	Empty the contents of a file.
•	Month Start, End dates

Recent Articles

	ASP GetTempName
	Decode and Encode UTF-8
	ASP GetFile
	ASP FolderExists
	ASP FileExists
	ASP OpenTextFile
	ASP FilesystemObject
	ASP CreateFolder
	ASP CreateTextFile
	Javascript Get Selected Text

submit a link - privacy - contact - advertise - hot links - link to us - submit your article