Reader Level:
ARTICLE

MSChart - How to create a column chart or graph

Posted by Suthish Nair Articles | ASP.NET Programming August 18, 2010
Updated Version with samples code attached..This article will help you in creating a column chart or graph using MSChart and how to use MSChart extension with 3.5 framework.
  • 0
  • 0
  • 20360
Download Files:
 


This article will help you in creating a column chart or graph using MSChart and how to use MSChart extensions with 3.5 framework.

ColumnChart1.jpg


Note: MSChart will work with ASP.NET 3.5 and above only.

Download and install: Microsoft Chart Controls for Microsoft .NET Framework 3.5.


Adding Chart Control to your toolbox:- Right-click > Choose Items > Program Files > Microsoft Chart Controls > System.Web.DataVisualization.dll. 

Adding Reference-: Program Files > Microsoft Chart Controls > System.Web.DataVisualization.dll. 

Following entries will get updated in web.config.
 
  
 <system.web>
    <httpHandlers>
      <add path="ChartImg.axd" verb="GET,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
    </httpHandlers>
  </system.web>
  <system.webServer>
    <handlers>
      <add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    </handlers>
  </system.webServer>

Following sample article using

  MVS used: 2008/2010
  DB used: Northwind

Now drag and drop asp:Chart control from toolbox to your web form.
 

 <asp:Chart ID="Chart1" runat="server" Width="1200px" Height="500px"></asp:Chart>

Two Methods using in sample.  

BindRecords() used to fetch records from DB and plotting the graph, which called on Page_Load.

SetChartAreaFeatures() used to set ChartArea properties.

Sample Codes uploaded, please download and comment.

COMMENT USING

Trending up