This tutorial will show you how to display graphics charts using ASP.NET 2.0, ComponentArt's Web.UI control, and C#.NET
.NET has quickly become an enterprise-level framework used by many businesses. Because of this, business users need to have a way to report their business numbers, percentages, and trends. With the advent of .NET 2.0, .NET developers have a powerful set of classes used to draw and manipulate graphics with the System.Drawing, System.Imaging, and System.Drawing2D namespaces, to name a few. Built on top of these robust classes, many third-party companies have designed reusable code and tools to assist developers on creating graphs and charts very easily and quickly. One such third-party tool is provided by ComponentArt. You can download a trial version of their software from their downloads section and install example code written in both C# and VB .NET. To begin this tutorial first ensure that you have completely downloaded and installed the third-party components from ComponentArt. After you have successfully installed the software, you have to include one namespace.
| using System.Web.UI.WebControls.Webparts; |
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
Additionally, you must ensure that you have the proper .DLLs located in the Bin folder of your project containing the files App_Licenses.dll, ComponentArt.Charting.WebChart.dll, ComponentArt.Web.UI.dll, and have copied the licenses.licx and Web.Config file from the example code found in the installation directory of ComponentArt Web.UI. Once all of these files are copied you must register the tag prefixes in your .aspx page to reference the third-party components.
<%@ Register TagPrefix="cc1" Namespace="ComponentArt.Charting" Assembly="ComponentArt.Charting.WebChart" %>
<%@ Register TagPrefix="ComponentArt" Namespace="ComponentArt.Web.UI" Assembly="ComponentArt.Web.UI" %>
|
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.
After you've registered the TagPrefix you can use it in your code like this:
|
<cc1:WebChart id="targetChart" RenderingPrecision=".5" width="515" height="328" runat="server" SaveImageOnDisk="False" WebChartImageType="Gif"></cc1:WebChart>
|
Now we are ready to write code for our code-behind. The ComponentArt Web.UI classes have a very specific and concise interface that makes it very easy to define simple graphs and charts.
First, we grab data from the Pubs database, specifically the Sales table and load the quantities and date columns each into their own array. After that we simply define a Series (a set of values) using the ComponentArt.Charting.Series class and add it to our existing chart (targetChart) using the Add() method of the targetChart.Series object.
Now that our chart has a series it needs x and y values to produce a graphical chart. We'll use the DefineValue() method of the chart object to create the x and y dimensions and point them to the appropriate array we created earlier.
To finish up, we simply call the DataBind() and Draw() methods of our chart object to draw our graph, and thats it!
try
{
string sql_qry = @"
select cast(ord_date as varchar(3)) date,sum(qty) quantities from sales
group by ord_date
";
SqlCommand cmd = new SqlCommand(sql_qry, new SqlConnection("Server=localhost;Database=Pubs;Trusted_Connection=True;"));
cmd.Connection.Open();
SqlDataReader sales = cmd.ExecuteReader();
double[] y = new double[10];
string[] x = new string[10];
int i = 0;
if (sales.HasRows)
{
//define x and y values
while (sales.Read())
{
x[i] = sales["date"].ToString();
y[i] = Convert.ToDouble(sales["quantities"].ToString());
i++;
}
}
cmd.Connection.Close();
cmd.Connection.Dispose();
// Create series object
Series mySeries = new Series("MySeries");
targetChart.Series.Add(mySeries);
targetChart.DefineValue("x", x);
targetChart.DefineValue("y", y);
targetChart.DataBind();
targetChart.Draw();
catch (Exception ex)
{
Response.Write(ex.Message.ToString() + "\r\r" + ex.StackTrace.ToString() + "\r\r");
}
|
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
The front end .aspx page looks something like this:
<table width="600" border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#cccccc">
<tr>
<td width="100" align="right" bgcolor="#eeeeee" class="header1"> A simple chart using the Pubs DB:</td>
<td align="center" bgcolor="#FFFFFF">
<div align=center>
<cc1:WebChart id="targetChart" RenderingPrecision="20" width="515" height="328" runat="server" SaveImageOnDisk="False" WebChartImageType="Gif"></cc1:WebChart>
</div>
<asp:label ID="lblStatus" runat="server"></asp:label></td>
</tr>
</table>
|
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
The entire flow for the code behind page is as follows:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using ComponentArt.Charting;
public partial class Chart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
try
{
string sql_qry = @"
select cast(ord_date as varchar(3)) date,sum(qty) quantities from sales
group by ord_date
";
SqlCommand cmd = new SqlCommand(sql_qry, new SqlConnection("Server=localhost;Database=Pubs;Trusted_Connection=True;"));
cmd.Connection.Open();
SqlDataReader sales = cmd.ExecuteReader();
double[] y = new double[10];
string[] x = new string[10];
int i = 0;
if (sales.HasRows)
{
//define x and y values
while (sales.Read())
{
x[i] = sales["date"].ToString();
y[i] = Convert.ToDouble(sales["quantities"].ToString());
i++;
}
}
cmd.Connection.Close();
cmd.Connection.Dispose();
// Create series object
Series mySeries = new Series("MySeries");
targetChart.Series.Add(mySeries);
targetChart.DefineValue("x", x);
targetChart.DefineValue("y", y);
targetChart.DataBind();
targetChart.Draw();
}
catch (Exception ex)
{
Response.Write(ex.Message.ToString() + "\r\r" + ex.StackTrace.ToString() + "\r\r");
}
} |
Looking for the VB.NET 2005 Version? Click Here!
Looking for more ASP.NET Tutorials? Click Here!