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:

<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}'>&nbsp;</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?

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:

<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}'>&nbsp;</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?

More of a theoretical question - in the displayfields function below is it possible to do what I've done in pseudocode?

 

main(){
  sobject acc = [select name, phone from account limit 1];
  displayfields(acc);
}

static void displayfields(sobject x){
  //somehow loop through the available fields on the sobject
  //and display them
  for(field f:x.fields) system.debug(f.fieldname);  //should print out "name" , "phone"
}

 

Thanks!

 

Tyler