Visualforce forcing components together

Question

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:

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?

Answer 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