We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

BubbleChart - size of the bubbles

Thread ID:

Created:

Updated:

Platform:

Replies:

103091 Mar 29,2012 04:05 PM UTC Mar 30,2012 11:59 AM UTC ASP.NET MVC (Classic) 1
loading
Tags: Chart
Petar Raykov
Asked On March 29, 2012 04:05 PM UTC

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 [Syncfusion]
Replied On March 30, 2012 11:59 AM UTC

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





CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;