+ Start a Discussion
Alok AgrawalAlok Agrawal 

Issue when using Visualforce Chart inside Apex Repeat / DataTable

Hi,

 

I am trying to create multiple charts on a VF page by including the apex:chart component inside an apex:repeat or apex:datatable component. I have created a wrapper class that includes field elements as well as chart data. I expected that when the page is renderd, the structure would be as follows

<tr>

<td>Field</td>

<td><span><div>chart1</div></span></td>

</tr>

<tr>

<td>Field</td>

<td><span>chart2</span></td>

</tr>

 

however, when the page renders, all charts included inside the span of the first row. eg..

<tr>

<td>Field</td>

<td><span><div>chart1</div><div>chart2</div></span></td>

</tr>

<tr>

<td>Field</td>

<td><span></span></td>

</tr>

 

I am not sure if I am doing something wrong here or if this is a bug. My VF code is as follows..

<apex:dataTable var="f" value="{!achievements}">
<apex:column >
<apex:outputText value="{!f.oInstance.Account__r.Name}"/>
</apex:column>
<apex:column >
<apex:chart height="125" width="285" animate="true" data="{!f.ChartData}">
<apex:axis type="Gauge" position="gauge" title="{!f.ChartData[0].data1}%" minimum="0" maximum="150" steps="5"/>
<apex:gaugeSeries dataField="data1" labelField="label" needle="false" donut="65" colorSet="#78c953,#ddd"/>
</apex:chart>
</apex:column>
</apex:dataTable>

 

I also tried to solve this issue by trying to force the chart to render inside a specific component using the renderto attribute. However, this required use of a variable to generate dynamic ids for the components and as of now this doesn't seem to be supported. The error message asked me to use a literal value for the id attribute.

 

Please help!!!

 

Thanks,

Alok Agrawal

 

reatlimecoreatlimeco

Having a similar problem in Winter 14.  Puts all the series and axis from the follow on charts into the first chart:

 

<apex:page controller="PresentorController">
<apex:messages />
 <apex:form >
 <table width="100%">
 <tr>
 <apex:repeat value="{!ListOfColumns}" var="c">
 <td colspan="1" style="width: 100%">

 <apex:outputPanel >
  <apex:pageBlock >
  <apex:outputPanel rendered="true">
   <apex:chart data="{!testChartData}"  height="100"  width="100%">
        <apex:axis fields="data1"  position="left"  type="Numeric" title="Left" grid="true"/>
         <apex:axis fields="name"  position="bottom"  type="Category"  title="Bottom" />  
        <apex:lineSeries axis="left" xField="name" yField="data1" fill="true" markerType="cross" markersize="4" markerFill="#FF0000" title="line Series"/>
        </apex:chart>
        </apex:outputPanel>
        </apex:pageBlock>
        </apex:outputPanel>
        </td>
        </apex:repeat>
 </tr>
 </table>
</apex:form>
</apex:page>

MikeLyonsMikeLyons

I am having the exact same issue trying to put an apex:pieSeries within a apex:repeat.  I don't see any workarounds either.

MikeLyonsMikeLyons
I actually was able to solve this by putting a <span> tag in the repeat with id and using the renderto option on the apex:chart.

<apex:repeat value="{!MyList}" var="theObj" id="theRepeat">
<span id='{!theObj.myId}'>&nbsp;</span>
<apex:chart renderto='{!theObj.myId}' height="200" width="300" data="{!theObj.pieData}">
<apex:pieSeries dataField="data" labelField="name" highlight="false"/>
</apex:chart><br/>
</apex:repeat>
brent1.3910115949498174E12brent1.3910115949498174E12
MikeLyons solution works, even when the chart  is in a custom component within a repeat.  Kudos Mike!
MikesForceMikesForce

The workaround seems to be working around once when the page is rendered, but I'm having a hard time trying to update it.
I have the above structure in an <apex:outputPanel> (with some other components) and trying to update (reRender) the output panel.

The other compnents are updating fine, but the chats do not show up any more. (Only on a full page refresh which resets all).

Have tried to

  • move the <span> out of the repeat (actually works once, all charts rendered under one ID) but does not update either
  • recreate a new ID (timestamp) for each update but no luck, rerendering does not work, charts just disappear
Desarrollo FreewayDesarrollo Freeway
@MikesForce, were you able to solve your issue? I´m facing the same problem with rerender...