Add Bubble Chart to asp.net web page guide, rich CSharp sample code, setting title, orientation, data series, axis, appearance

How to Build Bubble Chart using C#

Home > How to > Bubble Chart

Bubble chart consists of a series of data points which may be displayed in different shapes, like circle or five-pointed star. In general, the bubble chart will use two XValue/XValue2, and YValue/YValue2 pairs to demonstrate each data object. What's more, the bubble size is in proportion to the data value it presents.

And this page will guide you to create a simple bubble chart in html using C# code with our ASP.NET AJAX SDK. Before doing the modifications using C# code, you need to drag an AjaxPanel item to aspx page and put a chart control from toolbox to that AjaxPanel.

Basic Settings

The basic settings are mainly used to control the general appearance of bubble chart graphics.

C# Code for Setting Chart Type

You can set chart type to web bubble chart with either of following two methods.


KaxChart1.SeriesSet[0].View = ChartSeriesView.Bubble;


KaxChart1.DefaultSeriesView = ChartSeriesView.Bubble;

C# Code for Customizing Chart Skin

Rich chart skin options are supported. And you can use customized template to make your bubble chart display specially.

KaxChart1.Skin = "KetticStyle";

C# Code for Writing Chart Title

Here we offer C# code for adding title to bubble chart, you can modify the chart title font, color, size, position and rotation. If needed, you can view more settings for chart title at setting chart title element in c#.


KaxChart1.Caption.Text = "Bubble  Chart";

C# Code for Defining Chart Orientation

Users are able to display the bubble chart either vertically or horizontally.


KaxChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal;
KaxChart1.SeriesOrientation = CartSeriesOrientation.Vertical;

Bubble Settings

The settings in this part are mainly used for adding and displaying various data series in bubble chart.

Add Chart Data Series Using C# Code

Using the bubble chart of ASP.NET AJAX, users can easily add one or more data series into bubble chart. And each data category will have a bubble group to display its values. The legend label is also necessary in the bubble chart to descript the data item information. In following example, we will show you how to add two data series into bubble chart. To view more guidance, please follow this link to set chart series element using c#.


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);
            ChartSeriesPoint Point3 = new ChartSeriesPoint();
            Point3.Name = "Point 3";
            Point3.Value= 13;
            Point3.Value2= 15;
            this.KaxChart1.SeriesSet[0].Points.Add(Point3);
            ChartSeriesPoint Point4 = new ChartSeriesPoint();
            Point4.Name = "Point 4";
            Point4.Value= 14;
            Point4.Value2= 10;
            this.KaxChart1.SeriesSet[0].Points.Add(Point4);
            ChartSeriesPoint Point5 = new ChartSeriesPoint();
            Point5.Name = "Point 5";
            Point5.Value= 15;
            Point5.Value2= 17;
            this.KaxChart1.SeriesSet[0].Points.Add(Point5);

Now two data categories have been successfully added to the bubble chart. And in the real application, we may often need to differentiate each data series with different colors so that readers can easily compare the values among different data series. And this performance can be done with the help of following sample C# demo.

code formatted by http://manoli.net/csharpformat/ -->


KaxChart1.SeriesSet[0].StyleSet.Fill.PrimaryColor = System.Drawing.ColorTranslator.FromHtml("#009933");

Define Chart Axis Using C# Code

The axis has two dimensions, which are x axis and y axis. To better present the values of each data series, we need to customize the scaling and spacing values of the axis based on our own data source. If the scaling is too large, the bubble chart will be too small to be read. Here we offer sample C# code for defining and customizing both x axis and y axis settings. If needed, you can view more settings for chart axis at chart axis at set chart axis element with c#.


KaxChart1.Diagram.AxisX.MaxValue = 10;
KaxChart1.Diagram.AxisX.MinValue = 1;
KaxChart1.Diagram.AxisX.Step = 1;

KaxChart1.Diagram.AxisY.MaxValue = 20;
KaxChart1.Diagram.AxisY.Step = 2;
KaxChart1.Diagram.AxisY.AxisMode = ChartAxisYMode.Extended;

Now the configuration of aspx.cs file for creating a bubble chart is completed. If you want to view the output of above configurations, please run our bubble chart online demo.

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control

Overview Getting Started

Chart Element

Diagram Series Axes Legend Caption Tick Data Grid

Chart Type

Bar Chart Point Chart Line Chart Pie Chart Area Chart Gantt Chart Bubble Chart Bezier Chart Spline Chart Spline Area Chart Candle Chart Chart With Stacked Full Stacked Chart

Features

Automatic Layout Automatic Text-wrapping Scrolling Empty Values Scale Break Multiline Labels Wise Labels Marking Areas Multiple Types Interactive Drill Down Shadow Edting

Data Binding

Array Data List Data Database Data XML Data

Chart Style

Chart Skin ASP.NET AJAX Grid UI Control