
	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.NET Bar Chart Graph

Article by:

Chris Goldfarb (4/8/2003)

	Add to Favourites
	Tell a friend

Sponsored by:

FindMyHosting - Web Hosting Search

Summary:

Complete source code to generate a horizontal bar chart graph in ASP.NET

Viewed: 20929 times

Rating (29 votes):

4.6 out of 5

Rate this Article

Read Comments

Post Comments

ASP.NET Bar Chart Graph

Online Demo

This script generates a series of horizontal bars in graph chart format, on an .aspx web page.

To run the graph script is very simple. First save the following code into a file called dotnetgraph.ascx

Select All Code



<script language="C#" runat="server">

    //********************************************************************************************
    // DotNetGraph, v1.0
    // Purpose: This page control generates a cross-browser compatible graph in HTML.
    //********************************************************************************************
    // Created on 4/29/01 Chris Goldfarb
    //
    // Feel free to make any changes to the code, but if you redistribute please keep a reference
    // to the original author.
    // 
    // Notes: The first version only supports vertical bar graphs.  More to follow!  Send
    // suggestions for improvement to cgoldfar@direcpc.com or christopher.goldfarb@intel.com
    // Reference the DotNetGraph.aspx page (code below) for a simple example on how to interface.
    //********************************************************************************************

    private String        _sXAxisTitle;
    private String        _sChartTitle;
    private Int32        _iUserWidth = 300;
    private String []    _sYAxisItems;
    private Int32 []    _iYAxisValues;

    public Int32 UserWidth {
        get { return _iUserWidth; }
        set { _iUserWidth = value; }
    }

    public Int32 [] YAxisValues {
        get { return _iYAxisValues; }
        set { _iYAxisValues = value; }
    }

    public String [] YAxisItems {
        get { return _sYAxisItems; }
        set { _sYAxisItems = value; }
    }

    public String XAxisTitle {
        get { return _sXAxisTitle; }
        set { _sXAxisTitle = value; }
    }

    public String ChartTitle {
        get { return _sChartTitle; }
        set { _sChartTitle = value; }
    }

    void Page_Load(Object sender, EventArgs e) {    
    
        // As long as we have values to display, do so
        if (_iYAxisValues != null) {
            
            // Color array
            String [] sColor = new String[9];
            sColor[0] = "red";
            sColor[1] = "lightblue";
            sColor[2] = "green";
            sColor[3] = "orange";
            sColor[4] = "yellow";
            sColor[5] = "blue";
            sColor[6] = "lightgrey";
            sColor[7] = "pink";
            sColor[8] = "purple";

            // Initialize the color category
            Int32 iColor = 0;

            // Display the chart title
            lblChartTitle.Text = _sChartTitle;

            // Get the largest value from the available items
            Int32 iMaxVal = 0;            
            for (int i = 0; i < _iYAxisValues.Length; i++) {
                if (_iYAxisValues[i] > iMaxVal)
                    iMaxVal = _iYAxisValues[i];
            }

            // Take the user-provided maximum width of the chart, and divide it by the
            // largest value in our valueset to obtain the modifier
            Int32 iMod = Math.Abs(_iUserWidth/iMaxVal);

            // This will be the string holder for our actual bars.
            String sOut = "";
            
            // Render a bar for each item
            for (int i = 0; i < _iYAxisValues.Length; i++) {

                // Only display this item if we have a value to display
                if (_iYAxisValues[i] > 0) {

                    sOut += "<tr><td align=right>" + _sYAxisItems[i] + "</td>";
                    sOut += "<td>" + RenderItem(_iYAxisValues[i], iMod, sColor[iColor]) + "</td></tr>";
                    iColor++;
                    
                    // If we have reached the end of our color array, start over
                    if (iColor > 8) iColor = 0;
                }
            }
            
            // Place the rendered string in the appropriate label
            lblItems.Text = sOut;
            
            // Drop in the Y Axis label
            lblXAxisTitle.Text = _sXAxisTitle;
        }
    }

    //****************************************************************************************
    // DotNetGraph.RenderItem Method
    //
    // Created 4/29/01 Chris Goldfarb
    //
    // Generates a horizontal bar graph for a given item
    //****************************************************************************************
    private String RenderItem (Int32 iVal, Int32 iMod, String sColor) {
        String sRet = "";
        sRet += "<table border=0 bgcolor=" + sColor + " cellpadding=0 cellspacing=0><tr>";
        sRet += "<td align=center width=" + (iVal * iMod) + " nobr nowrap>";
        sRet += "<b>" + iVal + "</b>";
        sRet += "</tr><td></table>";
        return sRet;
    }
        
</script>

<table>
    <tr>
        <td align=center>
            <asp:Label id=lblChartTitle runat=server />            
        </td>
    </tr>
    <tr>
        <td>
            <table border=1 bordercolor='#777777' cellspacing=0 cellpadding=0>
                <tr>
                    <td>
                        <table>
                            <asp:Label id=lblItems runat=server />
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan=2 align=center>
            <asp:Label id=lblXAxisTitle runat=server />
        </td>
    </tr>
</table>

Then save the following in the same directory to a file called dotnetgraph.aspx

Select All Code


 

<%@ Register TagPrefix="DNG" TagName="DotNetGraph" Src="DotNetGraph.ascx" %>

<script language="C#" runat="server">

    void Page_Load(Object sender, EventArgs e) {            
    
        // Declare our variables
        String [] sItems = new String[10];
        Int32 [] iValue = new Int32 [10];

        // Populate our variables
        sItems[0] = "Carrots";
        iValue[0] = 23;
        
        sItems[1] = "Peas";
        iValue[1] = 53;
        
        sItems[2] = "Celery";
        iValue[2] = 11;
        
        sItems[3] = "Onions";
        iValue[3] = 21;
        
        sItems[4] = "Radishes";
        iValue[4] = 43;
        
        // Set our axis values
        dngchart.YAxisValues = iValue;
        
        // Set our axis strings
        dngchart.YAxisItems  = sItems;            
        
        // Provide a title
        dngchart.ChartTitle  = "<b>Inventory Breakdown:</b>";
        
        // Provide an title for the X-Axis
        dngchart.XAxisTitle  = "(units display actual numbers)";        
        
    }
            
</script>

<html>
<body>
<!-- Note UserWidth is set "in-line".  It could just as easily been set on the page_load method. -->
<DNG:DotNetGraph id=dngchart UserWidth=200 runat=server />
</body>
</html>

Within this aspx page you will see we set all the quantities and labels for the graph within the Page_Load function.

There is obviously plenty of scope for development in this section - for example, pulling these values directly from a database. But hopefully the elegant simplicity of these files will be a useful introduction to the concepts involved.

Added by the author

I was still a little new to .NET when I wrote this article two years ago , so there are a couple things I'd change if implementing now: 1. Use StringBuilder instead for the RenderItem method:

private String RenderItem (Int32 iVal, Int32 iMod, String sColor) {
StringBuilder sb = new StringBuilder();
sb.Append("<table border=0 bgcolor=" + sColor + " cellpadding=0 cellspacing=0><tr>");
sb.Append("<td align=center width=" + (iVal * iMod) + " nobr nowrap>");
sb.Append("<b>" + iVal + "</b>");
sb.Append("</tr><td></table>");
return sb.ToString();
}

StringBuilder is orders of magnitude faster than manipulating strings directly (strings are immutable).

Useful Links

Web Hosting

HTML Templates

Domain Names

Ram Upgrades

Cheap Web Hosting

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.NET Bar Chart Graph'

Posted by : Archive Import (Jeremy Leppan) at 07:36 on Friday, September 05, 2003

Here however is something you could tweak

sql = "select count(login_id) as total_logins , user_name from valid_logins where ip_address <> '192.168.0.3' and datediff('d',date_time,now()) < datepart('d',now()) + 1 group by user_name order by count(login_id) DESC "
rs.open(sql,dbconn)

while not rs.eof
redim preserve sItems(x_count)
redim preserve iValue(x_count)
sItems(x_count) = rs("user_name").value
iValue(x_count) = rs("total_logins").value
x_count = x_count + 1
rs.movenext()
end while

Posted by : Archive Import (jeremy leppan) at 07:39 on Friday, September 05, 2003

Explaination of the above
______________________________

You see the select - it select the total amount each user has logged into my system. But it does a little more than that.

It filters out the local address I use for testing. This could be replaced with a range if you like.

Then the date_diff thing. Its just a nice way to get all entries for this month.

You can not just to a datediff - 1 month. Cauase that would give you traffic for the last 30 days. You want traffic from the beginning of the month.

The group by, this is the part, that groups the logins to users.

then the loop.

Nothing fancy - just builds the instuctions for the graph

Posted by : Archive Import (Yvonne) at 07:04 on Wednesday, September 17, 2003

how come we cant manage to run the bar chart even though we have implemented all the codings as accordingly??

Posted by : Archive Import (TP) at 03:13 on Thursday, September 18, 2003

Is the code u provided above must be run in C# program? because we are using Visual Studio.Net - ASP.Net. However, the graph won't come out. can u send us the code for ASP.Net using vb language instead of c#.

Posted by : csandvig at 12:24 on Friday, October 17, 2003

Excellent example - simple and it works! Thank you.

Posted by : cÃ¼neyt at 19:38 on Saturday, February 28, 2004

Great, it works fine with static values.

I am trying to get the data from a database(MSDE), and
count the number of items and pass the result to iValue. I am using c#.

I have tried to use:
iValue = select count(BedID) from Wards;

but this returns a string not an Int32.

Please help?

thanks

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

RELATED ARTICLES
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

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

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.

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.

Find Visitor Geographical location from IP address using ASP by Per Soderlind Where are your internet visitors coming from? Using simple ASP and the free GEOIP Database from Maxmind its quite easy to find out

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.

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.

Complete ASP Chat Application by Brian Gillham A bonus for codetoad regulars - this is a chat application implemented entirely in ASP and is ready to run immediately.

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

ASP.NET Bar Chart Graph by Chris Goldfarb Complete source code to generate a horizontal bar chart graph in ASP.NET

Recent Forum Threads

•	ASP Shopping Cart Script
•	Exchange 2000 data
•	ASPX page not showing
•	Calling ASP from Stored procedure
•	DISTINCT Function with Date string
•	Overflow: Scroll - Back to Top
•	Sessions
•	page in a cell
•	Re: open excel file in html page

Recent Articles

	ASP.NET Forum Source Code
	Internal Search Engine
	Javascript Growing Window
	Simple date validation
	Search engine friendly URLs using ASP.NET (C#.NET)
	Function to Return Alpha Characters Only
	The OSI Reference Model - A Clear and Concise Illustration !
	Understanding Pointers to Functions in C
	Application & Session Events in the Global.asax File
	Socket Programming in Perl

Site Survey

Help us serve you better. Take a five minute survey. Click here!

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