Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    117
    Vote Rating
    0
    tmancini is on a distinguished road

      0  

    Default Weird Behavior with TabPanel, PortalLayoutContainer, and Charts.

    Weird Behavior with TabPanel, PortalLayoutContainer, and Charts.


    I want to have a TabPanel where each Tab contains a PortalLayoutContainer with up to 4 different charts. Upon clicking the second tab, the charts take a long time to load, and the colors for the PieChart all turn black. Am I doing something wrong? Here is the code I am using along with the Data and TestData classes from the Sencha Examples:

    PHP Code:
    public class PieChartTest implements EntryPoint {
      
      @
    Override
      
    public void onModuleLoad() {
        
    ContentPanel mainPanel = new ContentPanel();
        
    mainPanel.setHeaderVisible(false);
        
    mainPanel.setBorders(false);
        
    mainPanel.setBodyBorder(false);
        
        
    TabPanel tabPanel = new TabPanel();
        
    mainPanel.setWidget(tabPanel);
        
        
    tabPanel.add(getCharts(), "Test1");
        
    tabPanel.add(getCharts(), "Test2");
        
        
    BorderLayoutContainer container = new BorderLayoutContainer();
        
    HTML north = new HTML();
        
    north.setHTML("<div id='theme'></div><div id=title>Chart Test</div>");
        
    north.getElement().setId("header");
        
    BorderLayoutData northData = new BorderLayoutData(35);
        
    container.setNorthWidget(northnorthData);
        
    container.setCenterWidget(mainPanel, new MarginData(10));
        
        
    Viewport viewport = new Viewport();
        
    viewport.setWidget(container);
        
        
    RootPanel.get().add(viewport);
      }
      
      public interface 
    DataPropertyAccess extends PropertyAccess<Data> {
        
    ValueProvider<DataDoubledata1();
        
        
    ValueProvider<DataStringname();
        
        @
    Path("name")
        
    ModelKeyProvider<DatanameKey();
      }
      
      private static final 
    DataPropertyAccess dataAccess GWT.create(DataPropertyAccess.class);
      
      public 
    Widget getCharts() {
        final 
    ListStore<Datastore = new ListStore<Data>(dataAccess.nameKey());
        
    store.addAll(TestData.getData(620100));
        
        final 
    Chart<DatapieChart = new Chart<Data>();
        
    pieChart.setDefaultInsets(50);    
        
    pieChart.setStore(store);    
        
    pieChart.setShadowChart(true);
        
    pieChart.setBorders(true);
        
        
    Gradient slice1 = new Gradient("slice1"45);
        
    slice1.addStop(new Stop(0, new RGB(14817410)));
        
    slice1.addStop(new Stop(100, new RGB(1071267)));
        
    pieChart.addGradient(slice1);
        
        
    Gradient slice2 = new Gradient("slice2"45);
        
    slice2.addStop(new Stop(0, new RGB(1795166)));
        
    slice2.addStop(new Stop(100, new RGB(1269120)));
        
    pieChart.addGradient(slice2);
     
        
    Gradient slice3 = new Gradient("slice3"45);
        
    slice3.addStop(new Stop(0, new RGB(1661732)));
        
    slice3.addStop(new Stop(100, new RGB(1201223)));
        
    pieChart.addGradient(slice3);
     
        
    Gradient slice4 = new Gradient("slice4"45);
        
    slice4.addStop(new Stop(0, new RGB(2551369)));
        
    slice4.addStop(new Stop(100, new RGB(2131100)));
        
    pieChart.addGradient(slice4);
     
        
    Gradient slice5 = new Gradient("slice5"45);
        
    slice5.addStop(new Stop(0, new RGB(25520962)));
        
    slice5.addStop(new Stop(100, new RGB(25519711)));
        
    pieChart.addGradient(slice5);
     
        
    Gradient slice6 = new Gradient("slice6"45);
        
    slice6.addStop(new Stop(0, new RGB(16617135)));
        
    slice6.addStop(new Stop(100, new RGB(1201297)));
        
    pieChart.addGradient(slice6);
     
        final 
    PieSeries<Dataseries = new PieSeries<Data>();
        
    series.setAngleField(dataAccess.data1());
        
    series.addColor(slice1);
        
    series.addColor(slice2);
        
    series.addColor(slice3);
        
    series.addColor(slice4);
        
    series.addColor(slice5);
        
    series.addColor(slice6);
        
    TextSprite textConfig = new TextSprite();
        
    textConfig.setFont("Arial");
        
    textConfig.setTextBaseline(TextBaseline.MIDDLE);
        
    textConfig.setFontSize(18);
        
    textConfig.setTextAnchor(TextAnchor.MIDDLE);
        
    textConfig.setZIndex(15);
        
    SeriesLabelConfig<DatalabelConfig = new SeriesLabelConfig<Data>();
        
    labelConfig.setSpriteConfig(textConfig);
        
    labelConfig.setLabelPosition(LabelPosition.START);
        
    labelConfig.setValueProvider(dataAccess.name(), new StringLabelProvider<String>());
        
    series.setLabelConfig(labelConfig);
        
    series.setHighlighting(true);
        
    series.setLegendValueProvider(dataAccess.name(), new LabelProvider<String>() {
     
          @
    Override
          
    public String getLabel(String item) {
            return 
    item.substring(03);
          }
        });
        final 
    SeriesToolTipConfig<Dataconfig = new SeriesToolTipConfig<Data>();
        
    config.setLabelProvider(null);
        
    config.setDismissDelay(0);
        
    config.setHideDelay(0);
        
    series.setToolTipConfig(config);
        
    pieChart.addSeries(series);
     
        final 
    Legend<Datalegend = new Legend<Data>();
        
    legend.setPosition(Position.BOTTOM);
        
    legend.setItemHighlighting(true);
        
    legend.setItemHiding(true);
        
    pieChart.setLegend(legend);
        
        
    series.addSeriesItemOverHandler(new SeriesItemOverHandler<Data>() {
          @
    Override
          
    public void onSeriesOverItem(SeriesItemOverEvent<Dataevent) {
            if(
    pieChart.getElement() != null) {
              
    config.setBodyHtml(getToolTipText(storeevent.getIndex()));
              
    series.setToolTipConfig(config);
            }
          }
        });
        
        final 
    Chart<DatabarChart = new Chart<Data>();
        
    barChart.setStore(store);
        
    barChart.setShadowChart(true);
        
        
    NumericAxis<Dataaxis = new NumericAxis<Data>();
        
    axis.setPosition(Position.LEFT);
        
    axis.addField(dataAccess.data1());
        
    TextSprite title = new TextSprite("Number of Hits");
        
    title.setFontSize(18);
        
    axis.setTitleConfig(title);
        
    axis.setDisplayGrid(true);
        
    axis.setWidth(50);
        
    barChart.addAxis(axis);
        
        
    CategoryAxis<DataStringcatAxis = new CategoryAxis<DataString>();
        
    catAxis.setPosition(Position.BOTTOM);
        
    catAxis.setField(dataAccess.name());
        
    title = new TextSprite("Month of the Year");
        
    title.setFontSize(18);
        
    catAxis.setTitleConfig(title);
        
    catAxis.setLabelProvider(new LabelProvider<String>() {
          @
    Override
          
    public String getLabel(String item) {
            return 
    item.substring(03);
          }
        });
        
    barChart.addAxis(catAxis);
        
        final 
    BarSeries<Datacolumn = new BarSeries<Data>();
        
    column.setYAxisPosition(Position.LEFT);
        
    column.addYField(dataAccess.data1());
        
    column.addColor(new RGB(5784111));
        
    column.setColumn(true);
        
    barChart.addSeries(column);
        
        
    column.addSeriesItemOverHandler(new SeriesItemOverHandler<Data>() {
          @
    Override
          
    public void onSeriesOverItem(SeriesItemOverEvent<Dataevent) {
            
    config.setBodyHtml(getToolTipText(storeevent.getIndex()));
            
    column.setToolTipConfig(config);
          }
        });
        
        final 
    Chart<DatalineChart = new Chart<Data>();
        
    lineChart.setStore(store);
        
    lineChart.setShadowChart(true);
     
        
    NumericAxis<DatalineAxis = new NumericAxis<Data>();
        
    lineAxis.setPosition(Position.LEFT);
        
    lineAxis.addField(dataAccess.data1());
        
    TextSprite lineTitle = new TextSprite("Number of Hits");
        
    lineTitle.setFontSize(18);
        
    lineAxis.setTitleConfig(lineTitle);
        
    lineAxis.setMinorTickSteps(1);
        
    lineAxis.setDisplayGrid(true);
        
    PathSprite odd = new PathSprite();
        
    odd.setOpacity(1);
        
    odd.setFill(new Color("#ddd"));
        
    odd.setStroke(new Color("#bbb"));
        
    odd.setStrokeWidth(0.5);
        
    lineAxis.setGridOddConfig(odd);
        
    lineAxis.setMinimum(0);
        
    lineAxis.setMaximum(100);
        
    lineChart.addAxis(lineAxis);
     
        
    CategoryAxis<DataStringlineCatAxis = new CategoryAxis<DataString>();
        
    lineCatAxis.setPosition(Position.BOTTOM);
        
    lineCatAxis.setField(dataAccess.name());
        
    lineTitle = new TextSprite("Month of the Year");
        
    lineTitle.setFontSize(18);
        
    lineCatAxis.setTitleConfig(lineTitle);
        
    lineCatAxis.setLabelProvider(new LabelProvider<String>() {
          @
    Override
          
    public String getLabel(String item) {
            return 
    item.substring(03);
          }
        });
        
    lineChart.addAxis(lineCatAxis);
     
        final 
    LineSeries<DatalineSeries = new LineSeries<Data>();
        
    lineSeries.setYAxisPosition(Position.LEFT);
        
    lineSeries.setYField(dataAccess.data1());
        
    lineSeries.setStroke(new RGB(194,0,36));
        
    lineSeries.setShowMarkers(true);
        
    Sprite marker Primitives.square(006);
        
    marker.setFill(new RGB(194,0,36));
        
    lineSeries.setMarkerConfig(marker);
        
    lineSeries.setHighlighting(true);
        
    lineChart.addSeries(lineSeries);
        
        
    lineSeries.addSeriesItemOverHandler(new SeriesItemOverHandler<Data>() {
          @
    Override
          
    public void onSeriesOverItem(SeriesItemOverEvent<Dataevent) {
            
    config.setBodyHtml(getToolTipText(storeevent.getIndex()));
            
    lineSeries.setToolTipConfig(config);
          }
        });
        
        List<
    ColumnConfig<Data?>> columns = new ArrayList<ColumnConfig<Data, ?>>();
        ColumnConfig<Data, String> labelColumnConfig;
        labelColumnConfig = new ColumnConfig<Data, String>(dataAccess.name(), 100, "Month");
        labelColumnConfig.setMenuDisabled(true);
        columns.add(labelColumnConfig);
        ColumnConfig<Data, Double> dataColumnConfig;
        dataColumnConfig = new ColumnConfig<Data, Double>(dataAccess.data1(), 100, "Amount");
        dataColumnConfig.setMenuDisabled(true);
        dataColumnConfig.setAlignment(HorizontalAlignmentConstant.endOf(Direction.LTR));
        dataColumnConfig.setCell(new AbstractCell<Double>() {
          @Override
          public void render(com.google.gwt.cell.client.Cell.Context context, Double value, SafeHtmlBuilder sb) {
            sb.appendEscaped(Format.number(value, "$###,###.00"));
          }
        });
        columns.add(dataColumnConfig);
        ColumnModel<Data> columnModel = new ColumnModel<Data>(columns);
        
        final Grid<Data> grid = new Grid<Data>(store, columnModel);
        grid.getView().setStripeRows(true);
        grid.getView().setColumnLines(true);
        grid.setBorders(true);
        
        PortalLayoutContainer portal = new PortalLayoutContainer(2);
        portal.getElement().getStyle().setBackgroundColor("white");
        portal.setColumnWidth(0, .50);
        portal.setColumnWidth(1, .50);
        
        Portlet portlet = new Portlet();
        portlet.setHeadingText("Pie Chart");
        configPanel(portlet);
        portlet.add(pieChart);
        portlet.setHeight(400);
        portal.add(portlet, 0);
        
        portlet = new Portlet();
        portlet.setHeadingText("Bar Chart");
        configPanel(portlet);
        portlet.add(barChart);
        portlet.setHeight(400);
        portal.add(portlet, 1);
          
        portlet = new Portlet();
        portlet.setHeadingText("Line Chart");
        configPanel(portlet);
        portlet.add(lineChart);
        portlet.setHeight(400);
        portal.add(portlet, 0);
        
        portlet = new Portlet();
        portlet.setHeadingText("Grid");
        configPanel(portlet);
        portlet.add(grid);
        portlet.setHeight(400);
        portal.add(portlet, 1);
     
        return portal;
      }

      private String getToolTipText(ListStore<Data> store, int index) {
        List<Data> dataList = store.getAll();
        Double total = 0.0;
        Double percentage = 0.0;
        for(int i=0; i < dataList.size(); i++) {
          total += dataList.get(i).getData1();
        }
        percentage = store.get(index).getData1()/total;
        StringBuilder toolTipBuilder = new StringBuilder();
        toolTipBuilder.append(store.get(index).getName());
        toolTipBuilder.append("<br>");
        toolTipBuilder.append(Format.number(store.get(index).getData1(), "$###,###.00"));
        toolTipBuilder.append("<br>");
        toolTipBuilder.append(Format.number(percentage, "(###.##%)"));
        return toolTipBuilder.toString();
      }  
      
      private void configPanel(final Portlet panel) {
        panel.setCollapsible(true);
        panel.setAnimCollapse(false);
        panel.getHeader().addTool(new ToolButton(ToolButton.GEAR));
        panel.getHeader().addTool(new ToolButton(ToolButton.CLOSE, new SelectHandler() {
     
          @Override
          public void onSelect(SelectEvent event) {
            panel.removeFromParent();
          }
        }));
      }

    PHP Code:
    public class Data {

      private 
    String name;
      private 
    double data1;
      private 
    double data2;
      private 
    double data3;
      private 
    double data4;
      private 
    double data5;
      private 
    double data6;
      private 
    double data7;
      private 
    double data8;
      private 
    double data9;

      public 
    Data(String namedouble data1double data2double data3double data4double data5double data6,
          
    double data7double data8double data9) {
        
    super();
        
    this.name name;
        
    this.data1 data1;
        
    this.data2 data2;
        
    this.data3 data3;
        
    this.data4 data4;
        
    this.data5 data5;
        
    this.data6 data6;
        
    this.data7 data7;
        
    this.data8 data8;
        
    this.data9 data9;
      }

      public 
    double getData1() {
        return 
    data1;
      }

      public 
    double getData2() {
        return 
    data2;
      }

      public 
    double getData3() {
        return 
    data3;
      }

      public 
    double getData4() {
        return 
    data4;
      }

      public 
    double getData5() {
        return 
    data5;
      }

      public 
    double getData6() {
        return 
    data6;
      }

      public 
    double getData7() {
        return 
    data7;
      }

      public 
    double getData8() {
        return 
    data8;
      }

      public 
    double getData9() {
        return 
    data9;
      }

      public 
    String getName() {
        return 
    name;
      }

      public 
    void setData1(double data1) {
        
    this.data1 data1;
      }

      public 
    void setData2(double data2) {
        
    this.data2 data2;
      }

      public 
    void setData3(double data3) {
        
    this.data3 data3;
      }

      public 
    void setData4(double data4) {
        
    this.data4 data4;
      }

      public 
    void setData5(double data5) {
        
    this.data5 data5;
      }

      public 
    void setData6(double data6) {
        
    this.data6 data6;
      }

      public 
    void setData7(double data7) {
        
    this.data7 data7;
      }

      public 
    void setData8(double data8) {
        
    this.data8 data8;
      }

      public 
    void setData9(double data9) {
        
    this.data9 data9;
      }

      public 
    void setName(String name) {
        
    this.name name;
      }


    PHP Code:
    public class TestData {
      private static final 
    String[] monthsFull = new String[] {
       
    "January""February""March""April""May""June""July""August""September""October""November",
       
    "December"};

      public static List<
    DatagetData(int sizedouble mindouble scale) {
         List<
    Datadata = new ArrayList<Data>();
         for (
    int i 0sizei++) {
           
    data.add(new Data(monthsFull[monthsFull.length], Math.floor(Math.max(Math.random() * scalemin)), Math.floor(Math.max(Math.random() * scalemin)),
               
    Math.floor(Math.max(Math.random() * scalemin)), Math.floor(Math.max(Math.random() * scalemin)), Math.floor(Math.max(Math.random() * scalemin)),
               
    Math.floor(Math.max(Math.random() * scalemin)), Math.floor(Math.max(Math.random() * scalemin)), Math.floor(Math.max(Math.random() * scalemin)),
               
    Math.floor(Math.max(Math.random() * scalemin))));
         }
         return 
    data;
       }


  2. #2
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    This sounds like an issue. I will move this thread to the bugs forum.

    You might want to try to change the hidemode of the widget that you are adding to the TabPanel to HideMode.OFFSETS.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    117
    Vote Rating
    0
    tmancini is on a distinguished road

      0  

    Default


    I was able to fix the issue of the PieChart's colors showing as black by changing the Gradient Ids to be different than those on the first tab. Changing the hidemode did not appear to do anything.

    Just another question, how would I go about forcing all of the tabs to render when the module is loaded instead of waiting until the tab is selected to render? Thanks.

  4. #4
    Sencha User WesleyMoy's Avatar
    Join Date
    Oct 2009
    Location
    Redwood City, California
    Posts
    402
    Vote Rating
    2
    WesleyMoy is on a distinguished road

      0  

    Default


    Can you confirm that this is an issue in 3.0.2? If so, which browsers have you noticed this issue in? This will help us narrow down which components of GXT are to be investigated.

Thread Participants: 2