Saturday 5 January 2013

Creating Charts using Chart Control in Asp.net 4.0

Microsoft Visual Studio Introduced Chart control in framework 4.0 This control have different types charts like Pie,Gant,Spline,Bubble..etc.

Follow below steps create chart using chartcontrol.

 1. Create Asp.net c# web application in visual studio 2010 and add new web page chart.aspx.

2. Open toolbox list out the chart control in data category. Drag and drop the control in chart.aspx page.   When a chart control is added into the page, such a register info will be added to the same page.
   
           <%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="chrt" %>

3. Add series and chartType to chat control which equals to column and chartarea property with the value as chartarea1.

      <asp:Chart Id="chart1" runat="server" height="400px" width="500px">
          <Series>
                 <asp:Series Name="Series1" ChartType="Column" ChartArea="ChartArea1"></asp:Series>
                 <asp:Series Name="Series2" ChartType="Column" ChartArea="ChartArea2"></asp:Series>
          </Series>
         <ChartAreas>
            <asp:ChartArea Name="ChartArea1">
            </asp:ChartArea>
          </ChartAreas>
    </asp:Chart>

4.Create data source for the chat control via datatable in the behind code . In this step please directly follow the metho createdatatale in chart.aspx.cs as this is not what we are talking about in this project.

5 Bind the datasource to the chart control.
           
                chart1.series[0].YValuemembers="Volume1";
                chart1.series[1].YValueMembers="Volume2";
                chart1. series[0].XValueMember="Date";

6. Build the solution and run.
 
Reference links are:
      http://msdn.microsoft.com/en-us/library/dd489231(VS.100).aspx
   http://www.asp.net/learn/aspnet-4-quick-hit-videos/video-8770.aspx


No comments:

Post a Comment