Creating Charts With Microsoft Chart Controls

There is no shortage of charting controls for the Microsoft .NET framework and while many do a great job, they may be overkill and costly to any project. If you’re not familiar with the Microsoft Chart Controls then you may find that you’re in for a pleasant surprise for two reasons;

  1. They are free
  2. Quickly render charts

Quick Walkthrough

My purpose here is simple and to the point. I want to demonstrate just how easy it is to return a chart to the end user. In this case I will be using an XML data source rather than a database which is typical in most cases.

Line Chart

line chart

ASPX:

<asp:Chart ID="Line" runat="server" Width="600px" Height="400px">
<Series>
<asp:Series Name="Series1" ChartType="Line">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>

Code Behind:

internal void BindCharts()
{
string dataPath = MapPath(".") + "\App_Data\books.xml";

DataSet ds = new DataSet();
ds.ReadXml(dataPath);

DataTable dt = ds.Tables[0];
DataView dataView = new DataView(dt);

Line.Series[0].Points.DataBindXY(dataView, "title", dataView, "price");
}

Take note that the real magic happens on “DataBindXY” which represents that data point to display and in this case is title and price. As a bonus, if I add the following to the “BindCharts” method then I also have a stacked bar and column chart.

StackedBar.Series[0].Points.DataBindXY(dataView, "title", dataView, "price");
Column.Series[0].Points.DataBindXY(dataView, "title", dataView, "price");

Stacked Bar Chart

stacked bar chart

Column Chart

column chart

Conclusion

Keep in mind that these examples are basic in nature and serve as an introduction. To really see first hand the power and options available be sure to check out the links in the references.