SfChart, label, image datamarker

[Geoffrey]

Thread ID:	Created:	Updated:	Platform:	Replies:
126052	Sep 20,2016 03:59 PM		Xamarin.Forms	0

Tags: SfChart

Tincani

Asked on September 20, 2016 03:59 PM

Hello,

I attached two files.
- One contains the result I want to my android SfChart
- The second is the actual rendering


How to modify the current code to have this rendering ?

I use the following code :

SfChart chart = new SfChart(Activity);
            chart.VerticalScrollBarEnabled = false;
            chart.HorizontalScrollBarEnabled = false;

            CategoryAxis primaryAxis = new CategoryAxis();
            primaryAxis.Visibility = Visibility.Gone;
            primaryAxis.StripLines.Clear();
            primaryAxis.ShowMajorGridLines = false;
            chart.PrimaryAxis = primaryAxis;

            NumericalAxis secondaryAxis = new NumericalAxis();
            secondaryAxis.Visibility = Visibility.Gone;
            secondaryAxis.StripLines.Clear();
            secondaryAxis.ShowMajorGridLines = false;
            chart.SecondaryAxis = secondaryAxis;

            List<Integer> colors = new List<Integer>();
            ObservableArrayList data = new ObservableArrayList();
            foreach (ParticipantViewModel participantViewModel in this._participants.Where(x => x.Difference != 0))
            {
                data.Add(new ChartDataPoint(participantViewModel.Name, participantViewModel.Difference));
                if (participantViewModel.Difference > 0)
                    colors.Add(new Integer(new Color(Constants.ColorPositiveR, Constants.ColorPositiveG, Constants.ColorPositiveB)));
                else
                    colors.Add(new Integer(new Color(Constants.ColorNegativeR, Constants.ColorNegativeG, Constants.ColorNegativeB)));
            }

            ColumnSeries series1 = new ColumnSeries()
            {
                DataSource = data,
                TooltipEnabled = true,
                AnimationEnabled = true,
                AnimationDuration = 0.2,
                Label = "Income"
            };
            series1.ColorModel.ColorPalette = ChartColorPalette.Custom;
            series1.ColorModel.CustomColors = colors;
            series1.DataMarker.MarkerType = DataMarkerType.Ellipse;
            series1.DataMarker.ShowMarker = true;
            series1.DataMarker.ShowLabel = true;
            chart.Series.Add(series1);

Thanks in advance
Geoffrey

Attachment: Pictures_33e0d2b1.7z

[Yuvaraj Palanisamy]

Hi Tincani, 

 

We have already logged a feature report for DataMarker Label Template support in Xamarin.Android and this will be available in our upcoming Volume 3, 2016 release which is estimated to be rolled out by end of September, 2016.  

 

Disclaimer : The date for the feature implementation is tentative and not a commitment on our parts.  

 

Regards, 

Yuvaraj

[Geoffrey]

Hello,

Is the feature avaiable in Volume 3 2016 ?
Is there a sample or documentation about the feature ?


Thanks in advance,
Geoffrey

[Parthiban Sundaram]

Hi Tincani,

We are glad to announce that our Essential Studio 2016 Volume 3 v14.3.0.49 is rolled out and is available for download under the following link.
 
https://www.syncfusion.com/forums/126177/essential-studio-2016-volume-3-release-v14-3-0-49-is-available-for-download
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

We have also prepared a sample for this. Please check and let us know if you have any concerns.

Sample: http://www.syncfusion.com/downloads/support/forum/126053/ze/Datamarker-1239844444 

Regards,
Parthiban S
 

[Geoffrey]

Thanks a lot for your sample, it's almost good

Just have two problems :
- I want that my label picture have the same width as the ColumnSegment, I try to get the columns segment width without success, the size is equal to 0
- I change the label style position to outer, but picture are cut, must I modify minimum and maximum to do that ?

private void Series1DataMarkerLabelCreated(object sender, ChartSeries.DataMarkerLabelCreatedEventArgs e)
        {
            ColumnSeries serie = (ColumnSeries) sender;
            ColumnSegment segment = (ColumnSegment)serie.ChartSegments.Get(e.P0.Index);
            LinearLayout layout = new LinearLayout(this.Activity);
            layout.Orientation = Android.Widget.Orientation.Vertical;
            ImageView image = new ImageView(this.Activity);
            image.LayoutParameters = new ViewGroup.LayoutParams(new LinearLayout.LayoutParams(120, 80));
            ParticipantViewModel participantViewModel = this._list[e.P0.Index];
            Bitmap bitmap = BitmapFactory.DecodeByteArray(participantViewModel.ImageBytes, 0, participantViewModel.ImageBytes.Length);
            image.SetImageBitmap(bitmap);
            layout.AddView(image);
            e.P0.View = layout;
        }

Best regards,
Geoffrey

Attachment: Screenshot_20160930152433_13c3b860.zip

[Parthiban Sundaram]

Hi Tincani, 

Regarding the Query “I want that my label picture have the same width as the ColumnSegment”  

You can use the below code snippet to find the width of the column segment: 

 

double width = ((chart.SeriesClipRect.Width()) / (((sender as ColumnSeries).DataSource  

                                                     as bservableArrayList).Size())); 

double spacing = (width * 20) / 100; 

double actualSegmentWidth = width - spacing; 

 

Regarding the Query “I change the label style position to outer, but picture are cut, must I modify minimum and maximum to do that ?” 

You can set the PlotOffset for secondary axis to achieve your requirement. 

 

secondaryAxis.PlotOffset = 80; 

 

We have also modified the sample as per your requirement. Please check and let us know if you require further assistance on this. 

Sample: http://www.syncfusion.com/downloads/support/forum/126053/ze/Sample2004452800  

Regards,
Parthiban S 

[Geoffrey]

Hello Parthiban Sundaram,

It's perfect.

Thanks a lot for your help :-)

Best regards,
Geoffrey

[Parthiban Sundaram]

Hi Tincani,

Thanks for the update.

We are glad to hear that the given solution worked. Please get back to us if you need further assistance.

Regards,
Parthiban S