This tutorial will show you how to display graphics charts using ASP.NET 2.0, ComponentArt's Web.UI control, and VB.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.
| Imports System.Web.UI.WebControls.Webparts |
Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!
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" %>
|
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>
|
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!
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
Dim sql_qry As String = _
"select cast(ord_date as varchar(3)) date,sum(qty) quantities from sales" & _
" group by ord_date"
Dim cmd As SqlCommand = New SqlCommand(sql_qry, New SqlConnection("Server=localhost;Database=Pubs;Trusted_Connection=True;"))
cmd.Connection.Open()
Dim sales As SqlDataReader = cmd.ExecuteReader()
Dim y As Double() = New Double(9) {}
Dim x As String() = New String(9) {}
Dim i As Integer = 0
If sales.HasRows Then
'define x and y values
Do While sales.Read()
x(i) = sales("date").ToString()
y(i) = Convert.ToDouble(sales("quantities").ToString())
i += 1
Loop
End If
cmd.Connection.Close()
cmd.Connection.Dispose()
' Create series object
Dim mySeries As Series = New Series("MySeries")
targetChart.Series.Add(mySeries)
targetChart.DefineValue("x", x)
targetChart.DefineValue("y", y)
targetChart.DataBind()
targetChart.Draw() Response.Write(ex.Message.ToString() & Constants.vbCr + Constants.vbCr + ex.StackTrace.ToString() & Constants.vbCr + Constants.vbCr)
End Try
|
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
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>
|
We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.
The entire flow for the code behind page is as follows:
Imports ComponentArt.Charting
Imports System.Data.SqlClient
Partial Class Chart
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Try
Dim sql_qry As String = _
"select cast(ord_date as varchar(3)) date,sum(qty) quantities from sales" & _
" group by ord_date"
Dim cmd As SqlCommand = New SqlCommand(sql_qry, New SqlConnection("Server=localhost;Database=Pubs;Trusted_Connection=True;"))
cmd.Connection.Open()
Dim sales As SqlDataReader = cmd.ExecuteReader()
Dim y As Double() = New Double(9) {}
Dim x As String() = New String(9) {}
Dim i As Integer = 0
If sales.HasRows Then
'define x and y values
Do While sales.Read()
x(i) = sales("date").ToString()
y(i) = Convert.ToDouble(sales("quantities").ToString())
i += 1
Loop
End If
cmd.Connection.Close()
cmd.Connection.Dispose()
' Create series object
Dim mySeries As Series = New Series("MySeries")
targetChart.Series.Add(mySeries)
targetChart.DefineValue("x", x)
targetChart.DefineValue("y", y)
targetChart.DataBind()
targetChart.Draw()
Catch ex As Exception
Response.Write(ex.Message.ToString() & Constants.vbCr + Constants.vbCr + ex.StackTrace.ToString() & Constants.vbCr + Constants.vbCr)
End Try
End Sub |
Looking for the C#.NET 2005 Version? Click Here!
Looking for more ASP.NET Tutorials? Click Here!