This tutorial will help you how to install the MS Chart extension and create a column graph with MS Chart in ASP.NET 3.5 (C#).
Note: MS Chart will work with ASP.NET 3.5 and above only.
Download and install: Microsoft Chart Controls for Microsoft .NET Framework 3.5
http://www.microsoft.com/downloads/details.aspx?FamilyID=130f7986-bf49-4fe5-9ca8-910ae6ea442c&displaylang=en
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.dl
Also, we need Web.config entry reference-:
<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>
Now we can start, create a new website. Drag and Drop the MS Chart from the toolbox onto webpage.
<asp:Chart ID="Chart2" runat="server" Width="800px" Height="300px"></asp:Chart>
An example how to assign ChartArea name, create Series, Legends, ToolTip etc.. on codebehind.
Table and sql statement are used from my sample DB.
String connString = ConfigurationManager.ConnectionStrings["LocalSqlServer"].ToString();
String sSQL = "select distinct subject, marks FROM tblStudentMarks order by 2";
DataTable result = new DataTable();
using (SqlConnection conn = new SqlConnection(connString))
{
using (SqlCommand cmd = new SqlCommand())
{
conn.Open();
cmd.CommandText = sSQL;
cmd.Connection = conn;
SqlDataReader dr;
dr = cmd.ExecuteReader(System.Data.CommandBehavior.CloseConnection);
result.Load(dr);
dr = null;
}
}
String sSeries = "";
//Assaigning ChartArea Name
Chart2.ChartAreas.Add("chtArea");
//Binding to Legends
Chart2.Legends.Add("chtArea");
LegendItem legendItem = new LegendItem();
for (int i = 0; i < result.Rows.Count; i++)
{
sSeries = result.Rows[i][0].ToString().ToUpper();
if(Chart2.Series.FindByName(sSeries) == null)
{
//Creating Unique Series
Chart2.Series.Add(sSeries);
legendItem.Name = sSeries;
//Below some properties... of Legends
legendItem.BorderWidth = 4;
legendItem.ShadowOffset = 1;
legendItem.Color = Color.FromName(Chart2.Series[sSeries].Color.Name.ToString());
legendItem = new LegendItem();
}
Chart2.Series[sSeries].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Column;
//Chart2.Series[sSeries].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Bar;
//Binding UserCounts
Chart2.Series[sSeries].Points.AddY(Convert.ToDouble(result.Rows[i][1].ToString()));
//Series properties
Chart2.Series[sSeries].IsVisibleInLegend = true;
Chart2.Series[sSeries].IsValueShownAsLabel = true;
Chart2.Series[sSeries].ToolTip = "Data Point Y Value: #VALY{G}";
}
result = null;
//Axis properties
Chart2.ChartAreas[0].AxisX.Title = "User Roles";
Chart2.ChartAreas[0].AxisX.TitleFont = new System.Drawing.Font("Verdana", 10, System.Drawing.FontStyle.Bold);
Chart2.ChartAreas[0].AxisY.Title = "User Count";
Chart2.ChartAreas[0].AxisY.TitleFont = new System.Drawing.Font("Verdana", 10, System.Drawing.FontStyle.Bold);
Chart2.ChartAreas[0].AxisY2.LineColor = Color.Black;
Chart2.ChartAreas[0].BorderDashStyle = ChartDashStyle.Solid;
Chart2.ChartAreas[0].BorderWidth = 1;
Chart2.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
Chart2.BorderlineColor = System.Drawing.Color.FromArgb(26, 59, 105);
Chart2.BorderlineWidth = 2;
Chart2.BackColor = Color.AliceBlue;
//Legends properties
for (int j = 0; j < Chart2.Legends.Count; j++)
{
Chart2.Legends[j].BorderColor = Color.Black;
Chart2.Legends[j].BorderWidth = 1;
Chart2.Legends[j].BorderDashStyle = ChartDashStyle.Solid;
Chart2.Legends[j].ShadowOffset = 1;
Chart2.Legends[j].LegendStyle = LegendStyle.Table;
Chart2.Legends[j].TableStyle = LegendTableStyle.Auto;
Chart2.Legends[j].Docking = Docking.Bottom;
Chart2.Legends[j].Alignment = StringAlignment.Center;
Chart2.Legends[j].Enabled = true;
Chart2.Legends[j].Font = new System.Drawing.Font("Verdana", 8, System.Drawing.FontStyle.Bold);
Chart2.Legends[j].AutoFitMinFontSize = 5;
}