AJAX Control Toolkit Tutorial: Bubble Chart

Bubble Chart Control enables you to render bubble charts from one or more series of values. This control is compatible with any browser which supports SVG such as IE 9 and greater.

The bubble chart shows the chart in the form of bubbles, and on mouse hover it also shows a tooltip that is customizable.

Let’s see its initial configuration and output.

<ajaxToolkit:BubbleChart ID="BubbleChart1" runat="server" ChartHeight="300" ChartWidth="450" ChartTitle="Industry share in Market" ChartTitleColor="#0E426C" XAxisLineColor="#D08AD9" YAxisLineColor="#D08AD9" BaseLineColor="#A156AB" YAxisLines="6" XAxisLines="6" BubbleSizes="5" XAxisLabel="Market share of Industry" YAxisLabel="Revenue of Industry" BubbleLabel="(Growth in %)">
  
    <BubbleChartValues>
  
        <ajaxToolkit:BubbleChartValue Category="Software" X="25" Y="90000" Data="7" BubbleColor="#6C1E83" />
  
        <ajaxToolkit:BubbleChartValue Category="Foods" X="35" Y="150000" Data="5" BubbleColor="#D08AD9" />
  
        <ajaxToolkit:BubbleChartValue Category="Health" X="32" Y="140000" Data="6" BubbleColor="#990033" />
  
        <ajaxToolkit:BubbleChartValue Category="Manufacuring" X="22" Y="84000" Data="4" BubbleColor="#6586A7" />
  
        <ajaxToolkit:BubbleChartValue Category="Travel" X="8" Y="26000" Data="7" BubbleColor="#0E426C" />
  
        <ajaxToolkit:BubbleChartValue Category="Entertainment" X="28" Y="97000" Data="9" BubbleColor="#A156AB" />
  
        <ajaxToolkit:BubbleChartValue Category="Construction" X="15" Y="58000" Data="5" BubbleColor="#A156AB" />
  
    </BubbleChartValues>
  
</ajaxToolkit:BubbleChart>

Output

AJAX bubble chart

Let’s start to explore its properties.

Properties

ChartHeight: This property enables you to customize the height of the chart.
ChartHeight="300"
ChartWidth: This property enables you to customize the width of the chart.
ChartWidth="450"
ChartTitle: This property enables you to set the title of the chart.
ChartTitle="Industry share in Market"
Theme: This property enables you to control the appearance of the bar chart with a Cascading Style Sheet file.
ChartTitleColor: This property enables you to set the font color of the chart title.
ChartTitleColor="Green"
xAxisLineColor: This property enables you to set the color of the X-axis lines of the chart.
XAxisLineColor="Red"
YAxisLineColor: This property enables you to set the color of the Y-axis lines of the chart.
YAxisLineColor="Green"
BaseLineColor: This property enables you to set the color of the baselines of the chart.
BaseLineColor="Orange"
YAxisLines: This property enables you to set the interval size for the Y-axis line of the chart.
YAxisLines="15"
XAxisLines: This property enables you to set the interval size for the X-axis line of the chart.
XAxisLines="8"
BubbleSizes: This property enables you to set the number of different sizes of the bubbles.
BubbleSizes="7"
TooltipBackgroundColor: This property enables you to set the background color of the tooltip box.
TooltipBackgroundColor="Black"
TooltipFontColor: This property enables you to set the font color of the tooltip box.
TooltipFontColor="Red"
TooltipBorderColor: This property enables you to set the border color of the tooltip box.
TooltipBorderColor="Orange"
XAxisLabel: This property enables you to set the text/label to describe what data is at the X-Axis.
XAxisLabel="Market share of Industry"
YAxisLabel: This property enables you to set the text/label to describe what data is at the Y-Axis.
YAxisLabel="Revenue of Industry"
BubbleLabel: This property enables you to set the text/label that will be shown in the tooltip and describe the bubble value.
BubbleLabel=" (Growth in %)"

BubbleChartValue properties

<BubbleChartValues>
  
    <ajaxToolkit:BubbleChartValue Category="Software" X="25" Y="90000" Data="7" BubbleColor="#6C1E83" />
  
    <ajaxToolkit:BubbleChartValue Category="Foods" X="35" Y="150000" Data="5" BubbleColor="#D08AD9" />
  
    <ajaxToolkit:BubbleChartValue Category="Health" X="32" Y="140000" Data="6" BubbleColor="#990033" />
  
    <ajaxToolkit:BubbleChartValue Category="Manufacuring" X="22" Y="84000" Data="4" BubbleColor="#6586A7" />
  
    <ajaxToolkit:BubbleChartValue Category="Travel" X="8" Y="26000" Data="7" BubbleColor="#0E426C" />
  
    <ajaxToolkit:BubbleChartValue Category="Entertainment" X="28" Y="97000" Data="9" BubbleColor="#A156AB" />
  
    <ajaxToolkit:BubbleChartValue Category="Construction" X="15" Y="58000" Data="5" BubbleColor="#A156AB" />
  
</BubbleChartValues>

Category: This property is required.
Category="Software"
X: This is required and provides X value for a particular BubbleChartValue.
X="25"
Y: This is required and provides a Y value for a particular BubbleChartValue.
Y="90000"
Data: This is required and provides Data value for a particular BubbleChartValue.
Data="7"
BubbleColor: This property enables you to set the color of the bubble for a particular BubbleChartValue.
BubbleColor="Green"

Complete Code

<ajaxToolkit:BubbleChart ID="BubbleChart1" runat="server" ChartHeight="300" ChartWidth="450" ChartTitle="Industry share in Market" ChartTitleColor="Green" XAxisLineColor="Red" YAxisLineColor="Green" BaseLineColor="Orange" YAxisLines="15" XAxisLines="8" BubbleSizes="5" TooltipBackgroundColor="Green" TooltipBorderColor="Orange" TooltipFontColor="Red" XAxisLabel="Market share of Industry" YAxisLabel="Revenue of Industry" BubbleLabel="(Growth in %)">
  
    <BubbleChartValues>
  
        <ajaxToolkit:BubbleChartValue Category="Software" X="25" Y="90000" Data="7" BubbleColor="Green" />
  
        <ajaxToolkit:BubbleChartValue Category="Foods" X="35" Y="150000" Data="5" BubbleColor="#D08AD9" />
  
        <ajaxToolkit:BubbleChartValue Category="Health" X="32" Y="140000" Data="6" BubbleColor="#990033" />
  
        <ajaxToolkit:BubbleChartValue Category="Manufacuring" X="22" Y="84000" Data="4" BubbleColor="#6586A7" />
  
        <ajaxToolkit:BubbleChartValue Category="Travel" X="8" Y="26000" Data="7" BubbleColor="#0E426C" />
  
        <ajaxToolkit:BubbleChartValue Category="Entertainment" X="28" Y="97000" Data="9" BubbleColor="#A156AB" />
  
        <ajaxToolkit:BubbleChartValue Category="Construction" X="15" Y="58000" Data="5" BubbleColor="#A156AB" />
  
    </BubbleChartValues>
  
</ajaxToolkit:BubbleChart>