Microsoft .NET: ASP.NET 3.5 Chart Control

Microsoft recently released a cool new ASP.NET server control - <asp:chart /> - that can be used for free with ASP.NET 3.5 to enable rich browser-based charting scenarios:

Important download links:

Microsoft Chart Controls for Microsoft .NET Framework 3.5
This installs the ASP.NET and Windows Forms Controls. The assemblies will be installed in the GAC as well as in the "%Program File%\Microsoft Chart Controls\Assemblies" folder. If you build an application using the controls, your setup and deployment should add MSChart.exe installer as a pre-requisite.
Language Pack for Microsoft Chart Controls This installs the language pack for the Chart Controls. It is available in 23 .NET Framework languages.
Microsoft Chart Controls Add-on for Visual Studio 2008 This installs the IntelliSense file in English for the controls and also adds the controls to the toolbox for ASP.NET and Windows Forms.
Documentation for Microsoft Chart Controls

Samples to get your development started are available on MSDN (http://code.msdn.microsoft.com/mschart). Furthermore, if you have questions or suggestions, or just want to share your excitement, please visit our newly created MSDN forum for Windows Forms and ASP.NET Chart Controls.

<asp:chart /> supports a rich assortment of chart options - including pie, area, range, point, circular, accumulation, data distribution, ajax interactive, doughnut, and more. You can statically declare chart data within the control declaration, or alternatively use data-binding to populate it dynamically. At runtime the server control generates an image (for example a .PNG file) that is referenced from the client HTML of the page using a <img/> element output by the <asp:chart/> control. The server control supports the ability to cache the chart image, as well as save it on disk for persistent scenarios. It does not require any other server software to be installed, and will work with any standard ASP.NET page.

Implement the Control Into Your Page

Once installed the <asp:chart/> control shows up under the "Data" tab on the Toolbox, and can be easily declared on any ASP.NET page as a standard server control: but if you are using Visual Web Developer Express, you will need to add it manually. This can be done by right-clicking on the Data section header, and choosing Add Items. as show below.

From there, select the System.Web.UI.DataVisualization.Charting flavour of Chart, and click OK.

That's it. The Chart icon should appear in your toolbox, ready to be dragged onto the Forms Designer. Once you do, you are presented with a default vertical bar chart.

If you drag the chart control into the design-surface, Visual Studio adds some settings to the web.config. This will be done automatically so the following is just an explanation of the changes:

Web.config Changes

1) ChartImage Settings

At the node <appSettings>, the following entry will be created:

This is the configuration of the temporary storage, where the generated files should be placed at. Please be aware of the fact that the storage will use a large amount of space, depending on how many charts
will be generated.

2) ChartImage.axd Handler

At <system.web><httpHandlers>, the following entry will be added:

The chartimage.axd is the main-component of the chart-control. The handler will be called for each generated image.

3) Control-definition

In the node <system.web><pages><controls>, the tag-definition will be added:

This will add the tag-support, that we can use a <asp:chart /> tag in our aspx pages.

4) Reference to the DataVisualization Assembly

At the end, a reference to the DataVisualization assembly will be added at <system.web><compilation><assemblies>:

Default Chart-element in aspx Page

In the aspx page, where you dragged the control in, Visual Studio will add the default chart-control to the code:

<asp:Chart ID="Chart1" runat="server">

<asp:Series Name="Series1"></asp:Series>

</Series>

<asp:ChartArea Name="ChartArea1"> </asp:ChartArea>

</ChartAreas>

</asp:Chart>

Charting Quickstart

Before we begin using the chart control, I would like to explain the properties "Series" and "ChartAreas":

Series :

The Series collection contains the data-points for one or more data-series. Basically for each line in the chart (consisting of multiple data-points), one series of data is required.
Each series can have its own ChartType. Additionally, each series can be assigned to any ChartArea where each series can also have its own rendering-properties (for example colors, labels, etc.).

ChartAreas :

The ChartArea collection can have one or more configurations which controls the rendering of a chart.
Important: There must be at least one ChartArea definition that the rendering will be executed!

Now we know that we have to add a <asp:Series> in the property <series><asp:ChartArea> at the <ChartAreas> defined, otherwise we would get just a white picture. which contains our datapoints. Also we have to be sure that there is at least one

After changing the chart-control code to the following:

<asp:Chart ID="cTestChart" runat="server">

<asp:Series Name="Testing" YValueType="Int32">

<asp:DataPoint AxisLabel="Test 1" YValues="10" />

<asp:DataPoint AxisLabel="Test 2" YValues="20" />

<asp:DataPoint AxisLabel="Test 3" YValues="30" />

<asp:DataPoint AxisLabel="Test 4" YValues="40" />

</Points>

</asp:Series>

</Series>

<asp:ChartArea Name="ChartArea1"> </asp:ChartArea>

</ChartAreas>

</asp:Chart>

We will get this output in the rendered output page:

So we successfully created our first chart!

Deploying MS Chart Controls:(Production Server)
"MSChart.exe" setup should be used to deploy Microsoft Chart controls and
Changes needed in the web.config as shown below.

From

<add key="ChartImageHandler" value="storage=file;timeout=20;" />

Reference Links : http://www.4guysfromrolla.com/articles/072209-1.aspx

Microsoft .NET

01 February 2012

ASP.NET 3.5 Chart Control

No comments:

Post a Comment