This is a migrated thread and some comments may be shown as answers.

Bug at Area Chart when stack the series

20 Answers 140 Views

Chart - Xamarin.iOS

This is a migrated thread and some comments may be shown as answers.

Ibon asked on 28 Sep 2016, 12:37 PM

android-capture.png

ios-capture.png

Hi,

I'm not sure, but I think I have found a bug in the Area Chart component.

The problem is the displaying order of the different series, when you try to stack one them. I successfully achieved it in Android, but I can't find the correct order in iOS.

I have attached two captures. The correct order is the Android version. The add order is the same, but the result is different.

And here is the two code versions.

IOS Code

dailyGraphChart.BeginUpdates();

//Modo stack

var stackInfo = new TKChartStackInfo(new NSNumber(0), TKChartStackMode.Stack);

//PHOTOVOLTAICS - Yellow

var serieFVE = new TKChartAreaSeries(pointsFVE.ToArray());

serieFVE.StackInfo = stackInfo;

serieFVE.Style.Palette = new TKChartPalette();

var paletteItemFVE = new TKChartPaletteItem();

paletteItemFVE.Fill = new TKSolidFill(StyleUtil.GetChartYellow());

serieFVE.Style.Palette.AddPaletteItem(paletteItemFVE);

dailyGraphChart.AddSeries(serieFVE);

//CHARGE - Orange

var serieBatUp = new TKChartAreaSeries(pointsBatUp.ToArray());

serieBatUp.StackInfo = stackInfo;

serieBatUp.Style.Palette = new TKChartPalette();

var paletteItemBatUp = new TKChartPaletteItem();

paletteItemBatUp.Fill = new TKSolidFill(StyleUtil.GetChartOrange());

serieBatUp.Style.Palette.AddPaletteItem(paletteItemBatUp);

dailyGraphChart.AddSeries(serieBatUp);

//DISCHARGE - Green

var serieBatDown = new TKChartAreaSeries(pointsBatDown.ToArray());

serieBatDown.StackInfo = stackInfo;

serieBatDown.Style.Palette = new TKChartPalette();

var paletteItemBatDown = new TKChartPaletteItem();

paletteItemBatDown.Fill = new TKSolidFill(StyleUtil.GetChartGreen());

serieBatDown.Style.Palette.AddPaletteItem(paletteItemBatDown);

dailyGraphChart.AddSeries(serieBatDown);

//GRID - Blue

var serieGrid = new TKChartAreaSeries(pointsGrid.ToArray());

serieGrid.StackInfo = stackInfo;

serieGrid.Style.Palette = new TKChartPalette();

var paletteItemGrid = new TKChartPaletteItem();

paletteItemGrid.Fill = new TKSolidFill(StyleUtil.GetChartBlue());

serieGrid.Style.Palette.AddPaletteItem(paletteItemGrid);

dailyGraphChart.AddSeries(serieGrid);

Android Code

//Initialization

RadCartesianChartView chartView = new RadCartesianChartView(v.Context);

ChartPalette customPalette = new ChartPalette(chartView.Palette);

AreaSeries EFVAreaSeries = new AreaSeries();

EFVAreaSeries.CombineMode = ChartSeriesCombineMode.Stack;

EFVAreaSeries.StackGroupKey = 0;

EFVAreaSeries.CategoryBinding = new PowerResultDataBinding ("PowerType");

EFVAreaSeries.ValueBinding = new PowerResultDataBinding ("hour");

EFVAreaSeries.Data = (Java.Lang.IIterable)this.EFVresults;

CustomizarPaleta (customPalette,ChartPalette.AreaFamily, GetChartYellow (), 0);

EFVAreaSeries.StrokeColor = Color.Black.ToArgb ();

EFVAreaSeries.StrokeThickness = 0.5f;

chartView.Series.Add(EFVAreaSeries);

AreaSeries CargaBAreaSeries = new AreaSeries();

CargaBAreaSeries.CombineMode = ChartSeriesCombineMode.Stack;

CargaBAreaSeries.StackGroupKey = 0;

CargaBAreaSeries.CategoryBinding = new PowerResultDataBinding ("PowerType");

CargaBAreaSeries.ValueBinding = new PowerResultDataBinding ("hour");

CargaBAreaSeries.Data = (Java.Lang.IIterable)this.CargaBresults;

CustomizarPaleta (customPalette,ChartPalette.AreaFamily, GetChartOrange (), 1);

CargaBAreaSeries.StrokeColor = Color.Black.ToArgb ();

CargaBAreaSeries.StrokeThickness = 0.5f;

chartView.Series.Add(CargaBAreaSeries);

AreaSeries DescargaAreaSeries = new AreaSeries();

DescargaAreaSeries.CombineMode = ChartSeriesCombineMode.Stack;

DescargaAreaSeries.StackGroupKey =0;

DescargaAreaSeries.CategoryBinding = new PowerResultDataBinding ("PowerType");

DescargaAreaSeries.ValueBinding = new PowerResultDataBinding ("hour");

DescargaAreaSeries.Data = (Java.Lang.IIterable)this.DescargaResults;

CustomizarPaleta (customPalette,ChartPalette.AreaFamily, GetChartGreen (), 2);

DescargaAreaSeries.StrokeColor = Color.Black.ToArgb ();

DescargaAreaSeries.StrokeThickness = 0.5f;

chartView.Series.Add(DescargaAreaSeries);

AreaSeries RedAreaSeries = new AreaSeries();

RedAreaSeries.CombineMode = ChartSeriesCombineMode.Stack;

RedAreaSeries.StackGroupKey = 0;

RedAreaSeries.CategoryBinding = new PowerResultDataBinding ("PowerType");

RedAreaSeries.ValueBinding = new PowerResultDataBinding ("hour");

RedAreaSeries.Data = (Java.Lang.IIterable)this.RedResults;

CustomizarPaleta (customPalette,ChartPalette.AreaFamily, GetChartBlue (), 3);

RedAreaSeries.StrokeColor = Color.Black.ToArgb ();

RedAreaSeries.StrokeThickness = 0.5f;

chartView.Series.Add(RedAreaSeries);

AreaSeries InyecAreaSeries = new AreaSeries();

InyecAreaSeries.CombineMode = ChartSeriesCombineMode.Stack;

InyecAreaSeries.StackGroupKey = 0;

InyecAreaSeries.CategoryBinding = new PowerResultDataBinding ("PowerType");

InyecAreaSeries.ValueBinding = new PowerResultDataBinding ("hour");

InyecAreaSeries.Data = (Java.Lang.IIterable)this.Inyecresults;

CustomizarPaleta (customPalette,ChartPalette.AreaFamily, GetChartRed(), 4);

InyecAreaSeries.StrokeColor = Color.Black.ToArgb ();

InyecAreaSeries.StrokeThickness = 0.5f;

chartView.Series.Add(InyecAreaSeries);

20 Answers, 1 is accepted

answered on 03 Oct 2016, 08:48 AM

Hello Ibon,

From the images you sent I got the impression that you have multiple series in your chart that are not using stack mode.
When you have multiple series which are not stacked with specific stackMode you should have in mind the order in which you are adding them to the chart. The first series to add will be drawn at the bottom, that is why the yellow and the orange series are not visible on iOS, their graphics come lower than the blue and the green series so they remain hidden behind them.

Consider adding the series in different order so that the ones with lower values appear on top (to be added last).

In case this does not help you, please, write back any time.

Regards,
Sophi
Telerik by Progress

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 03 Oct 2016, 09:08 AM

captura-de-pantalla-2016-10-03-a-las-10-55-12.png

Hi Shopi,

Thanks for the answer.

As you can see at the code, all the series are using the same TKChartStackInfo called "stackInfo", so all of them are using the same stack mode.

I'm already tried to change the adding order, but the result is just the oposite as you mentioned. I changed the order and added like this...

Blue, Green, Orange, Yellow, and the chart display order y the same (not inverted) (In Android works the same, the first added the first showed)

You can see the sample code and the capture.

The iOS changed code

var stackInfo = new TKChartStackInfo(new NSNumber(0), TKChartStackMode.Stack);

//GRID - BLUE

var serieGrid = new TKChartAreaSeries(pointsGrid.ToArray());

serieGrid.StackInfo = stackInfo;

var paletteItemGrid = new TKChartPaletteItem();

paletteItemGrid.Fill = new TKSolidFill(EstilosUtil.GetChartBlue());

palette.AddPaletteItem(paletteItemGrid);

serieGrid.Style.Palette = palette;

dailyGraphChart.AddSeries(serieGrid);

//DESCARGA - GREEN

var serieBatDown = new TKChartAreaSeries(pointsBatDown.ToArray());

serieBatDown.StackInfo = stackInfo;

var paletteItemBatDown = new TKChartPaletteItem();

paletteItemBatDown.Fill = new TKSolidFill(EstilosUtil.GetChartGreen());

palette.AddPaletteItem(paletteItemBatDown);

serieBatDown.Style.Palette = palette;

dailyGraphChart.AddSeries(serieBatDown);

//CHARGE - ORANGE

var serieBatUp = new TKChartAreaSeries(pointsBatUp.ToArray());

serieBatUp.StackInfo = stackInfo;

var paletteItemBatUp = new TKChartPaletteItem();

paletteItemBatUp.Fill = new TKSolidFill(EstilosUtil.GetChartOrange());

palette.AddPaletteItem(paletteItemBatUp);

serieBatUp.Style.Palette = palette;

dailyGraphChart.AddSeries(serieBatUp);

//PTHV - YELLOW

var serieFVE = new TKChartAreaSeries(pointsFVE.ToArray());

serieFVE.StackInfo = stackInfo;

var paletteItemFVE = new TKChartPaletteItem();

paletteItemFVE.Fill = new TKSolidFill(EstilosUtil.GetChartYellow());

palette.AddPaletteItem(paletteItemFVE);

serieFVE.Style.Palette = palette;

dailyGraphChart.AddSeries(serieFVE);

answered on 10 Oct 2016, 11:55 AM

Hi Ibon,

After some time spend digging we have concluded that the iOS chart indeed has an issue with the rendering of multiple series in stack mode. The issue is basically that every new-added series is rendered right on top of the previous in other words it is covering everything added so far.
In Android every new-added series is rendered behind the previous so there is no overlapping between the series and every series is visible.

I am pasting a snippet of your series, the only difference is that the color palettes are removed, this way the chart uses it's default colors which are transparent. I believe it is easier to see the issue I am trying to explain. When you run the project you will see that the series are rendered correctly as data values and that all of them are presented but every new-added is covering the previous. Please, copy the snippet and run your project with it.

dailyGraphChart.BeginUpdates();

//Modo stack

var stackInfo = new TKChartStackInfo(new NSNumber(0), TKChartStackMode.Stack);

//Palette

var palette = new TKChartPalette();

////PTHV - YELLOW

var serieFVE = new TKChartAreaSeries(pointsFVE.ToArray());

serieFVE.StackInfo = stackInfo;

var paletteItemFVE = new TKChartPaletteItem();

paletteItemFVE.Fill = new TKSolidFill(UIColor.Yellow);

palette.AddPaletteItem(paletteItemFVE);

//serieFVE.Style.Palette = palette;

dailyGraphChart.AddSeries(serieFVE);

////CHARGE - ORANGE

var serieBatUp = new TKChartAreaSeries(pointsBatUp.ToArray());

serieBatUp.StackInfo = stackInfo;

var paletteItemBatUp = new TKChartPaletteItem();

paletteItemBatUp.Fill = new TKSolidFill(UIColor.Orange);

palette.AddPaletteItem(paletteItemBatUp);

//serieBatUp.Style.Palette = palette;

dailyGraphChart.AddSeries(serieBatUp);

////DESCARGA -GREEN

var serieBatDown = new TKChartAreaSeries(pointsBatDown.ToArray());

serieBatDown.StackInfo = stackInfo;

var paletteItemBatDown = new TKChartPaletteItem();

paletteItemBatDown.Fill = new TKSolidFill(UIColor.Green);

palette.AddPaletteItem(paletteItemBatDown);

//serieBatDown.Style.Palette = palette;

dailyGraphChart.AddSeries(serieBatDown);

////GRID - BLUE

var serieGrid = new TKChartAreaSeries(pointsGrid.ToArray());

serieGrid.StackInfo = stackInfo;

var paletteItemGrid = new TKChartPaletteItem();

paletteItemGrid.Fill = new TKSolidFill(UIColor.Blue);

palette.AddPaletteItem(paletteItemGrid);

//serieGrid.Style.Palette = palette;

dailyGraphChart.AddSeries(serieGrid);

//INYECCION - RED

var serieInjection = new TKChartAreaSeries(pointsInjection.ToArray());

serieInjection.StackInfo = stackInfo;

var paletteItemInjection = new TKChartPaletteItem();

paletteItemInjection.Fill = new TKSolidFill(UIColor.Red);

palette.AddPaletteItem(paletteItemInjection);

//serieInjection.Style.Palette = palette;

dailyGraphChart.AddSeries(serieInjection);

//SOC

var serieSOC = new TKChartLineSeries(pointsSOC.ToArray());

serieSOC.Style.Palette = new TKChartPalette();

var paletteItemSOC = new TKChartPaletteItem();

paletteItemSOC.Stroke = new TKStroke(UIColor.Gray, 3f);

serieSOC.Style.Palette.AddPaletteItem(paletteItemSOC);

//Estable el eje Y

serieSOC.YAxis = percentageAxis;

dailyGraphChart.AddSeries(serieSOC);

//Reload all data

dailyGraphChart.EndUpdates();

We will investigate in depth this behavior and will estimate a fix for it.
Thank you for your cooperation and pointing us to this issue in the chart.
I am adding 800 Telerik points for bringing this to our attention.

Regards,
Sophi
Telerik by Progress

answered on 23 Jan 2017, 10:39 AM

img_20170120_124739_hdr.jpg

img_20170120_124838_hdr.jpg

error_grahics.png

Dear Sophie,

We have implemented a version with the "Private version" and it works perfect in all the iOS devices but, on iPHONE 7 with iOS 10.2 the "Graphic stacking" fails.

We have checked with TWO different iPHONE 7 devices. Uninstalling and reinstalling but we get the same error.

I attach a picture with the Example.

Could you give us when this could be fixed?

When it is we could do the same and use a "Private version" till it is offcial.

Regards.