Friday 20 November 2015

Bar Chart

            In this article I'm trying to explain how to work with Bar-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. 

 
 

Bar-Chart in ASP.net AJAX :



            In this article I'm trying to explain how to work with Bar-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" %>
 

Bar-Chart Description:



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

Bar-Chart Properties:


These all are basic properties need to set for Bar 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 Bar chart.
  • ChartType  : There are 4 types of categories 
  1. column : Default type is column.
  2. Bar
  3. StackedBar
  4. StackedColumn
  

BarChartSeries 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.
  • BarColor- This property enables you to set the color of segment for a particular BarChartSeries. 
 

Source Code: 


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

<%@ 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 ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="true"></asp:ToolkitScriptManager>
    <div>
    Column Chart Type: (Default)

        <asp:BarChart ID="BarChart1" runat="server" CategoriesAxis="2010,2011,2012,2013,2014" ChartTitle="INDIA Vs Pakistan Winning Percentage in year wise" 
                      ChartWidth="600" ChartHeight="400" >
            <Series>
                <asp:BarChartSeries Name="INDIA" Data="40,25,50,35,70" BarColor="#3366FF" />
                <asp:BarChartSeries Name="Pakistan" Data="20,45,30,55,70" BarColor="#003300" />
            </Series>
        </asp:BarChart>
    
    Bar Chart Type:

        <asp:BarChart ID="BarChart2" runat="server" CategoriesAxis="2010,2011,2012,2013,2014" ChartTitle="INDIA Vs Pakistan Winning Percentage in year wise" 
                      ChartWidth="600" ChartHeight="400" ChartType="Bar">
            <Series>
                <asp:BarChartSeries Name="INDIA" Data="40,25,50,35,70" BarColor="#3366FF" />
                <asp:BarChartSeries Name="Pakistan" Data="20,45,30,55,70" BarColor="#003300" />
            </Series>
        </asp:BarChart>

    StackedBar Chart Type:

        <asp:BarChart ID="BarChart3" runat="server" CategoriesAxis="2010,2011,2012,2013,2014" ChartTitle="INDIA Vs Pakistan Winning Percentage in year wise" 
                      ChartWidth="600" ChartHeight="400" ChartType="StackedBar" >
            <Series>
                <asp:BarChartSeries Name="INDIA" Data="40,25,50,35,70" BarColor="#3366FF" />
                <asp:BarChartSeries Name="Pakistan" Data="20,45,30,55,70" BarColor="#003300" />
            </Series>
        </asp:BarChart>
    
    StackedColumn Chart Type:

        <asp:BarChart ID="BarChart4" runat="server" CategoriesAxis="2010,2011,2012,2013,2014" ChartTitle="INDIA Vs Pakistan Winning Percentage in year wise" 
                      ChartWidth="600" ChartHeight="400" ChartType="StackedColumn">
            <Series>
                <asp:BarChartSeries Name="INDIA" Data="40,25,50,35,70" BarColor="#3366FF" />
                <asp:BarChartSeries Name="Pakistan" Data="20,45,30,55,70" BarColor="#003300" />
            </Series>
        </asp:BarChart>
    </div>
    </form>
</body>
</html>
 
 

ScriptManager:

 

</ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server" ID="ScriptManager1" >
 
Without wrote this line in source code it's 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.
 

 

No comments:

Post a Comment