Hi

I have to show 5 Guge charts inside a list based on a list value. I have included a apex:chart inside a apex:repeat. But the all the Guage charts are grouped together & displayed in the position of 1st chart as the screen shot below:



My VF page:

<apex:page controller="guageDatas">
<h1>The Guages</h1>
  <apex:repeat value="{!GuageList}" var="gua" >
  <apex:outputPanel layout="block" style="border:1px solid blue; margin:20px; width:50%">
        <br/>
        <apex:outputText value="{!gua}"></apex:outputText>
        <apex:chart id="guageChart" height="100" width="250" animate="true" data="{!GuageData}">
           <apex:axis type="Gauge" position="gauge" title="Closed Won Opportunities"  minimum="0" maximum="100" steps="10"/>
           <apex:gaugeSeries dataField="value" donut="50" colorSet="#78c953,#ddd" needle="{!OR(gua == 'Guage2', gua == 'Guage4')}"/>
       </apex:chart>
    </apex:outputPanel>
</apex:repeat>
</apex:page>

And the controller:
 

public with sharing class guageDatas {
    public List<string> getGuageList(){
      return new List<string>{'Guage1', 'Guage2', 'Guage3', 'Guage4', 'Guage5'};
    }
    
    
    public List<guageValue> getGuageData(){
      List<guageValue> chartData = new List<guageValue>();
      chartData.add(new guageValue());
      return chartData;
    }
    
    
   public Class guageValue  {
        public String name {get;set;}
        public Double value {get;set;}
        public guageValue(){
            this.value = Math.random()*100;            
            this.name = 'Guage'+this.value;
        }
    }


}

How can I display the Guage charts in repective columns. In my orginal page I can't avoid the apex:repeater