Create Bubble Chart serie from code behind

[JLTejeda]

I want to create a bubble chart.

The series mustbeadded fromCScode.

The ASP.NETpage show an empty graph butboth axisare ajustedaccording the points valuesin the serie.

I dont knowhow toput the size and color for the points

Series series = new Series();
series.Type = Syncfusion.JavaScript.DataVisualization.SeriesType.Bubble;
List data = new List();
data.Add(new XYDataPoint("Point 1 Test", "01-02-2010", 2340, "#C4C24A", 1.0));
data.Add(new XYDataPoint("Point 2 Test", "06-01-2013", 1580, "#D4C24A", 2.0));

series.DataSource = data;
series.XName = "X";
series.YName = "Y";
this.AniGChart1.Series.Add(series);

[Serializable]
public class XYDataPoint
{
public string Text;
public string X;
public double Y;
public string Fill;
public double Size;

public XYDataPoint()
{ }
public XYDataPoint(string texto, string X0, double Y0,string Fill0, double Size0)
{
this.Text = texto;
this.X = X0;
this.Y = Y0;
this.Size = Size0;
this.Fill = Fill0;
}
}

[Dharanidharan Dharmasivam]

Hi JLTejeda, 

Thanks for using Syncfusion product. We have analyzed your queries. 

Query 1: The ASP.NETpage show an empty graph butboth axisare ajustedaccording the points valuesin the serie. 

Response: After assigning value to dataSource property you need to bind the datasource using this.DataBind(), then only the data source will get bind to chart. Kindly find the code snippet below. 

 

[CS] 

    Series series = new Series(); 

    series.Type = Syncfusion.JavaScript.DataVisualization.SeriesType.Bubble; 

    List<XYDataPoint> data = new List<XYDataPoint>(); 

    data.Add(new XYDataPoint("Point 1 Test", "01-02-2010", 2340, "#C4C24A", 1.0)); 

    data.Add(new XYDataPoint("Point 2 Test", "06-01-2013", 1580, "#D4C24A", 2.0)); 

    series.DataSource = data; 

    series.XName = "X"; 

    series.YName = "Y"; 

    series.PointColorMappingName = "Fill"; 

    series.Size = "Size"; 

    this.Chart1.Series.Add(series); 

    this.DataBind(); 

 

 

Query 2: I dont knowhow toput the size and color for the points. 

Response: You can map fill and size to series from data source using PointColorMappingName and Size properties respectively. We have prepared a sample with the provided code snippet. 

 

[CS] 

        Series series = new Series(); 

        //... 

        series.PointColorMappingName = "Fill"; 

        series.Size = "Size"; 

        //... 

Screenshot: 

 

For your reference we have attached the sample. Kindly find the sample from below location. 

Sample Link: http://www.syncfusion.com/downloads/support/forum/127961/ze/bubble_chart-1300868839  

  

Thanks, 

Dharani. 

[JLTejeda]

Thanks a lot.
I also want to include in the tooltip for every point in the serie, the Text field from XYDataPoint.

            series.Tooltip.Visible = true;
            series.Tooltip.Format = "#series.text# <br/> #point.x# : #point.y# (kg)";

[Dharanidharan Dharmasivam]

Hi JLTejeda, 

  

Thanks for your update. 

  

Your requirement can be achieved using TextMappingName in dataLabel of markers property. We have prepared a sample with respect to your requirement. Kindly find the code snippet below. 

  

            Series series = new Series(); 

            series.Type = Syncfusion.JavaScript.DataVisualization.SeriesType.Bubble; 

            List<XYDataPoint> data = new List<XYDataPoint>(); 

            data.Add(new XYDataPoint("Point 1 Test", "01-02-2010", 2340, "#C4C24A", 1.0)); 

            data.Add(new XYDataPoint("Point 2 Test", "06-01-2013", 1580, "#D4C24A", 2.0)); 

            series.DataSource = data; 

            //...  

            series.Tooltip.Visible = true; 

            //Mapping text from dataSource 

            series.Marker.DataLabel.TextMappingName = "Text"; 

            series.Tooltip.Format = "#point.text# <br/> #point.x# : #point.y# (kg)"; 

            this.Chart1.Series.Add(series); 

            this.DataBind(); 

  

Screenshot: 

d 

  

Also, if you wish to display series name in the tooltip, you can use the below code snippet to achieve the requirement. 

  

  

series.Tooltip.Format = "#series.name# <br/> #point.x# : #point.y# (kg)"; 

  

  

For your reference we have attached the sample. Kindly find the sample from below location. 

Sample Link: http://www.syncfusion.com/downloads/support/forum/127961/ze/bubble_chart-766808844  

  

Thanks, 

Dharani.