Hi Friend, Today we will learn "How to Draw a Graph of Area Chart on asp.net web page".Here we will calculate the production of the Wheat and Rice in different years in India. This is very simple ,you have to just focus on below concept.I have already draw many charts ,you can learn it from below links as given below.
There are some properties of the AreaChartSeries as given below:-- How to Draw Line chart graph on asp.net web page.-
- How to Draw Bar chart graph on asp.net web page.
- How to Draw Pie chart graph on asp.net web page.
- How to Draw Bubble chart graph on asp.net web page.
Before implementing this concepts you have to Install Ajax Toolkit on your visual studio first.
- ChartHeight:- This is used to customize the height of the Chart.
- ChartWidth:- This is used to customize the Width of the chart.
- ChartTitle:- This is helpful to set the tile of the chart.
- CategoryAxis:-This is used to set the values for the category axis to create a line chart.
- ValueAxisLines:- This Property is helpful to set the interval size for the value axis line.
- ChartTitleColor:-This is helpful to set the font color of the chart title.
- ValueAxisLineColor:- This property is used to set the color of the value axis lines.
- CategoryAxisLinesColor:-This property is used to set the color of the Category axis lines.
- BaseLineColor:-This property is used to set the color of the Base Lines of the chart.
- Name:- This is required property,here we generally set the name of the area chart series.
- Data:- This is used to set the data values of the area chart.
- AreaColor :- This is used to set the font color of the area chart.
Step 1:-First open your visual studio-->File -->New-->Web Site-->Select ASP.NET Empty website-->OK-->Now open Solution Explorer Window-->Add a New page(Default.aspx)-->Open Toolbox-->Drag and Drop ajax ToolkitScriptManager control on the page.
Step 2:-Now open Source file-->Drag and drop AreaChart control from the Toolbox-->Sets their properties and sets the properties of AreaChartSeries also as given below:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Welcome to MY.NET Tutorials</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:AreaChart ID="AreaChart1" runat="server" ChartHeight="400" ChartWidth="600"
ChartTitle="Production of Wheatand Rice in India"
CategoriesAxis="2008,2009,2010,2011,2012,2013,2014,2015" ChartTitleColor="Red"
CategoryAxisLineColor="#00FFCC" ValueAxisLineColor="#FFCC66"
BaseLineColor="#660066">
<Series>
<asp:AreaChartSeries Name="Wheat"
AreaColor="Red" Data="100, 150, 210, 225, 180, 340,350,400" />
<asp:AreaChartSeries Name="Rice"
AreaColor="Blue" Data="59, 100, 150, 50,110, 70,200,250" />
</Series>
</asp:AreaChart>
</div>
</form>
</body>
</html>
For More...
- Learn Crystal Reports with examples
- Learn wpf with real life examples
- Learn MVC with examples
- Learn .NET Interview Questions and Answers
- Learn OOPS Concepts with real life examples
Download
Thank you for this nice tutorial! Here's a control that I have been using with much success: https://demos.shieldui.com/aspnet/bar-chart/basic-usage. It has every possible type of chart. It is an entire framework with lots of other functions.
ReplyDelete