You need to sign in to do that
Don't have an account?
John Rogers 4
How to rerender multiple charts
I'm trying to rerender two apex chart components after a form field change, and can only seem to rerender one of them.
Here's my page:
And my controller:
And the resulting output:
Output after changing the first chart form field to '3':
Output after changing the second chart form field to '4':
The rerender seems to be only able to generate one chart, and that's the chart closes to the actionSupport component. Is this a bug on Salesforce's side and if not, how do I modify the page/controller so both charts can be rerendered?
Here's my page:
<apex:page showHeader="false" sidebar="false" controller="chartTestCtrl"> <style> .chartContainer { width: 700px; background: #57b6dd; text-align: center; display: inline-block; margin-right: 10px; } .chartContainer h1, .chartContainer h2 { display: block; color: #000; } .chartContainer h1 { padding: 20px 0 10px 0; font-size: 30px; font-weight: 300; } .block { display: block; } </style> <apex:form id="chartsForm"> <apex:outputPanel layout="block" id="charts"> <apex:repeat value="{!charts}" var="chart"> <div class="chartContainer"> <h1> Chart {!chart.chartNumber} </h1> <apex:inputText value="{!chart.chartNumber}"> <!-- Subsitutig any of the below actionSupport components does not change the result --> <!-- <apex:actionSupport action="{!doSomething}" event="onchange" reRender="{!Component.charts}"/> --> <apex:actionSupport action="{!doSomething}" event="onchange" reRender="charts"/> <!-- <apex:actionSupport action="{!doSomething}" event="onchange" reRender="chartsForm"/> --> <!-- <apex:actionSupport action="{!doSomething}" event="onchange" reRender="{!$Component.chartsForm}"/> --> </apex:inputText> <span id='chart-{!chart.chartNumber}'> </span> <apex:chart height="400" width="700" legend="true" data="{!chart.data}" renderto="chart-{!chart.chartNumber}" rendered="true"> <apex:axis type="Category" position="bottom" fields="category"/> <apex:axis type="Numeric" minimum="0" maximum="5" position="left" fields="value"/> <apex:barSeries orientation="vertical" title="Bar Series" axis="bottom" xField="category" yField="value"/> </apex:chart> </div> </apex:repeat> </apex:outputPanel> </apex:form> </apex:page>
And my controller:
public with sharing class chartTestCtrl { private static Integer COUNT = 0; public List<Chart> charts {get;set;} public chartTestCtrl() { charts = new List<Chart> { new Chart(), new Chart() }; } public void doSomething() { } public class Chart { public Integer chartNumber {get;set;} public List<Data> data {get;set;} public Chart() { COUNT++; chartNumber = COUNT; data = new List<Data> {new Data()}; } } public class Data { public String category {get;set;} public Integer value {get; set;} public Data() { category = 'C ' + COUNT; value = COUNT; } } }
And the resulting output:
Output after changing the first chart form field to '3':
Output after changing the second chart form field to '4':
The rerender seems to be only able to generate one chart, and that's the chart closes to the actionSupport component. Is this a bug on Salesforce's side and if not, how do I modify the page/controller so both charts can be rerendered?
Thanks.
If you run the example in your own org you'll find that you can display all of the information contained within the controller properties in the rerendered container. It's just the second chart that won't render.
Thanks for your help!