Friday, 20 November 2015

Linear Chart

           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>
 
 

ScriptManager:

 

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

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.