BubbleChart - size of the bubbles

[Petar Raykov]

Hi,

i'm trying to create a chart with 3 bubbles - a green, red and orange one:

MVCChartModel simpleChart = new MVCChartModel();

ChartSeries series1, series2, series3;
simpleChart.Series.Clear();
series1 = new ChartSeries("hight", ChartSeriesType.Bubble);
series2 = new ChartSeries("medium", ChartSeriesType.Bubble);
series3 = new ChartSeries("low", ChartSeriesType.Bubble);

Color orange = Color.FromArgb(255, 200, 0);
Color red = Color.FromArgb(255, 5, 5);
Color green = Color.FromArgb(5, 200, 5);
Color white = Color.FromArgb(255, 255, 255);

series1.Points.Add(500, 356,50);
series1.Text = series1.Name;
series1.ConfigItems.BubbleItem.BubbleType = ChartBubbleType.Circle;

series1.Style.Border.Color = red;
series1.Style.Interior = new BrushInfo(GradientStyle.ForwardDiagonal, new BrushInfoColorArrayList() { red, white });

series2.Points.Add(100, 175, 20);
series2.Style.Border.Color = orange;
series2.Style.Interior = new BrushInfo(GradientStyle.ForwardDiagonal, new BrushInfoColorArrayList(){orange, white});

series3.Points.Add(500, 291, 40);
series3.Style.Border.Color = green;
series3.Style.Interior = new BrushInfo(GradientStyle.ForwardDiagonal, new BrushInfoColorArrayList() { green, white });


simpleChart.Series.Add(series1);
simpleChart.Series.Add(series2);
simpleChart.Series.Add(series3);

simpleChart.ShowLegend = true;
simpleChart.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
simpleChart.Skins = ChartModelSkins.Office2007Blue;
simpleChart.BorderAppearance.SkinStyle = ChartBorderSkinStyle.None;
simpleChart.Size = new Size(1000, 1000);
ViewData.Model = simpleChart;

return View();


The problem is the size of each bubble - each of them has the same size. For what can i use the 3th param form Add method of the Points item? e.g. series1.Points.Add(100,200,50)?

I thought this is the size? So the point with 40 should bigger than 20.

Kind regards
Petar Raykov

[Vijayabharathi K]

Hi Peter,

Thanks for using Syncfusion products.

If your intention is to differentiate the bubble size in chart, we suggest you to use these 3 points in single series. The bubble size calculated based on maximum and minimum size of 2nd Y value of points in series. Please refer the below code snippet to achieve this,

[C#]

ChartSeries series1;
simpleChart.Series.Clear();
series1 = new ChartSeries("Size",ChartSeriesType.Bubble);

Color orange = Color.FromArgb(255, 200, 0);
Color red = Color.FromArgb(255, 5, 5);
Color green = Color.FromArgb(5, 200, 5);
Color white = Color.FromArgb(255, 255, 255);

series1.Points.Add(500, 356, 50);
series1.Points.Add(100, 175, 20);
series1.Points.Add(500, 291, 40);

simpleChart.Series.Add(series1);

series1.Text = series1.Name;
series1.ConfigItems.BubbleItem.BubbleType = ChartBubbleType.Circle;


series1.Styles[0].Border.Color = red;
series1.Styles[0].Interior = new BrushInfo(GradientStyle.ForwardDiagonal, new BrushInfoColorArrayList() { red, white });

series1.Styles[1].Border.Color = orange;
series1.Styles[1].Interior = new BrushInfo(GradientStyle.ForwardDiagonal, new BrushInfoColorArrayList() { orange, white });

series1.Styles[2].Border.Color = green;
series1.Styles[2].Interior = new BrushInfo(GradientStyle.ForwardDiagonal, new BrushInfoColorArrayList() { green, white });


simpleChart.ShowLegend = true;
simpleChart.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
simpleChart.Skins = ChartModelSkins.Office2007Blue;
simpleChart.BorderAppearance.SkinStyle = ChartBorderSkinStyle.None;
simpleChart.Size = new Size(1000, 1000);
ViewData.Model = simpleChart;

You can find more information about this chart type in the online documentation link mentioned below

http://help.syncfusion.com/Ug_101/User%20Interface/ASP.NET%20MVC/Chart/documents/bubblechart.htm


Please let us know if you have any concern.

Regards,
Vijayabharathi