Dundas Chart for ASP.NET
Creating a Chart Instance
See Also Send comments on this topic.
Getting Started > Creating a Chart Instance



Glossary Item Box

Overview

There are two ways to create an instance of the Chart control manually:

 

This topic discuss both of these techniques, and provides an overview of their inherent advantages, and disadvantages.

 

Creating a Chart Instance Using HTML Tags

This method involves using tags in a web form (.aspx page) to define a chart. It can be implemented using a text editor, but is most easily accomplished using Visual Studio .NET.

If you are using Visual Studio .NET, then the installation procedure will add the chart control to the Toolbox. This means that the chart control can be added to a web page, at design-time, either by double-clicking on the chart control icon, or clicking once on the chart control icon and drawing your chart onto the form using the left-mouse button. In either case, Visual Studio .NET will automatically generate the necessary HTML code to create the chart. You can inspect this code by switching from design view to HTML view.

Example

The following example demonstrates the code that Visual Studio creates for you.

HTML Copy Code
<%@ Register Assembly="DundasWebChart" Namespace="Dundas.Charting.WebControl"
TagPrefix="DCWC" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<DCWC:Chart ID="Chart1" runat="server">
<Legends>
<DCWC:Legend Name="Default">
</DCWC:Legend>
</Legends>
<Series>
<DCWC:Series Name="Default">
</DCWC:Series>
</Series>
<ChartAreas>
<DCWC:ChartArea Name="Default">
</DCWC:ChartArea>
</ChartAreas>
</DCWC:Chart>

</div>
</form>
</body>
</html>

            

 

The Register Directive, which is inserted at the top of the page above the tag, specifies several items including:

The tags used to instantiate the control, and set its properties, occur within the body of the document. The main tag is the <<strong>dcwc> tag, which is defined in the above mentioned Register Directive.

Example The following example demonstrates the code that Visual Studio creates for you.

When your aspx web page is executed at the server, the chart control will get instantiated, and will become available during the Page_Load event. Using this event is the easiest, and most common way to work with the chart at the client.

 

Note
When you use this method to create a chart, the code-behind pages can be used to handle numerous events. For simplicity and clarity, we have used the code-behind pages in most of the distributed samples.

Creating a Chart Instance Using Script

A chart can be created using inline script using the <% %> delimiters. The script is used within the body of the document, and determines the placement of the chart within your web page.

Advantages and Disadvantages

The advantage in using this method to create your chart is that your chart can be dynamically created only when it is needed. This is usually done using an If Then Else statement.

The disadvantage in using this method is that the Design Editor cannot be used to quickly, and easily set the chart's properties, since all properties must be set using server-side code.

Example

The following example demonstrates the process of creating a chart using a script.

Visual Basic Copy Code
<%@ Page language="vb"%>
<%@ Register TagPrefix="dcwc" Namespace="Dundas.Charting.WebControl" Assembly="DundasWebChart" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<body>
<%
Dim Chart1 as Chart = new Chart()
Chart1.Width = Unit.Pixel(360)
Chart1.Height = Unit.Pixel(260)
Chart1.Title = "My Chart"

' Add a chart area. Chart1.ChartAreas.Add("ChartArea 1")
' create a series. Chart12.Series.Add("Series 1")
' Add points to Series 1. Chart12.Series("Series 1").Points.AddY(5) Chart12.Series("Series 1").Points.AddY(8) Chart12.Series("Series 1").Points.AddY(12) Chart12.Series("Series 1").Points.AddY(6) Chart12.Series("Series 1").Points.AddY(9) Chart12.Series("Series 1").Points.AddY(4)
' Render the chart control. Chart12.Page = me Dim writer As HtmlTextWriter = new HtmlTextWriter(Page.Response.Output) Chart12.RenderControl(writer) %> </body> </HTML>
C# Copy Code
<%@ Page language="c#"%>
<%@ Register TagPrefix="dcwc" Namespace="Dundas.Charting.WebControl" Assembly="DundasWebChart" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<body>
<%
Chart Chart1 = new Chart();
Chart1.Width = 360;
Chart1.Height = 260;
Chart1.Title = "My Chart";

// Create a chart area. Chart1.ChartAreas.Add("ChartArea 1");
// Create a Series. Chart1.Series.Add("Series 1");
// Add points to Series 1. Chart1.Series["Series 1"].Points.AddY(5); Chart1.Series["Series 1"].Points.AddY(8); Chart1.Series["Series 1"].Points.AddY(12); Chart1.Series["Series 1"].Points.AddY(6); Chart1.Series["Series 1"].Points.AddY(9); Chart1.Series["Series 1"].Points.AddY(4);
// Render the chart control. Chart1.Page = this; HtmlTextWriter writer = new HtmlTextWriter(Page.Response.Output); Chart1.RenderControl(writer); %> </body> </HTML>

See Also

Copyright © 2001 - 2009 Dundas Data Visualization, Inc. and others.