Success! Looks like we've fixed this one. According to our records the fix was applied for EXTGWT-2661 in a recent build.
  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    3
    Vote Rating
    0
    thunderBolt89 is on a distinguished road

      0  

    Default Issue with SeriesSelectionHandler on Charts on Scrolling down the browser

    Issue with SeriesSelectionHandler on Charts on Scrolling down the browser


    Hi Everyone !

    First of all I use GXT Charts 3.0.1, I noticed a bug with selectionHandler on series in all web browsers.

    I designed a page with some charts that I can select series. And sometimes, i have to scroll the page to see them all.
    Infortunately, when the scrollbar of the browser is not at the top, the seriesSelection doesn't point very well ont the barSeries and the selection is weird.

    Thanks for helping.

    Excuse me for my bad english...

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    What exactly is the bug? Can you provide a simple example, implementing EntryPoint that demonstrates the issue?

    Fortunatly for this issue, our chart examples resize, and do not properly confine how large they can get - you can resize the chart in these examples to be too big to fit in the page, but the highlighting, selecting, and tooltips all work correctly as far as I can see. These are all using 3.0.1, as the title indicates.

    http://www.sencha.com/examples/#Exam...e:tooltipchart
    http://www.sencha.com/examples/#ExamplePlace:linechart
    http://www.sencha.com/examples/#ExamplePlace:areachart

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    3
    Vote Rating
    0
    thunderBolt89 is on a distinguished road

      0  

    Default


    First of all, thanks for your reply.

    As an example, to reproduce this bug, we can just take the default web application project of GWT ("Web Application Starter Project").

    And for this, I added 2 more classes : BarExample (in client folder) and Data (in shared folder).

    BarExample :
    Code:
    public class BarExample implements IsWidget {
    
      public interface DataPropertyAccess extends PropertyAccess<Data> {
        ValueProvider<Data, Double> data1();
    
        ValueProvider<Data, String> name();
    
        @Path("name")
        ModelKeyProvider<Data> nameKey();
      }
    
      private static final DataPropertyAccess dataAccess = GWT.create(DataPropertyAccess.class);
    
      @Override
      public Widget asWidget() {
        final ListStore<Data> store = new ListStore<Data>(dataAccess.nameKey());
        final ArrayList<Data> listeDatas = new ArrayList<Data>();
        listeDatas.add(new Data(1, 20.0, "toto"));
        listeDatas.add(new Data(2, 55.0, "titi"));
        listeDatas.add(new Data(3, 29.0, "riri"));
        listeDatas.add(new Data(4, 78.0, "pôpô"));
        listeDatas.add(new Data(5, 46.0, "mômô"));
        
        store.addAll(listeDatas);
    
        final Chart<Data> chart = new Chart<Data>();
        chart.setStore(store);
        chart.setShadowChart(true);
    
        Gradient background = new Gradient("backgroundGradient", 0);
        background.addStop(0, new RGB("#ffffff"));
        background.addStop(100, new RGB("#eaf1f8"));
        chart.addGradient(background);
        chart.setBackground(background);
    
        NumericAxis<Data> axis = new NumericAxis<Data>();
        axis.setPosition(Position.BOTTOM);
        axis.addField(dataAccess.data1());
        TextSprite title = new TextSprite("Number of Hits");
        title.setFontSize(18);
        axis.setTitleConfig(title);
        axis.setDisplayGrid(true);
        axis.setMinimum(0);
        axis.setMaximum(100);
        chart.addAxis(axis);
    
        CategoryAxis<Data, String> catAxis = new CategoryAxis<Data, String>();
        catAxis.setPosition(Position.LEFT);
        catAxis.setField(dataAccess.name());
        title = new TextSprite("Month of the Year");
        title.setFontSize(18);
        catAxis.setTitleConfig(title);
        chart.addAxis(catAxis);
    
        final BarSeries<Data> bar = new BarSeries<Data>();
        bar.setYAxisPosition(Position.BOTTOM);
        bar.addYField(dataAccess.data1());
        bar.addColor(new RGB(148, 174, 10));
        bar.setHighlighting(true);
        chart.addSeries(bar);
    
        ToggleButton animation = new ToggleButton("Animate");
        animation.addValueChangeHandler(new ValueChangeHandler<Boolean>() {
          @Override
          public void onValueChange(ValueChangeEvent<Boolean> event) {
            chart.setAnimated(event.getValue());
          }
        });
        animation.setValue(true, true);
        ToggleButton shadow = new ToggleButton("Shadow");
        shadow.addValueChangeHandler(new ValueChangeHandler<Boolean>() {
          @Override
          public void onValueChange(ValueChangeEvent<Boolean> event) {
            chart.setShadowChart(event.getValue());
            chart.redrawChart();
          }
        });
        shadow.setValue(true);
    
        ToolBar toolBar = new ToolBar();
        toolBar.add(animation);
        toolBar.add(shadow);
    
        ContentPanel panel = new FramedPanel();
        panel.getElement().getStyle().setMargin(10, Unit.PX);
        panel.setCollapsible(true);
        panel.setHeadingText("Bar Chart");
        panel.setPixelSize(620, 500);
        panel.setBodyBorder(true);
    
        final Resizable resize = new Resizable(panel, Dir.E, Dir.SE, Dir.S);
        resize.setMinHeight(400);
        resize.setMinWidth(400);
    
        panel.addExpandHandler(new ExpandHandler() {
          @Override
          public void onExpand(ExpandEvent event) {
            resize.setEnabled(true);
          }
        });
        panel.addCollapseHandler(new CollapseHandler() {
          @Override
          public void onCollapse(CollapseEvent event) {
            resize.setEnabled(false);
          }
        });
        new Draggable(panel, panel.getHeader()).setUseProxy(false);
    
        VerticalLayoutContainer layout = new VerticalLayoutContainer();
        panel.add(layout);
    
        toolBar.setLayoutData(new VerticalLayoutContainer.VerticalLayoutData(1, -1));
        layout.add(toolBar);
    
        chart.setLayoutData(new VerticalLayoutContainer.VerticalLayoutData(1, 1));
        layout.add(chart);
    
        return panel;
      }
    }

    Data :
    Code:
    public class Data {
      
      private int id;
      private Double data1;
      private String name;
      
      public Data() {
        
      }
      
      public Data(int _id, Double _value, String _name) {
        id = _id;
        data1 = _value;
        name = _name;
      }
    
      public int getId() {
        return id;
      }
    
      public Double getData1() {
        return data1;
      }
      
      public String getName() {
        return name;
      }
    
    }

    Finally, a part of EntryPoint class looks like this (I only make 2 changes, those in bold font):
    Code:
    /**
       * Create a remote service proxy to talk to the server-side Greeting service.
       */
      private final GreetingServiceAsync greetingService = GWT.create(GreetingService.class);
    
      /**
       * This is the entry point method.
       */
      public void onModuleLoad() {
        final Button sendButton = new Button("Send");
        final TextBox nameField = new TextBox();
        nameField.setText("GWT User");
        final Label errorLabel = new Label();
        final BarExample diagramme = new BarExample();
    
        // We can add style names to widgets
        sendButton.addStyleName("sendButton");
    
        // Add the nameField and sendButton to the RootPanel
        // Use RootPanel.get() to get the entire body element
        RootPanel.get("nameFieldContainer").add(nameField);
    //    RootPanel.get("sendButtonContainer").add(sendButton);
        RootPanel.get("sendButtonContainer").add(diagramme);
        RootPanel.get("errorLabelContainer").add(errorLabel);
    
        // Focus the cursor on the name field when the app loads
        nameField.setFocus(true);
        nameField.selectAll();
        ...

    At the execution, we can see that if we resize the web browser page as far as a scroll bar could appear, and when we scroll down, the selectionHandler of BarSeries doesn't fit.

  4. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      1  

    Default


    Unfortunately, your example doesn't run as-is. You are using an HTML page with various elements specifically set up to receive their widgets, so without that html page, I can't even run the app. Those IDs are "nameFieldContainer", "sendButtonContainer", and "errorLabelContainer".

    If I just make three divs, each with those IDs, in that order, and shrink the window small enough to require scrollbars, I am able to reproduce the issue. I've filed it, and have a temporary workaround that should let your use case continue to function until we have a complete solution.

    Subclass the Chart when you create it, and override the getEventXY method to look like this:
    Code:
    protected PrecisePoint getEventXY(Event event) {
      return new PrecisePoint(event.getClientX() - this.getAbsoluteLeft() + XDOM.getBodyScrollLeft(), event.getClientY() - this.getAbsoluteTop() + XDOM.getBodyScrollTop());
    }
    The getBodyScrollLeft/Top methods are not present in the current version. These are generally not needed - most GXT applications are designed to be full-screen, using the Viewport class and other layouts, so that the app sizes itself to fit the browser, and multiple nested scrollbars are never required. I've tested this workaround in FF17, Chrome 23, and IE8.

    We'll update this thread when a fix is available. Thanks for your report.
    Last edited by Colin Alworth; 5 Dec 2012 at 8:10 AM. Reason: code formatting

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    3
    Vote Rating
    0
    thunderBolt89 is on a distinguished road

      0  

    Default


    It works !!!

    Thank you very very much and have a nice day !

  6. #6
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    This has been fixed in SVN and will be available in the next release.

  7. #7
    Sencha User
    Join Date
    Jul 2011
    Posts
    99
    Vote Rating
    6
    Andreas Samjeske is on a distinguished road

      0  

    Default


    Quote Originally Posted by Colin Alworth View Post
    ... I've filed it, and have a temporary workaround that should let your use case continue to function until we have a complete solution.

    Subclass the Chart when you create it, and override the getEventXY method to look like this:
    Code:
    protected PrecisePoint getEventXY(Event event) {
      return new PrecisePoint(event.getClientX() - this.getAbsoluteLeft() + XDOM.getBodyScrollLeft(), event.getClientY() - this.getAbsoluteTop() + XDOM.getBodyScrollTop());
    }
    Hi Colin,
    if your Series has a ToolTip, the workaround you stated above corrects the issue when/if tooltip is shown. That's fine.
    But unfortunately the spot the tooltip is shown at is wrong, if your app has been scrolled. Reason is that there is no call to getEventXY(Event e), but chart.getAbsoluteLeft() / -Top().

    Maybe this override for chart is the better one:
    Code:
        @Override
        public int getAbsoluteLeft() {
            return DOM.getAbsoluteLeft(getElement()) - XDOM.getBodyScrollLeft();
        }
    
        @Override
        public int getAbsoluteTop() {
            return DOM.getAbsoluteTop(getElement()) - XDOM.getBodyScrollTop();
        }
    Disclaimer: I tested it only very briefly. It may have sideeffects I didn't recognized.

  8. #8
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Those methods are defined in UIObject (the superclass of Widget) - anything that treats the chart as a UIObject will be surprised when they do not behave as expected. I don't think we can reasonably override that and change the returned value to something other than the absolute positioning that is expected.

    Do you have a test case that can demonstrate the issue you are describing?