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.
Unfortunately, activation email could not send to your email. Please try again.

Create Bubble Chart serie from code behind

Thread ID:

Created:

Updated:

Platform:

Replies:

127961 Dec 21,2016 03:01 PM Dec 23,2016 05:46 AM ASP.NET Web Forms 3
loading
Tags: Chart
JLTejeda
Asked On December 21, 2016 03:01 PM

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 [Syncfusion]
Replied On December 22, 2016 01:35 AM

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. 
  
Thanks, 
Dharani. 


JLTejeda
Replied On December 22, 2016 09:06 PM

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 [Syncfusion]
Replied On December 23, 2016 05:46 AM

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. 
  
Thanks, 
Dharani. 


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.

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.

;