Friday 20 November 2015

Bubbled Chart

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


 
 

Bubbled-Chart in ASP.net AJAX :



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

Bubbled-Chart Description:



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

Bubbled-Chart Properties:


These all are basic properties need to set for Bubbled 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.
  • XAxisLineColor: This will give you X-Axis line color.
  • YAxisLineColor: This will give you Y-Axis line color.
  • XAxisLabel: This will display the X-Axis Text.
  • YAxisLabel: This will display the Y-Axis Text.
  • BubbleLabel: This will display the tooltip of the value.
  • BubbleSizes:set the number of different sizes of the bubbles. 


BubbleChartValue properties:


  • Category - This property is required.
  • X - This is required and provides X value for a particular BubbleChartValue.
  • Y - This is required and provides Y value for a particular BubbleChartValue.
  • Data - This is required and provides Data value for a particular BubbleChartValue.
  • BubbleColor - This property enables you to set the color of the bubble for a particular BubbleChartValue.
  

Source Code: 


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

<%@ 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 runat="server" EnablePartialRendering="true"></asp:ToolkitScriptManager> 
    <div>
    
        <asp:BubbleChart ID="BubbleChart1" runat="server" ChartHeight="400" ChartWidth="600"
                         ChartTitle="Monthly Expenses" XAxisLineColor="#D08AD9" BubbleSizes="5"
                         YAxisLineColor="#D08AD9" XAxisLabel="Month wise Result" YAxisLabel="Amount spend in that particular month"
                         BubbleLabel="( Growth in % )" >
            <BubbleChartValues>
                <asp:BubbleChartValue Category="Home Expencies" Data="2" X="1" Y="12000" BubbleColor="#6C1E83" />
                <asp:BubbleChartValue Category="Home Expencies" Data="3" X="2" Y="18000" BubbleColor="#D08AD9" />
                <asp:BubbleChartValue Category="Home Expencies" Data="4" X="3" Y="22000" BubbleColor="#990033" />
                <asp:BubbleChartValue Category="Home Expencies" Data="1" X="4" Y="2000" BubbleColor="#6586A7" />
                <asp:BubbleChartValue Category="Home Expencies" Data="6" X="5" Y="52000" BubbleColor="#0E426C" />
                <asp:BubbleChartValue Category="Home Expencies" Data="5" X="6" Y="32000" BubbleColor="#A156AB" />
                <asp:BubbleChartValue Category="Home Expencies" Data="7" X="7" Y="10000" BubbleColor="#A156AB" />
            </BubbleChartValues> 
        </asp:BubbleChart>
    
    </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