In this article, we will discover how to leverage the power of the AJAX Control Toolkit with our comprehensive tutorial series. In this eleventh installment, delve into the intricacies of creating Bubble Charts, a dynamic data visualization tool.
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>
Let’s start to explore its 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>
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>
Printing in C# Made Easy