Chart component renders to incorrect container when used in pageBlockTable or repeat
Last updated 2016-07-28 ·Reference W-1958046 ·Reported By 2 users
No Fix
Summary
Chart component renders to incorrect container when used in pageBlockTable or repeat.
Repro
Reproducible in any org.
1. Create a VF page with a chart component in a repeat or pageblocktable element :
<apex:page controller="ChartController" showHeader="false">
<apex:form id="chartform">
<apex:pageBlock title="My Content">
<apex:pageBlockButtons>
<apex:commandButton reRender="chartform" value="Refresh" />
</apex:pageBlockButtons>
<apex:pageBlockTable value="{!chartdata}" var="data">
<apex:column headerValue="Row">Row</apex:column>
<apex:column headerValue="Chart">
<apex:chart data="{!data}" height="150" width="150">
<apex:pieSeries labelField="label" dataField="value"></apex:pieSeries>
</apex:chart>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>
2. Create a controller:
public class ChartController {
public List<List<cdata>> getChartData() {
List<List<cdata>> data = new List<List<cdata>>();
data.add(new List<cdata>{ new cdata('val 0',20), new cdata('val 1',100) });
data.add(new List<cdata>{ new cdata('val 2',200), new cdata('val 3',50) });
return data;
}
public class cdata {
public string label { get; set; }
public integer value { get; set; }
public cdata(String l, Integer v) {
label = l;
value = v;
}
}
}
3. View the page.
EXPECTED RESULT:
A chart should be rendered in each of the appropriate rows
ACTUAL RESULT:
The charts are rendered in the same row
Workaround
An alternative to this would be to use a unique value from each record in the associated record set (e.g. record Id), to generate a unique DOM id for a standard HTML element container. Example:
<apex:pageblockTable value="{!Accs}" var="a">
<apex:column value="{!a.name}"/>
<apex:column headerValue="Chart">
<span id="chart_{!a.id}" />
<apex:chart data="dataArray" height="100" width="100" renderTo="chart_{!a.Id}">
<apex:pieSeries labelField="name" dataField="val"/>
</apex:chart>
</apex:column>
</apex:pageblockTable>
Reported By (2)
Is it Fixed?
Any unreleased services, features, statuses, or dates referenced in this or other public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make their purchase decisions based upon features that are currently available.
