charts overlapping across frames

[nkson]

I am using smart gwt and the GWT highcharts 1.4 in my application. And I am creating multiple tabs in my application ( one for each type of chart). Each tab has its own chart or set of charts. But the problem is that whenever the next tab is opened the previous tab shows an overlapped shadow of the chart in the new tab. This pretty much makes it impossible for me to use GWT highcharts which is a pity because otherwise it works perfectly and looks great for our application. I am doing research right now on the feasibility of GWT highcharts for our application. Is there a solution/workaround for this problem?

[Aleksandar]

Hi nkson, I had the same problem , and this is what I did to make it work somehow

final MyTabView liveView = new MyTabView();
tab.setPane(liveView);

                tab.addTabDeselectedHandler(new TabDeselectedHandler() {

                    @Override
                    public void onTabDeselected(TabDeselectedEvent event) {
                        liveView.hideCharts();

                    }
                });

                tab.addTabSelectedHandler(new TabSelectedHandler() {

                    @Override
                    public void onTabSelected(TabSelectedEvent event) {
                        liveView.showCharts();

                    }
                });

[Shawn Quinn]

Yeah, this appears to be some kind of z-index issue with the way Highcharts is utilizing the Canvas/SVG elements, and seems to affect different browsers differently. (So, this is actually an issue within Highcharts itself, and nothing in particular to do with GWT Highcharts). A few options have been discussed on the Highcharts forums to work around this, but the best I've found is to make sure the charts are hidden when a tab loses focus. So, you'll need to do something like the option that Alexsandar noted above. In our application we do this when a tab is being deselected:

panel.setVisible(false);
panel.setLeft(-100000);

And then this when it is selected:

panel.setLeft(0);
panel.setVisible(true);

Hope that helps.

[Aleksandar]

Hi Shawn, thanks for a quick reply, and I also want to thank you for the great work you did to make highcharts available for us who are using GWT.
Just wanted to share what I did to make it work with smart gwt . I made a smart gwt wrapper component for Chart , so making it setVisible(false) for both wraping Canvas and StockChart , actually made it to hide (setting just setVisible(false) for chart doesnt help)

    public class MyChartCanvas extends Canvas{

private StockChart stockChart;

public MyChartCanvas() {
    super();
    addResizedHandler(new ResizedHandler() {

        @Override
        public void onResized(ResizedEvent event) {
            if (stockChart != null){
                refreshChartSize();
            }

        }
    });
}

public void refreshChartSize(){
    stockChart.setSize(getWidth(), getHeight() - 3);
}

@Override
public void setVisible(boolean visible) {
    super.setVisible(visible);

    if (stockChart != null){
        stockChart.setVisible(visible);
    }

}

@Override
public void addChild(Widget widget) {
    super.addChild(widget);

    if (widget instanceof StockChart){
        stockChart = (StockChart) widget;
    }

}

}