Linear-Chart in ASP.net AJAX


In this article I'm trying to explain how to work with Linear-Chart Control in ASP.net AJAX. This will give you the user friendly output. This article will help you for beginners those who are start to work with this.

Linear-Chart in ASP.net AJAX :



In this article I'm trying to explain how to work with Linear-Chart Control in ASP.net AJAX. This will give you the user friendly output. This article will help you for beginners those who are start to work with this.

AJAX:




For this we must download AJAX control Toolkit dll and add reference to the project, by right clicking the project and choose assembly reference to add that.
After added the dll add below lines of code in source code.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>



Linear-Chart Description:



The LineChart control enables you to render a line chart from one or more series of values.  This is comfortable with any browser.

Linear-Chart Properties:


These all are basic properties need to set for Linear Chart.
Chart Height: This will help you to fix the height of the chart
Chart Width :This will help you to fix the width of the chart.
Chart Title: This will help you to fix the Title of the Chart.
CategoryAxis  : Need to provide set of values to create linear chart.
ChartType  : There are 2 types of categories
1) Basic : Default type is basic.
2) Stacked


LineChartSeries Properties:


Name: This will help you to provide name of the particular chart value.
Data: This will help you to provide data for that Chart value.
LineColor- This property enables you to set the color of segment for a particular LineChartSeries..

Source Code:



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LinearChart.aspx.cs" Inherits="AJAX_LinearChart" %>

<%@ 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></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager EnablePartialRendering="true" runat="server" ID="ScriptManager1"></asp:ToolkitScriptManager>
<div>
Basic Chart Type:
<asp:LineChart ID="LineChart1" runat="server" ChartHeight="300" ChartWidth="500" ChartTitle="INDIA Vs USA Production"
CategoriesAxis="2009,2010,2011,2012,2013" ChartType="Basic">
<Series>
<asp:LineChartSeries Name="INDIA" Data="25,30,70,40,50" LineColor="#6C1E83" />
<asp:LineChartSeries Name="USA" Data="55,50,40,20,50" LineColor="#6C1E83" />
</Series>
</asp:LineChart>
Stacked Chart Type:
<asp:LineChart ID="LineChart2" runat="server" ChartHeight="300" ChartWidth="500" ChartTitle="INDIA Vs USA Production"
CategoriesAxis="2009,2010,2011,2012,2013" ChartType="Stacked">
<Series>
<asp:LineChartSeries Name="INDIA" Data="25,30,70,40,50" LineColor="#6C1E83" />
<asp:LineChartSeries Name="USA" Data="55,50,40,20,50" LineColor="#6C1E83" />
</Series>
</asp:LineChart>
</div>
</form>
</body>
</html>


Script Manager : 

</ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server" ID="ScriptManager1" >

Without writing the above line in source code it throws the server error, to overcome this issue we just add above lines of code under form tag.

SM

Output:



output

Conclusion:


This article will help you for fresher those who are perform to design chart application and those who are beginners to perform this.


Article by naveensanagasetti
I hope you enjoyed to read my article, If you have any queries out of this then please post your comments.

Follow naveensanagasetti or read 139 articles authored by naveensanagasetti

Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: