How to Display Bubble Chart on ASP.NET Website using Ajax Technology

By
Hi Friend, Today we will learn about Bubble chart concepts in ASP.NET.Here we will display the Students increased % marks in differnet subjects using Bubble chart.Previously i have already explained some charts also as given below:-
Before implementing this concepts you have to Install Ajax Toolkit on your visual studio first.
There are some properties of Bubble chart graph as given below:-
  • ChartHeight :- This is used to customize the Height of Bubble chart.
  • ChartWidth :- This is used to customize the Width of Bubble chart.
  • ChartTitle :-  This is used to set the title of the chart.
  • ChartTitleColor:-This is used to set the font color of the chart title.
  • BaseLineColor :-This is helpful to set the color of the base line of the chart.
  • XAxisLineColor:-This is used to set the color of the X Axis line of the chart. 
  • YAxisLineColor:-This is used to set the color of the Y Axis line of the chart. 
  • XAxisLine :- This is used to set the interval size for the X axis line of the chart.
  • YAxisLine :- This is used to set the interval size for the Y axis line of the chart.
  • BubbleSizes :-This is used to set the number of different sizes of the bubbles.
There are some BubbleChartValue Properties as given below:-
  • Category :- Here you have to specify the value.
  • X :-This is needed and provides the X Value for a particular BubbleChartValue.
  • Y :-This is needed and provides the Y Value for a particular BubbleChartValue.
  • Data :-This is needed and provides Data value for a Particular BubbleChartValue.
  • BubbleColor:- This is used to set the color of the Bubble for  a particular   BubbleChartValue.
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 BubbleChart control from the Toolbox-->Sets their properties and sets the properties of BubbleChartValue 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 Tutorial</title>
</head>
<body>
    <form id="form1" runat="server">
    <div class="style1" style="height: 504px">
        <strong>How to display Bubble Chart on asp.net Website<br />
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <br />
    <asp:BubbleChart ID="BubbleChart1" runat="server" ChartHeight="300" ChartWidth="450" 
    ChartTitle="Increased Passed student in Different Subjects" ChartTitleColor="#0E426C" 
    XAxisLineColor="#D08AD9" YAxisLineColor="#D08AD9" BaseLineColor="#A156AB"
    YAxisLines="5" XAxisLines="5" BubbleSizes="6"
    XAxisLabel="% of Failed students" YAxisLabel="Total Students"
    BubbleLabel="(increase passed %)">
    <BubbleChartValues>
    <asp:BubbleChartValue Category="Math" 
    X="8" Y="100000" Data="20" BubbleColor="#FF6666" />
    <asp:BubbleChartValue Category="English" 
    X="10" Y="110000" Data="25" BubbleColor="#0066FF" />
    <asp:BubbleChartValue Category="History" 
    X="16" Y="150000" Data="35" BubbleColor="#FF3300" />
    <asp:BubbleChartValue Category="Geography" 
    X="18" Y="805000" Data="45" BubbleColor="#FF33CC" />
    <asp:BubbleChartValue Category="Sanscrit" 
    X="22" Y="906000" Data="55" BubbleColor="#333333" />
    <asp:BubbleChartValue Category="Science" 
    X="26" Y="917000" Data="65" BubbleColor="#990000" />
    <asp:BubbleChartValue Category="Hindi" 
    X="35" Y="998000" Data="75" BubbleColor="#FF9900" />
</BubbleChartValues>
    </asp:BubbleChart>
        </strong></div>
    </form>   
</body>
</html>

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

For More...
  1. c# asp tutorial
  2. c#.net for beginners
  3. tutorial asp.net mvc
  4. asp web application tutorial
  5. sql c# tutorial
  6. free asp.net  and crystal reports tutorial
  7. c#.net Interview Questions and answers
Download Whole Attached File
         Download

0 comments:

Post a comment

Powered by Blogger.