The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

Chart malfunction when toggling data series in legend

  1. #1

    Chart malfunction when toggling data series in legend

    We're having problems with the Togglable facility in Legend. When we toggle any data series in a Legend the chart is re-rendered but all elements, chart and axes, are positioned relative to the top left hand corner of the canvas.

    Before toggling a typical chart looks like this:
    Click image for larger version. 

Name:	Legend 1..jpg 
Views:	4 
Size:	92.9 KB 
ID:	24985

    and after toggling it looks like this:
    Click image for larger version. 

Name:	Legend 2..jpg 
Views:	4 
Size:	94.8 KB 
ID:	24986

    Presumably this is a known problem but what is the solution?

    Thanks in anticipation of a solution to a frustrating problem.
  2. #2

    Help please

    I would really appreciate some help on this as it's occurring on another client project where we have no workaround.

    Many Thanks

    Jeff
  3. #3
    Hello Jeff!

    I'm afraid this is not a known problem as this does not reproduce in our line charts which explore this feature: Charts - Line - Multiple Axes.

    Please review that example and the other chart examples, isn't there a chance this issue happens due to customization on your own code? I'd suggest you try to make the charts in a clean & fresh Ext.NET project.
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hi Fabricio

    Thanks for responding. In fact, by thinking it through a bit more carefully I have managed to solve this problem. Maybe this will help someone else.

    As far as I'm aware there is no custom Ext code in our application. Certainly not written by ourselves.

    The original definition of the chart was:

    CartesianChart chart = new CartesianChart { ID = "ReportChart", Layout = "Fit", Padding = 10 };
    It turns out the problem was caused by the Layout parameter. removing that:

    CartesianChart chart = new CartesianChart { ID = "ReportChart", Padding = 10 };
    solved the problem and caused no untoward effects.

    Is that expected behaviour from your point of view?

    Best Regards

    Jeff
  5. #5
    Hello Jeff!

    Yes, that original definition makes little sense to me. Why, if the chart is not a container for Ext.NET components, but for its canvas' sprites and Ext.draw class things, at most. There's little sense in having a chart have the "fit" layout, albeit it is a property it inherits, there may be circumstances where the layout makes sense.

    What would make sense to me if you want the chart to fit a panel would be the panel having the FitLayout.

    So it is most likely the FitLayout in the chart was pragmatically stretching the sprites inside it to the chart canvas' area and resulting in what you reported when legend entries where enabled and disabled.

    It was probably not broken at first, as the sprites are laid with absolute positioning within the chart canvas and, as it removed the sprites for the hiding series, the fit layout kicked in, stretching whatever else to the "vacant area" the removed sprites may have resulted in.

    Bottomline, it would not really be an expected behavior in my point of view, but obviously an unexpected way to define a chart nevertheless.

    Thanks for your feedback, and glad you could make it work. That one would be very hard for us to guess, as it was caused due to the way you initialized the chart object.
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Hi Fabricio

    I guess what we're saying here is that this is unexpected behaviour on the part of the user as well as Ext!

    In fact what it means is that we, as users, have relatively little understanding of how Ext is made up and operates. All too often we have to 'try it and see what happens'. I think in this particular case one of us has decided we needed Layout = Fit in the belief that it would case to cause the chart to fill the panel it's in. Then, without thinking about it, that line of code has been copied from project to project.

    Thanks for your explanation.

    Jeff
  7. #7
    Hello Jeff!

    I agree this is a common misconception we see about layouts. Maybe the explanation here helps clarify its concept:
    - ExtJS documentation on Fit Layout

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: Jul 07, 2015, 11:53 PM
  2. Replies: 5
    Last Post: Mar 11, 2014, 4:03 PM
  3. [CLOSED] Chart: Toggling NumericAxis Grid
    By cwolcott in forum 2.x Premium Help
    Replies: 8
    Last Post: Nov 25, 2013, 1:15 PM
  4. [CLOSED] Configure Legend of Line Chart Series
    By PriceRightHTML5team in forum 2.x Premium Help
    Replies: 31
    Last Post: Oct 19, 2013, 5:32 AM
  5. Replies: 14
    Last Post: Dec 21, 2012, 5:23 AM

Posting Permissions