Bug at Area Chart when stack the series

17 posts, 0 answers
  1. Ibon
    Ibon avatar
    3 posts
    Member since:
    Sep 2016

    Posted 28 Sep Link to this post

     

      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);

  2. Sophi
    Admin
    Sophi avatar
    99 posts

    Posted 03 Oct Link to this post

    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
  3. DevCraft banner
  4. Ibon
    Ibon avatar
    3 posts
    Member since:
    Sep 2016

    Posted 03 Oct in reply to Sophi Link to this post

     

     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);

     

     

  5. Sophi
    Admin
    Sophi avatar
    99 posts

    Posted 04 Oct Link to this post

    Hi Ibon,

    I can see that you are applying stack mode but in the images the chart appears as stack mode is not applied both for Android and iOS.
    Could you please send us a sample project showing the described behavior, because we are not able to identify the issue just from the code snippet.

    Thank you for your cooperation.

    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
  6. Jorge
    Jorge avatar
    7 posts
    Member since:
    Oct 2011

    Posted 05 Oct Link to this post

     

     Hi Sophi,

     Thanks for the support.

     I created a dummy project including only the chart and the same values from the example of the previous captures.

     https://drive.google.com/file/d/0Bz5XREFSfrT5akNud054WlVvNE0/view?usp=sharing

     You should add your Telerik dll to the project to compile and try.

     Thanks

  7. Ibon
    Ibon avatar
    3 posts
    Member since:
    Sep 2016

    Posted 06 Oct Link to this post

     

     Hello again Sophi,

     I wrote the previous post, but I did it with my client account. Just saying. I'm sorry. I'll try to answer with this account from now. 

     Thanks,

     Ibon.

     

     

  8. Sophi
    Admin
    Sophi avatar
    99 posts

    Posted 10 Oct Link to this post

    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
    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
  9. Jorge
    Jorge avatar
    7 posts
    Member since:
    Oct 2011

    Posted 17 Oct in reply to Sophi Link to this post

    Hi Sophi,

    Thank you for investigating this issue.

    Do you have that estimation about the fix for this bug? We have a product depending on this component and we have to plan our releases.

    Regards

  10. Jorge
    Jorge avatar
    7 posts
    Member since:
    Oct 2011

    Posted 19 Oct Link to this post

    Dear Sophi,
    Do you have any estimation about when this problem will be fixed?
    Our customers are asking for an iOS APP, and it is crucial for us to have it ASAP.
    Even if you have a Beta Version with this BUG fixed would be OK for us.
    Thanks for your effort.
    Regards. 

  11. Sophi
    Admin
    Sophi avatar
    99 posts

    Posted 20 Oct Link to this post

    Hi Jorge,

    We are currently occupied with tasks, so will be able to include this issue probably in our next iteration.
    As a rough estimation for the fix I would say the middle of November. 
    We will get in touch with you when the fix is available.

    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
  12. Jorge
    Jorge avatar
    7 posts
    Member since:
    Oct 2011

    Posted 17 Nov Link to this post

    Dear Sophi,

    Do you have any news about when this problem will be fixed?

    Under your estimation it was going to be fixed in the middle of November.

    It's very important cause we have a product depending on this component, and our costumers are demanding this product.

    Regards.

  13. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 22 Nov Link to this post

    Hi Jorge,

    Thanks for writing.

    We're currently working on this issue and will do our best to provide you with a fix in terms of a week.

    Please, excuse us for the delay with our response and let us know if you have additional questions.

    Regards,
    Deyan
    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
  14. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 25 Nov Link to this post

    Hi Jorge,

    Please find attached a private build with a fix for the issue discussed in this thread. Please note that the fix has not been tested and we are sending this to you to quickly verify it addresses this issue.

    We are going to test this on our side and release a new build of UI for iOS in the next week.

    Regards,
    Deyan
    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
  15. Jorge
    Jorge avatar
    7 posts
    Member since:
    Oct 2011

    Posted 01 Dec in reply to Deyan Link to this post

    Hello Deyan,

    Sorry but I cannot find the place to download the "private build"...

    Could you indicate me how to do it?

    Regards

  16. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 4 days and 19 hours ago Link to this post

    Hi Jorge,

    The bits are now online on our website. You can log into your account, go to the product downloads section and check out the new version.

    Let me know if you have additional questions.

    Regards,
    Deyan
    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
  17. Jorge
    Jorge avatar
    7 posts
    Member since:
    Oct 2011

    Posted 15 hours ago in reply to Deyan Link to this post

    Dear Sophi,

    My college Ibon has downloaded the "Private Build" but it does NOT work.

    You can check it with "Dummy Project" that Ibon send to you.

    When is this BUG going to be fixed?

    Our costumers are demanding this function in out product.

    Regards.

  18. Nikolay
    Admin
    Nikolay avatar
    1804 posts

    Posted 10 hours ago Link to this post

    Hi Jorge,

    I replied to you in a private thread about how you can get this issue addressed. 

    Regards,
    Nikolay
    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
Back to Top
DevCraft banner