Apex Chart not loading on vf page

Question

I am trying to show an apex:chart on a Visualforce Page, but I receive a javascript error:

SfdcCore.js:384 Visualforce Chart: Error loading configuration for chart 'jid0jid1pbjid6jid7': Did not find required field 'Name' in data for chart 'jid0jid1pbjid6jid7'. Make sure field was queried and/or provided and has a value.

Can anyone let me know what I am missing?

Class

public list<wrapperclass> getPieData() {
 List<wrapperclass> data = new List<wrapperclass>();

List<Work_Order_Item__c> memb = new List<Work_Order_Item__c>();  


 AggregateResult[] groupedResults  = [SELECT  Product__r.Family f,count(Id) c
        FROM Work_Order_Item__c
        WHERE Product__r.Family != null
        GROUP BY Product__r.Family];

 system.debug('@@@@'+ groupedResults);
 system.debug('@@@@'+ groupedResults.size());
 for (AggregateResult ar : groupedResults)  {            

                    data.add(new wrapperclass(String.ValueOf(ar.get('f')),Double.ValueOf(ar.get('c'))));

             } 
             system.debug('@@@@'+ data);

             return data; 

}
public class wrapperclass{
public String name { get; set; }  
 public Decimal data { get; set; }  

public wrapperclass(String Name,Decimal data) {
this.name = name; 
  this.data = data;
}
}

Page

<apex:pageblockSection title="Summary">

        <apex:chart height="350" width="450" data="{!pieData}">
            <apex:pieSeries dataField="data" labelField="Name"/>
            <apex:legend position="bottom"/>
        </apex:chart>


        </apex:pageblockSection>

Debug Log

|USER_DEBUG|[57]|DEBUG|@@@@(AggregateResult:{f=Bedding, c=26})

|USER_DEBUG|[64]|DEBUG|@@@@(wrapperclass:[data=26.0, name=Bedding])

Answer 1

Javascript is case-sensitive. Try using the same casing in your class properties as you use in your labelField attribute (either both name or both Name).