The Chart controls enable you to create ASP.Net Web applications with simple, intuitive, and visually compelling charts for complex statistical or financial analysis.
In this tutorial you will learn how to use ASP.Net Chart control.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="VC.aspx.cs" Inherits="_VC" %> <%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>ASP.Net Chart Control</title> </head> <body> <form id="form1" runat="server"> <asp:Chart ID="Chart1" runat="server" BackColor="Transparent" IsMapAreaAttributesEncoded="True" TextAntiAliasingQuality="Normal" Width="400px"> <Titles> <asp:Title Text="Title of the Graph" Font="Arial, 9pt, style=Bold" /> </Titles> <Series> <asp:Series Name="Sales" XValueMember="year" YValueMembers="sales" Font="Arial" ChartType="Column" YValuesPerPoint="2"></asp:Series> </Series> <ChartAreas> <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" BackSecondaryColor="White" BackColor="64, 165, 191, 228" ShadowColor="Transparent" BackGradientStyle="TopBottom"> <Area3DStyle Rotation="10" Perspective="10" Inclination="15" IsRightAngleAxes="false" WallWidth="0" IsClustered="False" Enable3D="false"></Area3DStyle> <AxisY LineColor="64, 64, 64, 64"> <LabelStyle Font="Arial, 8.25pt, style=Bold" /> <MajorGrid LineColor="64, 64, 64, 64" /> </AxisY> <AxisX LineColor="64, 64, 64, 64"> <LabelStyle Font="Arial, 8.25pt, style=Bold" /> <MajorGrid LineColor="64, 64, 64, 64" /> </AxisX> </asp:ChartArea> </ChartAreas> </asp:Chart> </form> </body> </html>
Adding namespace in C# CodeBehind.
using System.Data;
In this tutorial we are bind the data from the page load event. You may bind the data from database as well.
protected void Page_Load(object sender, EventArgs e) { DataTable table = new DataTable(); table.Columns.Add("year", typeof(string)); table.Columns.Add("sales", typeof(string)); table.Rows.Add("2005", "100"); table.Rows.Add("2006", "150"); table.Rows.Add("2007", "183"); table.Rows.Add("2008", "127"); table.Rows.Add("2009", "210"); table.Rows.Add("2010", "250"); table.Rows.Add("2011", "275"); Chart1.DataSource = table; }