Bar Charts - ASP.NET Charting Components Free From Microsoft

Microsoft released Free Microsoft Chart Controls that allow one to add bar, column, pie, area, etc. charts to your ASP.NET Web Pages. I am still tinkering with these controls and thought I would share a quick snippet of displaying a bar chart. You can see a similar example creating a pie chart in ASP.NET.

ASP.NET Bar Charts

Although the bar chart needs to be made aesthetically nicer :), here is the end result that has been reduced in size:

Bar Chart ASP.NET

The code to create the Bar ( actually Column ) Chart on the website is as follows:

Chart1.Width = 500;
 
// Display a Title
Chart1.Titles.Add("Monthly Expenses $");
 
// Display Legend
Chart1.Legends.Add("Default").Title = "Year";
 
// Activate 3D Style
Chart1.ChartAreas[0].Area3DStyle.Enable3D = true;
Chart1.ChartAreas[0].Area3DStyle.IsRightAngleAxes = false;
Chart1.ChartAreas[0].Area3DStyle.Inclination = 30;
Chart1.ChartAreas[0].Area3DStyle.Rotation = 30;
Chart1.ChartAreas[0].Area3DStyle.IsClustered = false;
Chart1.ChartAreas[0].Area3DStyle.Perspective = 10;
 
// Add Two Column-Type Series
Chart1.Series.Add("2007");
Chart1.Series.Add("2008");
 
Chart1.Series[0].ChartType = SeriesChartType.Column;
Chart1.Series[0]["PointWidth"] = "0.4";
 
Chart1.Series[1].ChartType = SeriesChartType.Column;
Chart1.Series[1]["PointWidth"] = "0.4";
 
// Display Data
string[] xValues = { "Jan", "Feb", "Mar", "Apr", "May",
                       "Jun", "Jul", "Aug", "Sep",
                       "Oct", "Nov", "Dec" };
int[] yValues2007 = { 836, 945, 732, 795, 824, 1032,
                        1145, 981, 990, 811, 764, 900 };
 
Chart1.Series[1].Points.DataBindXY(xValues, yValues2007);
 
int[] yValues2008 = { 941, 987, 834, 911, 1023, 1123,
                        1345, 1021, 1293, 1111, 832, 1300 };
 
Chart1.Series[0].Points.DataBindXY(xValues, yValues2008);

Conclusion

You can download the samples that come with the Microsoft Chart Controls for more information. They can be a little verbose so hopefully the code above gives you a feel for the bare minimum in many cases.

posted on Monday, December 08, 2008 12:08 PM