How to Display Area Chart Graph on Asp.Net Website easily

By
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.

Before implementing this concepts you have to Install Ajax Toolkit on your visual studio first.
There are some properties of Area chart graph as given below:-
  • 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.
There are some properties of the AreaChartSeries as given below:-
  • 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.
There are some steps to implement this whole concepts as given below:-
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>

Step 3:Now Run the Application(press F5)-->You will See following output a shown below:-

For More...
   Download Whole Attached file
            Download

1 comment:

  1. 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

Powered by Blogger.