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.
Bubble chart shows the chart in the form of bubbles, and on mouse hover it also shows a tooltip which 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
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 base lines 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 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>