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. Image for the cookie policy date

How to use Custom BindableProperty to Display Multiple Series in Listview

Hi,

I am trying to display Multiple Series in a ListView, My requirement is that each cell's  seriescollections may vary  in number. How can I achieve this? I've shared the code which I have done so far.

I hope I've stated my query clearly.

Chart Code:

                       var source = new ObservableCollection<MyChartData> ();

source.Add (new MyChartData {Name = "A"});
source.Add (new MyChartData {Name = "B"});
source.Add (new MyChartData {Name = "C"});
source.Add (new MyChartData {Name = "D"});
source.Add (new MyChartData {Name = "E"});

var listView = new ListView (ListViewCachingStrategy.RecycleElement) {
ItemsSource = source,
RowHeight = 200,
HasUnevenRows = true,
ItemTemplate = new DataTemplate(()=>{
var chart = new CustomChart{
HeightRequest = 200,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
PrimaryAxis = new CategoryAxis(),
SecondaryAxis = new NumericalAxis(),
};

chart.SetBinding(CustomChart.TitleProperty,"Name");
chart.SetBinding(CustomChart.DataSourceProperty,"BarData");

return new ViewCell{
View = chart,
};
}),
};

Chart Data:

public class MyChartData{
public string Name {get; set;}
public ObservableCollection<ObservableCollection<ChartDataPoint>> BarData {get; set;}

public MyChartData(){

BarData = new ObservableCollection<ObservableCollection<ChartDataPoint>> ();
ObservableCollection<ChartDataPoint> Data1 = new ObservableCollection<ChartDataPoint> ();
ObservableCollection<ChartDataPoint> Data2 = new ObservableCollection<ChartDataPoint> ();

Random r = new Random();

Data1.Add(new ChartDataPoint("Jan",r.Next(1,100)));
Data1.Add(new ChartDataPoint("Feb",r.Next(1,100)));
Data1.Add(new ChartDataPoint("Mar",r.Next(1,100)));
Data1.Add(new ChartDataPoint("Apr",r.Next(1,100)));
Data1.Add(new ChartDataPoint("May",r.Next(1,100)));

Data2.Add(new ChartDataPoint("Jan",r.Next(1,100)));
Data2.Add(new ChartDataPoint("Feb",r.Next(1,100)));
Data2.Add(new ChartDataPoint("Mar",r.Next(1,100)));
Data2.Add(new ChartDataPoint("Apr",r.Next(1,100)));
Data2.Add(new ChartDataPoint("May",r.Next(1,100)));

BarData.Add (Data1);
BarData.Add (Data2);
}
}

Custom Chart Code:

public class CustomChart : SfChart
{
public CustomChart ()
{

}

/// <summary>
/// The SeriesCollection property
/// </summary>
public static readonly BindableProperty DataSourceProperty = BindableProperty.Create("DataSource", typeof(IEnumerable<IEnumerable<object>>), typeof(CustomChart), default(IEnumerable<IEnumerable<object>>));

/// <summary>
/// Gets or sets the DataSource
/// </summary>
public IEnumerable<IEnumerable<object>> DataSource
{
get { return (IEnumerable<IEnumerable<object>>)GetValue(DataSourceProperty); }
set { 
if (value != null) {
base.Series.Clear ();
foreach (var s in value) {
var barSeries = new ColumnSeries{ ItemsSource = s};
base.Series.Add (barSeries);
}
}
SetValue(DataSourceProperty, value);
}
}
}

Thanks,
Femil Shajin C


9 Replies

ME Manivannan Elangovan Syncfusion Team January 23, 2016 12:30 PM UTC

Hi Femil,

Thanks for using Syncfusion products.

We are able to achieve your requirement by collection property called Series which is available in SfChart.

We have prepared a sample and it can be downloaded from the following location.

Sample: ChartInListView 

Regards,
Manivannan E.


FS Femil Shajin January 23, 2016 06:09 PM UTC

Hi Manivannan,

Thanks, That's exactly what I needed. I feel like an idiot for asking this question, should have done it by myself. But Thanks Again :)

Regards,
Femil Shajin C


ME Manivannan Elangovan Syncfusion Team January 25, 2016 06:40 AM UTC

Hi Femil,

Thanks for the update.

Please let us know if you have any other queries.

Regards,
Manivannan E.


FS Femil Shajin January 25, 2016 09:09 AM UTC

Hi Manivannan,

I have implemented multiple series charts in ListView. But after implementing what I realized was I need multiple column series to be stacked horizontally in a chart. I have attached the a sample screenshot which might explain what I'm trying to achieve. Just want to know whether it can be done through syncfusion.

Thanks,
Femil Shajin C

Attachment: Two_ColumnSeries_9546d966.rar


ME Manivannan Elangovan Syncfusion Team January 25, 2016 11:45 AM UTC

Hi Femil,

We are able to achieve your requirement by five column series with two datapoints for each series.

We have prepared a sample and it can be downloaded from the following location.

Sample: ChartInListView

Regards,
Manivannan E.


FS Femil Shajin January 25, 2016 03:50 PM UTC

Hi Manivannan,

That's exactly how I have implemented previously, I can visually achieve my requirement but the percentage value is my concern. I need the percentage value in the following manner. Example: In Chicago how many are under 25, above 25 and so on. Basically, I want to show the charts like compare of two column series.

How it is:
Under 25[Chigago] - (19/(19+19))*100 = 50 %
Under 25 [Tokyo] - (19/(19+19))*100 = 50 %

My requirement is:
Under 25 [Chicago] - (19/(19+23+16+21+19)) * 100 = 19.38 % [Under 25/ All other Chicago values]
Above 25 [Chicago] - (23/(19+23+16+21+19)) * 100 = 23.46 % [Above 25/ All other Chicago values]

Under 25 [Tokyo] - (17/(17+19+20+22+21)) * 100 = 17.17 % [Under 25/ All other Tokyo values]
Above 25 [Tokyo] - (19/(19+23+16+21+19)) * 100 = 19.19 % [Above 25/ All other Tokyo values]

-----------------------SFChart------------------------

[Chicago column series] [Tokyo's column series]

-----------------------------------------------------

Is it possible to place two charts one after other horizontally?? Hope I have stated my requirement clearly.

Thanks,
Femil Shajin


ME Manivannan Elangovan Syncfusion Team January 26, 2016 05:19 PM UTC

Hi Femil,

We are not clear with your exact requirement. Please provide your requirement in a screenshot or provide us more details on your requirement.

Regards,
Manivannan E.


FS Femil Shajin February 1, 2016 06:42 AM UTC

Hi Manivannan,

Looked at some open sourced web libraries and finally, I'm clear on my requirement. :) Can I ignore the percentage calculation for the bar chart and specify my own set of values for my bar chart?? Is it possible to ignore syncfusion's percentage calculation and just show barchart's based on Y value??

Thanks,
Femil Shajin C



ME Manivannan Elangovan Syncfusion Team February 2, 2016 05:22 PM UTC

Hi Femil,

You can specify your own set of values for the bar chart and also the bar chart will be shown only based on Y values provided in the data points by you. We are not doing any internal percentage calculation for bar chart. Please check with the sample that we have provided in our previous updates.

Regards,
Manivannan E.

Loader.
Live Chat Icon For mobile
Up arrow icon