ASP.NET Chart Control or not straining to draw graphics on the Web

Drawing beautiful graphs has always been a favorite activity of managers and analysts and a headache for programmers who either had to write code to draw images themselves or punch through the manual purchase licenses for numerous components developed by Microsoft partners. However, for most tasks, the most basic functionality for creating graphs is enough, so Microsoft has developed controls for drawing graphs for ASP.NET and WinForms. In this small article I will show an example of creating a graph in ASP.NET.

The process of creating graphics in an ASP.NET web application in Visual Studio 2010

1. In the WebForms application, a Chart control is added to the page, while Visual Studio automatically writes the necessary configuration to the web.config:

The handler responsible for generating images ChartImg.axd:
')
<httpHandlers>
<add path = "ChartImg.axd" verb = "GET, HEAD, POST" type = "System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version = 4.0.0.0, Culture = neutral, PublicKeyToken = 31bf3856ad364e35 "
validate = "false" />
</ httpHandlers>

Register the assembly and namespace in which the Chart control is located:

<pages>
<controls>
<add tagPrefix = "asp" namespace = "System.Web.UI.DataVisualization.Charting" assembly = "System.Web.DataVisualization, Version = 4.0.0.0, Culture = neutral, PublicKeyToken = 31bf3856ad364e35" />
</ controls>
</ pages>

Chart control configuration options:

<appSettings>
<add key = "ChartImageHandler" value = "storage = file; timeout = 20; dir = c: \ TempImageFiles \;" />
</ appSettings>

In addition, the developer is registered in the configuration section of the web server, which is used by Internet Information Services.

<handlers>
<remove name = "ChartImageHandler" />
<add name = "ChartImageHandler" preCondition = "integratedMode" verb = "GET, HEAD, POST" path = "ChartImg.axd" type = "System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version = 4.0.0.0, Culture = neutral, PublicKeyToken = 31bf3856ad364e35 "/>
</ handlers>

2. Now you can customize the Chart control itself - the Smart Tag is available for this, or you can use the properties window (F4 key).



3. Data can be associated with a control in code, or you can use a declarative link with a data source (DataSource). For example, add an ObjectDataSource and bind the Chart control to it (first add a DataSource, then link to a Chart, then set the data for the X and Y axes in the Start Tag or Chart properties).

We get the following page markup:

<asp: Chart ID = "Chart1" runat = "server" DataSourceID = "ObjectDataSource1">
<Series>
<asp: Series Name = "Series1" XValueMember = "X" YValueMembers = "Y">
</ asp: Series>
</ Series>
<ChartAreas>
<asp: ChartArea Name = "ChartArea1">
</ asp: ChartArea>
</ ChartAreas>
</ asp: Chart>
<asp: ObjectDataSource ID = "ObjectDataSource1" runat = "server" SelectMethod = "GetData" TypeName = "WebApplication1.DataSource"> </ asp: ObjectDataSource>

And the corresponding picture:



Playing the settings you can get to change the type of graphics, add a legend, data descriptions and headers, and more.



Directly in the code, the image can be saved to a file for further use (for example, transfer to a remote service, insert into a document, etc.) by calling the Chart1.SaveImage (fileName) method; Of course, the application must have sufficient rights to scroll to the directory in which the image will be saved.

Many different examples created back to the previous release of Microsoft Charting Controls for .NET 3.5 can be viewed at http://code.msdn.microsoft.com/mschart

Make graphics with a few mouse clicks - it is fashionable.