Using Microsoft Chart Control for ASP.NET 3.5

Waqas Anwar
09 September 2009
114956 Views

Displaying Charts or Graphs has always been an important feature for reporting and both windows and web applications reports can be made productive for top management by visualizing data with the help of charts. Since the introduction of ASP.NET first version developers realized that there is no built in Chart control and they have to buy and use third party charting controls for their web applications. Many companies start providing high quality and feature rich commercial charting controls to developers. Finally ASP.NET developers received good news from Microsoft when a FREE ASP.NET Chart control is introduced and made available to developers as a separated download with hundreds of charts samples. In this tutorial I will show you how you can use ASP.NET chart control in your web applications.

Microsoft Chart Control for ASP.NET 3.5 allows you to build all type of charts including Bar, Line, Pie, Column, Area, Point, Range, Circular, Data Distribution, Accumulation and Combination charts. It also supports many great features such as 2D and 3D rendering, feature to combine multiple chart types, support of client side JavaScript and AJAX and so on. Following figure shows the samples of just few of the charts you can build with the help of Microsoft Chart Control. I took these screen shorts from the samples included with the Chart control and you can browse and check more than hundred samples to see all the capabilities of Microsoft Chart Control for ASP.NET.

Microsoft ASP.NET Chart Control Samples

If you are impressed by the above sample charts and wants to use this control in your ASP.NET web application you need to keep following requirements in mind before actually start working with chart control.

Microsoft .NET Framework 3.5 Service Pack 1 is required to use the Microsoft Chart Control for ASP.NET so If your system is still running .NET Framework 3.5 you have to download and install .NET Framework 3.5 Service Pack 1.

Microsoft Chart Control for ASP.NET is not part of .NET Framework 3.5 so you have to download it separately along with the highly recommended chart samples. You can download both of these things from the following links.


Chart Control Assemblies Download Link

http://www.microsoft.com/downloads/details.aspx?FamilyID=130f7986-bf49-4fe5-9ca8-910ae6ea442c&DisplayLang=en

Chart Control Samples Download Link

http://code.msdn.microsoft.com/mschart

Once you have installed the chart control on your machine, you are ready to use the Chart control in your application. Keep in mind that when you will install Chart control on your system it will put all the chart control related assemblies in the following location by default.

C:\Program Files\Microsoft Chart Controls\Assemblies

To start this tutorial and to see the chart control in action creates a new ASP.NET website in Visual Studio. To make chart control available in your website, you simply need to add the following chart related .NET assemblies in your website bin directory so simply copy these two assemblies from the above location to your project bin directory.

System.Web.DataVisualization.dll
System.Web.DataVisualization.Design.dll

ASP.NET Chart Control Assemblies

If you want to use Microsoft Chart control by simply dragging and dropping on the web page, I will recommend you to add Chart control to the toolbox. For doing this, Right Click in toolbox click Choose Items option and browse and select the System.Web.DataVisualization.dll.  You will see the following Chart control icon appearing in your toolbox.

ASP.NET Chart Control on Toolbox

Drag the chart control from the toolbox to the page and you will see the design time appearance of the Chart control as shown in the following figure. In this tutorial I want to show you column and pie chart examples so you can drag two chart controls instances from the toolbox.

ASP.NET Chart Control at Design Time

For the purpose of this tutorial, I have created a sample database with the following two tables in it. I have also added some sample categories and products in these two tables.


Database Structure


To bind data with Chart control I am writing a simple SQL query with INNER JOIN to count the number of products in each category in the database. The result of the query is available as DataTable object from which I can easily create DataView object by using DefaultView property of DataTable class. The reason I need to create the DataView object is that the Chart control has several data binding related methods which requires DataView object to be passed. You can see one such method DataBindXY used in the code below.

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
   {
      LoadChartData();
   }
}


private void LoadChartData()
{
   string constr = @"Server=TestServer; Database=SampleDatabase; uid=sa; pwd=123;";
   string query = "SELECT c.CategoryID, c.CategoryName, " +
   " Count(p.UnitPrice) AS 'TotalProducts' " +
   " FROM Categories c " +
   " INNER JOIN Products p ON c.CategoryID = p.CategoryID " +
   " GROUP BY c.CategoryID, c.CategoryName";

   SqlDataAdapter da = new SqlDataAdapter(query, constr);
   DataTable table = new DataTable();
   da.Fill(table);

   DataView dv = table.DefaultView;

   Chart1.Series["Series1"].Points.DataBindXY(dv, "CategoryName", dv, "TotalProducts");
   Chart2.Series["Series1"].Points.DataBindXY(dv, "CategoryName", dv, "TotalProducts"); 

}


The DataBindXY method used in the above code accepts four parameters; the first parameter is the reference of the data source you want to use for displaying values on X axis of the chart. The second parameter is the name of the field you want to display on X axis. The third parameter is the data source you want to use for displaying values on Y axis and the last parameter is the name of the field you want to display on Y axis. In the code for I have data bound both of the chart controls we dragged on the page for this tutorial.

Finally we need to configure some of the properties of the Chart control according to the requirements. You can do this from the properties window or directly in the HTML source view. The Microsoft Chart control supports thousands of properties and one can very easily write a complete book on this single control. To learn and use them quickly I will recommend you to check the chart samples available with the Chart control. Following is the HTML markup of both of the chart controls I used in this tutorial and you are free to play with any of the property.

<asp:Chart ID="Chart1" runat="server" BorderlineColor="Black"
   BorderlineDashStyle="Solid" BackColor="#B6D6EC" BackGradientStyle="TopBottom"
   BackSecondaryColor="White" Height="250px" Width="350px">
  
   <Titles>
      <asp:Title Name="Title1" Text="Microsoft ASP.NET Chart Control"
         Alignment="TopCenter" Font="Verdana, 12pt, style=Bold">
      </asp:Title>
   </Titles>

   <Series>
      <asp:Series Name="Series1" CustomProperties="DrawingStyle=Cylinder,
         MaxPixelPointWidth=50" ShadowOffset="2" IsValueShownAsLabel="True">
      </asp:Series>
   </Series>

   <ChartAreas>
      <asp:ChartArea Name="ChartArea1" BackGradientStyle="TopBottom"
         BackSecondaryColor="#B6D6EC" BorderDashStyle="Solid" BorderWidth="2">
         <AxisX>
            <MajorGrid Enabled="False" />
         </AxisX>
      </asp:ChartArea>
   </ChartAreas>

</asp:Chart>

<asp:Chart ID="Chart2" runat="server" BorderlineColor="Black"
   BorderlineDashStyle="Solid" BackColor="#B6D6EC" BackGradientStyle="TopBottom"
   BackSecondaryColor="White" Height="250px" Width="350px">

   <Titles>
      <asp:Title Name="Title1" Text="Microsoft ASP.NET Chart Control"
         Alignment="TopCenter" Font="Verdana, 12pt, style=Bold">
      </asp:Title>
   </Titles>
  
   <Series>
      <asp:Series Name="Series1" CustomProperties="DrawingStyle=Pie,
         PieDrawingStyle=Concave, MaxPixelPointWidth=50" ShadowOffset="2"
         ChartType="Pie" IsValueShownAsLabel="True">
      </asp:Series>
   </Series>
  
   <ChartAreas>
      <asp:ChartArea Name="ChartArea1" BackGradientStyle="TopBottom"
         BackSecondaryColor="#B6D6EC" BorderDashStyle="Solid" BorderWidth="2">
         <AxisX>
            <MajorGrid Enabled="False" />
         </AxisX>
      </asp:ChartArea>
   </ChartAreas>

</asp:Chart>


If you have implemented everything correctly in this tutorial, you will see the following two charts rendered in your browser window.

Microsoft Chart Control for ASP.NET 3.5