Ajax contorl toolkit BubbleChart Demonstration

The BubbleChart control enables you to render a bubble chart from one or more series of values. This control is compatible with any browser which supports SVG including Internet Explorer 9 and above.

The control above is initialized with this code. The italic properties are optional:

<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>
    

• ChartHeight - This property enables you to customize the height of the the chart.
• ChartWidth - This property enables you to customize the width of the chart.
• ChartTitle - This property enables you to set the title of the chart.
• 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.
• xAxisLineColor - This property enables you to set the color of the X axis lines of the chart.
• YAxisLineColor - This property enables you to set the color of the Y axis lines of the chart.
• BaseLineColor - This property enables you to set the color of the base lines of the chart.
• YAxisLines - This property enables you to set the interval size for the Y axis line of the chart.
• XAxisLines - This property enables you to set the interval size for the X axis line of the chart.
• BubbleSizes - This property enables you to set the number of different sizes of the bubbles.
• TooltipBackgroundColor - This property enables you to set the background color of the tooltip box.
• TooltipFontColor - This property enables you to set the font color of the tooltip box.
• TooltipBorderColor - This property enables you to set the border color of the tooltip box.
• XAxisLabel - This property enables you to set the text/label to describe what data is at XAxis.
• YAxisLabel - This property enables you to set the text/label to describe what data is at YAxis.
• BubbleLabel - This property enables you to set the text/label that will be shown in the tooltip and describe about bubble value.

• Category - This property is required.
• X - This is required and provides X value for a particular BubbleChartValue.
• Y - This is required and provides Y value for a particular BubbleChartValue.
• Data - This is required and provides Data value for a particular BubbleChartValue.
• BubbleColor - This property enables you to set the color of the bubble for a particular BubbleChartValue.