Bubble Charts guide, UI Control for ASP.NET AJAX, C#, VB.NET, setting bubble properties, aspx sample code

Bubble Charts in ASP.NET AJAX

Home > How to > Bubble Chart

Information to Bubble Chart

Similar to point chart, bubble chart is also able to show correlations among multiple data series. But different from point chart, each point in the bubble chart may be displayed in various shapes, like circle or oval. Besides, the bubble chart owns the ability to compare the relationship among data objects in 3 numeric-data dimensions, which are the X-axis data, the X-axis value and the data presented by the bubble size. Therefore the bubble chart is often used in scientific data modeling or financial data analysis.

And in this online tutorial, we will put the focus on how to create a simple bubble chart in ASP.NET web application.
generate bubble chart image in asp.net ajax using c#

generate bubble chart image in asp.net ajax using c#

How to Build a Simple Bubble Chart

Before following the instructions below, please make sure that you have installed .NET Framework 3.5 or later versions, that you have created a web form in the visual studio and that you have assembled all the necessary ASP.NET AJAX dlls into your ASP.NET project. Besides, to achieve the AJAX effect, you also need to drag an AjaxPanel item into the aspx page and put a chart control from the toolbox into that AjaxPanel.

After you finish above preparing works, you may use the sample codes below for creating a bubble chart in your ASP.NET application.

Basic Settings

Users can finish these basic settings for creating a bubble chart within the property window. And here we offer detailed guidance for users to set the chart type, chart title, chart orientation and chart background color in ASP.NET application.

Chart Type: Set the Chart DefaultSeriesView property or ChartSeries.View to Bubble.
Chart Title: Set the ChartCaption.Text property to "Bubble chart". Support title position, rotation, font text and color to modify.
Chart Orientation: Set the SeriesOrientation property to Vertical. If needed, you can also set the bubble chart orientation to Horizontal.
Chart Skin: Set the Skin Property to "KetticStyleLite". Of course, there are much more available options supported for bubble chart skin. With rich template bubble chart, you can make a good visualization on your web bubble chart.

Here we provide some C# example for changing the basic bubble chart settings.


KaxChart1.SeriesSet[0].View = ChartSeriesView.Bubble;
KaxChart1.Skin = "KetticStyle";
KaxChart1.Caption.Text = "Bubble  Chart";
KaxChart1.SeriesOrientation = CartSeriesOrientation.Vertical;

Bubble Settings

This section will show you how to add multiple data series into above created bubble chart and how to customize the number of items and their values within each data series. Besides, you can define the legend label to descript each data item.

In the following sample code, we will try to add two different data series into bubble chart. Here each data category has five items. And you can freely add more items to the data series using the property ChartSeries.Points.

Note: the YValue in following asp.net code represents the start point of each data item and the YValue2 stands for the end point of that data item.


 <kettic:ChartSeries Name="Series 1" View="Bubble">
                            <Points>
<kettic:ChartSeriesPoint  Value="2"  Value2="3"   Name="Point 1">
                            </kettic:ChartSeriesPoint>
                            <kettic:ChartSeriesPoint  Value="6"  Value2="12"  Name="Point 2">
                            </kettic:ChartSeriesPoint>
                            <kettic:ChartSeriesPoint  Value="13"  Value2="15"  Name="Point 3">
                            </kettic:ChartSeriesPoint>
                            <kettic:ChartSeriesPoint  Value="14"  Value2="10"  Name="Point 4">
                            </kettic:ChartSeriesPoint>
                            <kettic:ChartSeriesPoint  Value="15"  Value2="17"  Name="Point 5">
                            </kettic:ChartSeriesPoint>
                            </Points>
                        </kettic:ChartSeries>

Be different from other chart type, bubble chart data series have some special setting, please see the C# Code below.


            ChartSeriesPoint Point1 = new ChartSeriesPoint();
            Point1.Name = "Point 1";
            Point1.Value= 2;
            Point1.Value2= 3;
            this.KaxChart1.SeriesSet[0].Points.Add(Point1);
            ChartSeriesPoint Point2 = new ChartSeriesPoint();
            Point2.Name = "Point 2";
            Point2.Value= 6;
            Point2.Value2= 12;
            this.KaxChart1.SeriesSet[0].Points.Add(Point2);

Of course, to better display the comparisons between different data series, you can choose to demonstrate each data category with different bar colors by using ChartSeries.StyleSet.Fill.PrimaryColor.

More settings of Series to see Chart Series Element.
And you can view Bubble chart online demo on this page.

Information to Bubble Chart

How to Build a Simple Bubble Chart

Basic Settings

Bubble Settings

Related Bubble Chart Creating Links