.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Sandeep Singh

Home >> Articles >> C# >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Creating a column graph with MS Chart in ASP.NET 3.5

Posted By:Suthish Nair       Posted Date: August 29, 2010    Points: 25    Category: C#    URL: http://www.dotnetspark.com  

This article will help you how to install the MS Chart extension and create a column graph with MS Chart in ASP.NET 3.5 (C#).

This article will help you in installing the MS Chart extension and creating 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

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-: 


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())
        cmd.CommandText = sSQL;
        cmd.Connection = conn;
        SqlDataReader dr;
        dr = cmd.ExecuteReader(System.Data.CommandBehavior.CloseConnection);
        dr = null;
String sSeries = "";
//Assaigning ChartArea Name
//Binding to Legends
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
        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
    //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;

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend