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

On 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
Subscribe through email and get Free updates in inbox
Please like and share this post with your friends...

You May Also Like...

0 comments:

Post a Comment

Powered by Blogger.