2

I have a visualforce page in which I lazy load elements (otherwise the page would take forever to load). I load charts with each call of a javascript function, but for whatever reason the charts do not load. If i load the charts without a re-render (make charts load from controller constructor) then the charts load perfectly fine. That's how i know the re-rendering is the problem

here is the relevant part of my visualforce page:

            <apex:repeat value="{!allComponents}" var="comp">
            <div class="componentCard">
                    <div>
                        <h1 class="boldFont headerFontSize textCenter">{!comp.componentName}</h1>
                    </div>
                    <div class="sixteenFontSize inlineBlock">
                        <apex:repeat value="{!comp.componentMetrics}" var="metric">
                            <apex:outputLabel value="{!metric.label}:"/>
                            <apex:outputLabel styleClass="boldFont" value="{!metric.value}"/>
                            <br/>
                            <br/>
                        </apex:repeat>
                    </div>
                    <apex:variable var="GraphCounter" value="{!0}"/>
                    <apex:repeat value="{!comp.componentGraphs}" var="grph">
                        <div Id="{!comp.componentName}-Graph-{!GraphCounter}" style="" class="width70 height100 inlineBlock lightBorder">
                            <apex:outputPanel >
                            <apex:chart height="200px" width="100%" data="{!grph.graphData}" resizable="true" renderTo="{!comp.componentName}-Graph-{!GraphCounter}">
                                <apex:axis type="Numeric" position="left" fields="yVal" title="{!grph.yAxisLabel}"/>
                                <apex:axis type="Category" position="bottom" fields="xVal" title="{!grph.xAxisLabel}"/>
                                <apex:lineSeries title="Average Player Count" axis="left" xField="xVal" yField="yVal" markerType="circle" strokeWidth="3" fillColor="blue" />
                            </apex:chart>
                            </apex:outputPanel>
                        </div>
                        <apex:variable var="GraphCounter" value="{!GraphCounter + 1}"/>
                    </apex:repeat>
            </div>
        </apex:repeat>
        <apex:outputPanel rendered="{!componentsLeftToRender}">
            <script>
                renderNextComponent();
            </script>
        </apex:outputPanel>

and here is the function called by renderNextComponent

   public void loadNextComponent()
    {
        allComponents[numComponentsRendered].loadComponent();
        allComponents[numComponentsRendered].componentLoaded = true;
        numComponentsRendered++;
        if(numComponentsRendered == allComponents.size())
            componentsLeftToRender = false;
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.