GWT-Highcharts resizing or scaling issue

[GeneticMogambo]

hi Shawn
Hope you can answer this. I have already read your previous comments on resizing and rescaling but I did not find my answers there.

Here is my issue. -

I am currently trying to display 'click to add points' chart from gwt-highcharts showcase in the following ui.xml of mine. I provide a snippet below. I am adding it into the g:HTMLPanel with ui:field attribute 'controlPanelTopChart. (artifact 2) I noticed that the bottom of the chart was getting clipped of. So I changed my css to be as follows (see artifact 1)
This still did not help. At this point in my java code i added the method setHeight100(). I also tried setSizeToMatchingContainer but that too did not help. With setHeight100() I noticed the following, when the browser loads initially the bottom of the chart is clipped of. If I resize the browser then the chart rescales and thereafter the scaling works well and the chart is visible completely. Hope you can help with this. Can you let me know what is going on and how I can resolve this. Please let me know if you need anything more from me.
Artifact1

.floatPanelHorizontalAlignment{
    float:left;
    max-width:100%;
    height:100%
}

Artifact 2

<g:DockLayoutPanel ui:field="tabContentControl"  styleName="{res.style.tabContentArea}" unit="PCT">
                <g:north size = "50">
                    <g:CaptionPanel captionHTML="&#60;b&#62;Output&#60;&#47;b&#62;" styleName="{res.style.topCaption}">
                        <g:FlowPanel ui:field="ctTopFlowPanel" styleName="{res.style.floatPanelHorizontalAlignment}">
                             <g:HTMLPanel styleName="{res.style.floatPanelHorizontalAlignment}" ui:field="controlPanelTopChart">

                              <!-- 
                              <div id="chartContainer"  style="width:600px;height:250px; margin:0"></div>   
                                 -->                        
                            </g:HTMLPanel>

                            <g:FlowPanel styleName="{res.style.floatPanelHorizontalAlignment}">
                            <g:HTML >

                            innerOne                                            
                            </g:HTML>
                            <g:HTML >

                            innerTow                                            
                            </g:HTML>

                            </g:FlowPanel>

                            <g:HTML styleName="{res.style.floatPanelHorizontalAlignment}">

                            three
                            </g:HTML>
                        </g:FlowPanel>

                    </g:CaptionPanel>

                </g:north>
                <g:center >
                    <g:HTML>

                    center
                    </g:HTML>

                </g:center>
                <g:south size = "40">
                    <g:HTML>

                        South
                    </g:HTML>

                </g:south>
                </g:DockLayoutPanel>

[GeneticMogambo]

I am attaching two images that might help.

1. Image 1 - ChartBottomclippedOff- shows how the chart displays on initial load of the browser, with clipped off bottom
2. Image 2 - after resizing the browser window, the chart displays normally, no more clipping.

[GeneticMogambo]

Image 1 - ChartBottomclippedOff- shows how the chart displays on initial load of the browser, with clipped off bottom

[Shawn Quinn]

Hard to tell what may be going on here without a full code example, but here are a few things for you to consider when you're trying to support dynamically sized charts (as opposed to fixed width/height):

1. By default Highcharts attempts to resize itself to match the size of whatever div/container element it's inside of, and watches for whenever the browser window size changes to trigger the resizing logic. You can enable/disable that functionality using the Chart.setReflow() option.

2. If you want to trigger the chart to update its size on your own (instead of waiting for the browser window resize event), you can explicitly call the Chart.reflow() method.

3. Depending on what you're doing in the DOM, it's important to make sure that the chart has a chance to reflow itself once the size of the container is stable. If the container is hidden at first or part of an animation (for example) that could affect the size that Highcharts is able to determine. In one of our projects here the chart size can't be acurately determined until after an animation has taken place. So, we use "Chart.setReflow(false)" to prevent Highcharts from attempting to resize itself during the animation. And then we use code like the following to ensure that the chart is resized correctly after the animation is done (would have been even nicer to do this in an animation "end" event instead of a timer, but in our case it was a CSS animation so no real "end" event is available).

// Wait a moment for the animation to end, and then let the chart update its size
Timer timer = new Timer() {
    public void run() {
        menuStatsChart.reflow();
    }
};
timer.schedule(100);

1. If you don't want to use Highcharts automatic "resize/reflow" logic, you can always just manage the chart size on your own as well. E.g. set "chart.setReflow(false)" and then something like the following whenever you want the chart size updated:

chart.setSize(container.getOffsetWidth() + "px", container.getOffsetHeight() + "px");

Hope that helps!

[GeneticMogambo]

hi Shawn
thanks for the suggestions, as soon as I get time time I will try these in successive order to see which ones work for me. If still not able to resolve, I might share some more code so that you can have better understanding. Nevertheless I will keep you updated.

[GeneticMogambo]

hi Shawn
I finally managed to fix the scaling issue. This is what i had to do
I set up a separate sandbox project out of the formal project so I could do all kinds of nasty things there. I noticed that GWT.log(this.controlPanelTopChart.getElementById("chartContainer").getClientWidth() + " Offsetwidth"); never returned any width so finally I had to go to window height and use vw.

Also I changed my layout. I initially had DockLayout and then flowPanel within it but flowPanel does not allow scaling. So I changed it to DockLayoutPanel with DockLayout within it. See below my Ui.xml and a screen shot of the sandbox project.

Had a question for you. What are your thoughts on it ? Do you see any pitfalls ? Any suggestions for improvements ?

Thanks for your help.

//adding the chart
        ChartCreatorFactory chartFactory = new ChartCreatorFactory();
        TippingPointChartCreator tippingChartCreator = chartFactory.getChartCreator("ctpSpline");
        splineChart = tippingChartCreator.createTippingChart();
        this.controlPanelTopChart.add(splineChart, "chartContainer");
        GWT.log(this.controlPanelTopChart.getElementById("chartContainer").getClientWidth() + " Offsetwidth");
        splineChart.setSize("49.3vw", "46.2vh");
        GWT.log(Window.getClientWidth() + " window Width");
        GWT.log(Window.getClientHeight() + " window Height");

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style>      
        .eastPanel {
            background-color: #F60;
        }
        .westPanel {
            background-color: #EEE;
        }
        .northPanel {
            background-color: #39F;
        }
        .southPanel {
            background-color: #99C;
        }
        .centerPanel {
            background-color: #FFC;
        }  
        .floatPanelHorizontalAlignment{

            border:1px solid red;
        } 
        .chartContainerWidth{
            height:99%;
            margin-right:.2em;

        }

        .topCheckBoxWidth{
            width:10%;
            margin-right:1em;
            height:100%;
        }

        .topColumnContainerWidth{

            height:99%;
            margin-left:.2em;

        }
        /**style for the topCaption container on contentPanel**/
    .topCaption {
        border-color:#47719C;
        border-radius:8px;
        padding:2px;

    }

        .topFlowPanel{
            height: 100%;

        }

    </ui:style>
     <g:DockLayoutPanel unit="PCT">

       <g:north size="50">
       <g:CaptionPanel captionHTML="&#60;b&#62;Output&#60;&#47;b&#62;" styleName="{style.topCaption} {style.northPanel}">
         <g:DockLayoutPanel addStyleNames="{style.topFlowPanel} " unit="PCT">
            <g:west size="50">
             <g:HTMLPanel addStyleNames="{style.floatPanelHorizontalAlignment} {style.chartContainerWidth}" ui:field="controlPanelTopChart">
                        <!-- <g:HTML >

                            Left                                            
                            </g:HTML> -->

                        <div id="chartContainer" >

                        </div>   

                            </g:HTMLPanel>
            </g:west>
                    <g:center>
                        <g:DockLayoutPanel addStyleNames="{style.floatPanelHorizontalAlignment} " >
                            <g:north size="50">

                            <g:HTML >

                            innerOne                                            
                            </g:HTML>

                            </g:north>

                            <g:south size="50">

                                <g:HTML >

                            innerTow                                            
                            </g:HTML>

                            </g:south>

                        </g:DockLayoutPanel>

                    </g:center>  

                    <g:east size="40" >
                    <g:HTML addStyleNames="{style.floatPanelHorizontalAlignment} {style.topColumnContainerWidth}" >

                            three
                            </g:HTML> 

                    </g:east>       

         </g:DockLayoutPanel>
        </g:CaptionPanel>
       </g:north>

     <!--   <g:west size="15">
         <g:FlowPanel styleName="{style.westPanel}">
           <g:Label>This is the WEST panel</g:Label>
         </g:FlowPanel>
       </g:west> -->
       <g:center>
         <g:FlowPanel styleName="{style.centerPanel}">
           <g:Label>This is the CENTER panel</g:Label>
         </g:FlowPanel>
       </g:center>
       <!-- <g:east size="15">
         <g:FlowPanel styleName="{style.eastPanel}">
           <g:Label>This is the EAST panel</g:Label>
         </g:FlowPanel>
       </g:east>  -->      
        <g:south size="40">
         <g:FlowPanel styleName="{style.southPanel}">
           <g:Label>This is the SOUTH panel</g:Label>
         </g:FlowPanel>
        </g:south>     
     </g:DockLayoutPanel>
</ui:UiBinder>