
	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

Summary:

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

Viewed: 133478 times

Rating (72 votes):

4 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

Fat Cow Hosting

FatCow Review

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.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

Posted by : dupati1 at 14:11 on Thursday, July 08, 2004

Hi i have the same problem...

I am trying to get the data from SQL server and it returned as a string...

how can i make it as String[] and Int32[]

Please help...

I can post code if you need more information.

-VJ

Posted by : oytun12 at 13:45 on Thursday, December 16, 2004

Cüneyt & VJ
System.Convert.ToInt32(string)

Posted by : enric_ccm at 01:17 on Wednesday, February 16, 2005

can you send me the full code in C# for creating a bar chart with the data from a SQL Server database? i try out your code above but i didn't display any thing

Posted by : enric_ccm at 04:37 on Wednesday, February 16, 2005

can you send me a full coding of generating the bar chart using data from SQL Server database? i have try your code but it display nothing when i link it to database

Posted by : rajeshkutti at 00:33 on Thursday, March 31, 2005

It's working fine,but i need chart to be generated dynamically to Database(SqlServer2000) values as a caomparitive chart between the scheduled vs actual period

Posted by : ethan at 13:25 on Tuesday, August 09, 2005

my god you people are so lazy - you are asking this guy to do your work for you? you cant create an array? give me a break.

Posted by : rjp1979 at 08:04 on Thursday, October 27, 2005

Well said Ethan.

Thanks heaps Chris. Easy to use and effective :)

Posted by : mcab21 at 15:37 on Thursday, April 06, 2006

Hi, can anyone help - i am using ASP.Net and more specifically VB.Net. I need a bar simple bar chart - something like above. I'm having problems designing my own. Can someone provide me a simple example to work from?

Cheers,

Rob

Posted by : surya_sree at 04:13 on Saturday, June 10, 2006

Plz, i need the Download the option of the Code. Like search Engnie, Bar Graph etc.,

Posted by : David Bruce at 02:35 on Thursday, August 30, 2007

test

Posted by : dc197 at 02:36 on Thursday, August 30, 2007

test

Posted by : ramy@groupescapes.com at 16:11 on Thursday, December 06, 2007

Any leads as to how I can generate a linear preferably or else a bar chart based on two column populated out of a SQL DB?
I keep running into pie charts but don't seem to break through (5 days later that is)
I would appreciate any help you can provide.
Thanks again

Posted by : lovesharma at 03:21 on Saturday, January 12, 2008

hi,
i m trying to develop a web application using ASP.NET,VB.NET & SQL SERVER
2005.
in my application i want to show data on graph based on user selection.
is it possibile using Office Web Components?

if yes than how.
pls help me

Posted by : suryakiran255 at 00:23 on Thursday, January 24, 2008

Hello! this is surya kiran. I am working on developing online exams and then generating reports according to the scores.which consists of graphs. I want to know is there any graph which is like slide bar type according to the rating the person scores. Can I get that?

Posted by : shahid at 03:49 on Tuesday, August 05, 2008

the above code generates a horizontal bar chart.how can i create a vertical bar chart?plz reply with code.its urgent.

Posted by : TechGuy_Vega at 01:42 on Friday, March 06, 2009

I have posted a page that will produce a vertical bar chart image for you.
The page contains samples on how to use it.
http://vegadiscoveries.com/resources/chartgraph/bargraph.aspx

There is also one for pie charts at:
http://vegadiscoveries.com/resources/chartgraph/piechart.aspx

Posted by : shilinpm at 07:30 on Tuesday, October 20, 2009

did anyone have any idea about drawing vertical chart?

if yes means pls send to me.

my email id is

sherin.j.stanley@gmail.com

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

RELATED ARTICLES
ASP FilesystemObject by Jeff Anderson An introduction to the Filesystemobject

ASP GetTempName by Jeff Anderson Use the GetTempName method to create a randomly generated temporary file on the server.

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

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.

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.

ASP FileExists by Jeff Anderson An introduction to the FileExistsMethod of the FileSystemObject

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

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

Add or Subtract Hours in SQL or ASP using DateAdd by Jeff Anderson A beginners guide to using the SQL DATEADD function to add or subtract hours. Particularly useful when setting the time displayed on the ASP page to a different time zone (eg when the server is in the US, and the site is for a UK audience).

ASP CreateTextFile by Jeff Anderson An explanation of the CreateTextFile Method, part of the ASP FileSystemObject

Recent Forum Threads

•	C++
•	Re: refresh parent after closing pop up window
•	Dynamic Insertion
•	Date and Time function around the world???
•	Significant Factors
•	Perl array access
•	Re: huffman encoding and decoding in C++...
•	Perl One Liner: Replace {(
•	Re: html including php, accessing the functions

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