You need to sign in to do that
Don't have an account?
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
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>
I am having the exact same issue trying to put an apex:pieSeries within a apex:repeat. I don't see any workarounds either.
<apex:repeat value="{!MyList}" var="theObj" id="theRepeat">
<span id='{!theObj.myId}'> </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>
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