Success! Looks like we've fixed this one. According to our records the fix was applied for EXTGWT-3352 in 3.1.1.
  1. #1
    Sencha User
    Join Date
    Oct 2013
    Posts
    3
    Vote Rating
    0
    ndeblock is on a distinguished road

      0  

    Default Chart don't draw columns and line of axes.

    Chart don't draw columns and line of axes.


    Hello,

    I have a problem with my chart on IE8. It doesn't draw columns, lines of axes and background.

    I use GXT 3.0.1

    Here is my chart on chrome :
    chartonchrome.JPG

    And here on IE8 :
    chartonie8.JPG

    My configuration on my .xml.gwt :
    Code:
        <inherits name="com.sencha.gxt.ui.GXT" />
        <inherits name='com.sencha.gxt.chart.Chart'/>    
        <inherits name="com.sencha.gxt.theme.gray.Gray" />
        <stylesheet src="reset.css" />
    And contruction of my chart :

    Code:
    chart = new Chart<SoldePointMoisModel>(width, height);
    background = new TextSprite();
    catAxis = new CategoryAxis<SoldePointMoisModel,String>();
    axis = new NumericAxis<SoldePointMoisModel>();
    
            chart.setStore(listStore);
            chart.setShadow(false);
            chart.setAnimated(true);
            chart.setBackground( new RGB(230, 230, 230));        
            //chart.setShadowChart(true);        
            
            // les axes
            axis.setPosition(Position.LEFT);
            axis.addField(dataModelProperties.solde());
            axis.setDisplayGrid(false);
            //axis.setHidden(true);        
            //axis.setY(0);        
            chart.addAxis(axis);
            
            background.setFontSize((int)(width/5.33));    
            background.setTextAnchor(TextAnchor.MIDDLE);     
            background.setFill(new RGB(210,210,210));        
            background.setX(width/1.85);
            background.setY(0);        
            chart.getSurface().add(background);
            
            
            catAxis.setPosition(Position.BOTTOM);
            catAxis.setField(dataModelProperties.mois());
            //catAxis.
            catAxis.setDisplayGrid(false);    
            TextSprite sprite = new TextSprite();
            sprite.setFill(new RGB(0, 124, 175));
            sprite.setFontSize(18);            
            sprite.setTextAnchor(TextAnchor.MIDDLE);
            catAxis.setLabelConfig(sprite);
            chart.addAxis(catAxis);
    
    
    
    
            final BarSeries<SoldePointMoisModel> columns = new BarSeries<SoldePointMoisModel>();
            columns.setYAxisPosition(Position.LEFT);        
            columns.addYField(dataModelProperties.solde());
            columns.setColumn(true);
            columns.setStacked(true);
            
            RGB grad1 = new RGB(192, 192, 192);        
            RGB grad2 = new RGB(153,153,153);
            RGB grad3 = new RGB(102, 102, 102);
            RGB grad4 = new RGB(51, 51, 51);
            RGB grad5 = new RGB(0, 124, 175);
                    
            final Color[] colors = {grad1, grad2, grad3, grad4, grad5};        
            
            columns.setRenderer(new SeriesRenderer<SoldePointMoisModel>() {
                @Override
                public void spriteRenderer(Sprite sprite, int index, ListStore<SoldePointMoisModel> store) {                
                    int i = (int) (store.get(index).getSolde()/(nbPointCheque/4));
                    if(i<0) i = -i;
                    if(i>4) i=4;                                    
                    sprite.setFill(colors[i]);
                    sprite.setZIndex(10000);                
                    sprite.setOpacity(0.8);                
                    sprite.redraw();
                }
            });
    
    
            
            final SeriesToolTipConfig<SoldePointMoisModel> tooltip = new SeriesToolTipConfig<SoldePointMoisModel>();
            
            tooltip.setLabelProvider(new SeriesLabelProvider<SoldePointMoisModel>() {
                @Override
                public String getLabel(
                        SoldePointMoisModel item,
                        ValueProvider<? super SoldePointMoisModel, ? extends Number> valueProvider) {                
                    tooltip.setTitleText((item.getAugmentationSoldeMoisPrec() >= 0 ? "+" : "")+item.getAugmentationSoldeMoisPrec()+" points");
                    
                    String date = "";
                    if(item.getDateDernierAchatMois() != null) {
                        date = DateTimeFormat.getFormat(Index.PARAMETRE_APPLICATION.getDateFormat()).format(item.getDateDernierAchatMois());
                    }
                    NumberFormat format = NumberFormat.getFormat("0.00");                
                    return /*format.format(item.getSommeAchatAchatMois()) + " € d'achat " +*/ date;                
                }
            });
            tooltip.setAnchor(Side.BOTTOM);        
            tooltip.setTrackMouse(true);
            tooltip.setMouseOffsetX(-40);
            tooltip.setMouseOffsetY(-50); 
            tooltip.setMaxWidth(100);
    
    
            columns.setToolTipConfig(tooltip); 
        
            columns.setHighlighting(true);
            
            chart.addSeries(columns);
    
    
    
    
            // Setup the chart series
    
    
            // Setup the label config
    
    
            SeriesLabelConfig<SoldePointMoisModel> labelConfig = new SeriesLabelConfig<SoldePointMoisModel>();
            labelConfig.setLabelPosition(LabelPosition.OUTSIDE);
            labelConfig.setValueProvider(dataModelProperties.solde(), new StringLabelProvider<Double>() {
                @Override
                public String getLabel(Double item) {
                    if(item==null || item < nbPointCheque) return "";
                    double nb=item;                
                    return ((int)nb)+"pts";                
                }
            });
    
    
            TextSprite sprites = new TextSprite();
            sprites.setFontSize(14);            
            sprites.setTextAnchor(TextAnchor.MIDDLE);     
            sprites.setFill(new RGB(153,153,153));        
            labelConfig.setSpriteConfig(sprites);        
            columns.setLabelConfig(labelConfig);
    Someone can help me ?

    Thanks for advance.

  2. #2
    Sencha - Support Team israelroldan's Avatar
    Join Date
    Nov 2011
    Location
    Den Haag, Netherlands
    Posts
    95
    Vote Rating
    11
    israelroldan will become famous soon enough

      0  

    Default


    I've moved the thread to the GXT forum.
    Israel Roldàn | Senior Support Engineer

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2013
    Posts
    1
    Vote Rating
    0
    Assystem is on a distinguished road

      0  

    Default


    I had the same issue.

    I remove that lines (super dev mode)

    Code:
        
    <inherits name='com.google.gwt.user.User'/>
    <!-- super dev mode -->    
    <add-linker name="xsiframe" />
    <set-configuration-property name="devModeRedirectEnabled" value="true" />
    It solve it.

  4. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Vote Rating
    88
    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


    Good to know, its helpful to have this extra context. My concern is that some part of VML doesn't behave well when loaded in this way, perhaps an extra necessary stylesheet is missing. I've moved this to the bugs forum, and we'll look into it further.

  5. #5
    Sencha Premium Member feelinforyou's Avatar
    Join Date
    Dec 2012
    Posts
    92
    Vote Rating
    4
    feelinforyou is on a distinguished road

      0  

    Default


    I have the same problem! Any update or fix for this issue?
    Okay, you have to remove the super dev mode and the gwt User. Then it's working, but why?

  6. #6
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Vote Rating
    88
    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


    I try to spend about half a day a week fighting with this, and this week am consulting with other chart/draw experts at Sencha but so far we've got nothing. Something *appears* to be wrong with how IE is applying the namespace - it applies it in some cases (all TextSprites work), and doesnt work in others. If we leave out either the namespace wiring or the ie-specific behavior CSS, it completely breaks (as expected), but if I just disable the behavior and reenabled it, all elements render correctly... until any element changes, in which case it is invisible again.

    No one I've talked to has ever seen a case quite like this, and most of MS's own VML documentation is at best internally inconsistent and at worst gone and replaced by useless 404 pages.

    The especially frustrating part to this is that the only change required to cause this issue is to change the linker, which merely modifies how scripts are injected into the page. My next step may be to make my own linker, or manually copy large swaths of generated GWT js into handmade js files and boil it down into just a few lines to try drawing a single element.

    This is one of the most frustrating IE bugs I've faced in quite a while, which is why I'm posting on my lack of progress here - there isn't a viable workaround, and there is no apparent reason why it isn't working with one linker, but is with another.

    Other things I've tried:
    -reordering injecting css vs adding the namespace
    -using external css or style tags in place of CssResource
    -other standard gwt linkers, only std works, all others i've tried (direct_install, xsiframe, sso) have the bug. Worth nothing that direct install extends xsiframe, but sso is totally on its own, and in fact is only one step instead of two (just a .nocache.js, no additional external files)
    -three-arg instead of two-arg namespaces.add (gxt uses the two-arg by default, whereas http://stackoverflow.com/a/3891060/860630 says that only the three arg works)
    -out of desperation, changing the namespace to see if it miraculously fixed it. Nope.

    I'm open to suggestions, and will continue slowing grinding away time on this, but I'm not optimistic after this many weeks of 10% of my time on this.

  7. #7
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Vote Rating
    88
    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


    Okay! Found it! Believe it or not, one linker works with setting the path on the shape element as an *attribute*, and other linkers (actually all kiners as far as I can tell) work when set the path on the shape element as a *property*. Didja catch it? Its a subtle difference, but apparently when you are IE8, its important. For some reason. With one linker. But you can also poke the page's CSS and sometimes it magically works again. Until the next repaint/resize/whatever.

    I don't know either.

    IN ANY CASE, this is a one line fix, which will go out in 3.1.1, and as there is no good way to work around this, I give you, the fix:
    Code:
    --- a/com.sencha.gxt.chart/src/main/java/com/sencha/gxt/chart/client/draw/engine/VML.java
    +++ b/com.sencha.gxt.chart/src/main/java/com/sencha/gxt/chart/client/draw/engine/VML.java
    @@ -339,7 +339,7 @@ public class VML extends DomSurface {
         }
     
         if (vml != null) {
    -      element.setAttribute("path", vml);
    +      element.setPropertyString("path", vml);
         }
     
         if (sprite.isZIndexDirty() || ignoreOptimizations) {
    Excuse me while I go boil my head in bleach to try to forget this ever happened, and how much of VML I had to relearn to make it happen. Look for the latest 3.1 nightly builds to have this fix (once we merge it, I'm putting it up for code review now), and for it to go out in 3.1.1.

  8. #8
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Vote Rating
    88
    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 merged, and is in SVN and our nightly builds, and will go out in 3.1.1.

    You can confirm the fix at http://qa.sencha.com:8080/examples-dev-3.1/ which now uses the super dev mode compatible xsiframe linker, and charts work correctly in ie8.