1

I have a strange issue. I have a component that constructs a visualforce line chart:

<apex:component id="ShowGraph" layout="block" controller="ControllerShowGraph" selfClosing="true">
<apex:messages />
<apex:attribute required="true" type="String" name="Show" description="The Show to make a graph of" assignTo="{!showId}"/>
<apex:attribute required="true" type="String" name="Type" description="What type of graph should be constructed" assignTo="{!graphType}"/>
<apex:attribute required="false" type="Date" name="StartDataDate" description="The Date in which to start the graph data" assignTo="{!startDate}"/>
<apex:attribute required="false" type="Date" name="EndDataDate" description="The Date in which to end the graph data" assignTo="{!endDate}"/>

<apex:chart height="400" width="1000" data="{!showData}">
    <apex:axis type="Numeric" position="left" fields="averagePlayerCount,playerCountGameOne,playerCountGameTwo" title="Player Count"/>
    <apex:axis type="Category" position="bottom" fields="formattedShowDate" title="Date of Show {!shw.Name}"/>
    <apex:lineSeries title="Average Player Count" axis="left" xField="formattedShowDate" yField="averagePlayerCount" markerType="circle" strokeWidth="3" fillColor="blue" />
    <apex:lineSeries title="Game One Player Count" axis="left" xField="formattedShowDate" yField="playerCountGameOne"/>
    <apex:lineSeries title="Game Two Player Count" axis="left" xField="formattedShowDate" yField="playerCountGameTwo"/>
    <apex:legend position="right"/>
</apex:chart>

I am calling it in my main page like this:

<apex:pageblock title="Show Performance" rendered="{!allActiveShowsHosting.size != 0}">
        <apex:repeat value="{!allActiveShowsHosting}" var="shw">
            <apex:pageBlockSection title="{!shw.Name} {!numWeeksToGoBack} week player counts">
                <c:ShowGraph Show="{!shw.Id}" Type="Player Count" StartDataDate="{!graphStartDate}"/>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="{!shw.Name} Lifetime player counts">
                <c:ShowGraph Show="{!shw.Id}" Type="Player Count"/>
            </apex:pageBlockSection>
        </apex:repeat>
    </apex:pageblock>

but for some reason visualforce is forcing charts to go into the same page block section:

One pageblock has two charts while other has none

As you can see from the picture, the first pageblock section is getting two charts while others have zero. Any clue what could be causing this issue?

1

Found out that you can specify what element to render the chart in via the "RenderTo" attribute of apex charts. I don't know why this needed to be set, but setting it fixed my issue:

The Final Component:

<apex:component id="ShowGraph" layout="block" controller="ControllerShowGraph" selfClosing="true">
<apex:attribute required="true" type="String" name="Show" description="The Show to make a graph of" assignTo="{!showId}"/>
<apex:attribute required="true" type="String" name="Type" description="What type of graph should be constructed" assignTo="{!graphType}"/>
<apex:attribute required="false" type="Date" name="StartDataDate" description="The Date in which to start the graph data" assignTo="{!startDate}"/>
<apex:attribute required="false" type="Date" name="EndDataDate" description="The Date in which to end the graph data" assignTo="{!endDate}"/>
<apex:attribute required="false" type="string" name="width" description="The width(in pixels or %) of the graph" assignTo="{!graphWidth}" default="1000"/>
<apex:attribute required="false" type="string" name="height" description="The Height(in pixels or %) of the graph" assignTo="{!graphHeight}" default="400"/>
<apex:attribute required="false" type="string" name="binder" description="Id of Element to bind to" assignTo="{!bindId}"/>

<apex:outputPanel id="graphSection">
    <apex:messages />
    <apex:chart height="{!graphHeight}" width="{!graphWidth}" data="{!showData}" renderTo="{!bindId}">
        <apex:axis type="Numeric" position="left" fields="averagePlayerCount,playerCountGameOne,playerCountGameTwo" title="Player Count"/>
        <apex:axis type="Category" position="bottom" fields="formattedShowDate" title="Date of Show {!shw.Name}"/>
        <apex:lineSeries title="Average Player Count" axis="left" xField="formattedShowDate" yField="averagePlayerCount" markerType="circle" strokeWidth="3" fillColor="blue" />
        <apex:lineSeries title="Game One Player Count" axis="left" xField="formattedShowDate" yField="playerCountGameOne"/>
        <apex:lineSeries title="Game Two Player Count" axis="left" xField="formattedShowDate" yField="playerCountGameTwo"/>
        <apex:legend position="right"/>
    </apex:chart>
</apex:outputPanel>

calling it in my page:

 <apex:pageblock title="Show Performance" rendered="{!allActiveShowsHosting.size != 0}">
        <apex:variable value="{!0}" var="counter"/>
        <apex:repeat value="{!allActiveShowsHosting}" var="shw">

            <apex:pageBlockSection title="{!shw.Name} {!numWeeksToGoBack} week player counts">
                <div Id="recentShowStats-{!counter}"></div>
                <c:ShowGraph Show="{!shw.Id}" Type="Player Count" StartDataDate="{!graphStartDate}" binder="recentShowStats-{!counter}" />
            </apex:pageBlockSection>

            <apex:pageBlockSection title="{!shw.Name} Lifetime player counts">
                <div Id="lifetimeShowStats-{!counter}"></div>
                <c:ShowGraph Show="{!shw.Id}" Type="Player Count" binder="lifetimeShowStats-{!counter}"/>
            </apex:pageBlockSection>

            <apex:variable value="{!counter + 1}" var="counter"/>
        </apex:repeat>
    </apex:pageblock>

hopefully this helps anyone else who runs into this problem

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.