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.
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.
| Imports System.Web.UI.WebControls.Webparts |
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> |
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!
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 |
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> |
The entire flow for the code behind page is as follows:
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.
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!