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.

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.

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.