Unable to get Visualforce chart to render

Question

I'm not exactly sure how to map the "data" field of the apex:chart component. I created a simple test class but it's not showing the chart at all. I'm really scratching my head here because this is pretty basic stuff.

Apex Class

public with sharing class testPage {

    public List<Interaction__c> getInts(){

        List<oInteraction__c> i = [Select Id, Product__c from Interaction__c];
        return i;
    }

}

VF Page:

<apex:page controller="testPage">
    <apex:form >
    <apex:outputPanel id="section">
        <div class="wi-gen shado gr">
            <div class="marged">
                <h1 class="header">My Interactions By Product</h1>
            </div>          
            <apex:outputPanel id="chart">           
                <div class="marged ver2">
                    <apex:chart id="mainChart" data="{!ints}" height="2000" width="2000" background="#F5F5F5">
                        <apex:legend position="right"/>
                        <apex:pieSeries labelField="Product__c" dataField="Product__c" donut="50"/>
                    </apex:chart>
                </div>
            </apex:outputPanel>
        </div>
    </apex:outputPanel>
    </apex:form>
</apex:page>

The Firebug error message suggests that ints is not being picked up:

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

Answer 1

When you are using VF Charting - all your data has to be coming from your Data="" attribute.

So with your example it's looking for a reference of "Product__c" within your INTS list.

One method to do this is to create a wrapper class. the class will contain all the points you need. An example:

public static List<Data> getChartData() {
        List<Data> data = new List<Data>();
        data.add(new Data('Jan', 30, 90, 55));
        data.add(new Data('Feb', 44, 15, 65));
        data.add(new Data('Mar', 25, 32, 75));
        data.add(new Data('Apr', 74, 28, 85));
        data.add(new Data('May', 65, 51, 95));
        data.add(new Data('Jun', 33, 45, 99));
        data.add(new Data('Jul', 92, 82, 30));
        data.add(new Data('Aug', 87, 73, 45));
        data.add(new Data('Sep', 34, 65, 55));
        data.add(new Data('Oct', 78, 66, 56));
        data.add(new Data('Nov', 80, 67, 53));
        data.add(new Data('Dec', 17, 70, 70));
        return data;
    }

    // Wrapper class 

    public class Data {
        public String name { get; set; }
        public Integer data1 { get; set; }
        public Integer data2 { get; set; }
        public Integer data3 { get; set; }
        public Data(String name, Integer data1, Integer data2, Integer data3) {
            this.name = name;
            this.data1 = data1;
            this.data2 = data2;
            this.data3 = data3;
        }
    }

You can find other examples here: http://www.salesforce.com/us/developer/docs/pages/Content/pages_charting_example.htm

Edit A second Example: http://blogs.developerforce.com/tech-pubs/2011/09/introducing-visualforce-charting.html

Anything you use needs to be able to display the Value and the Name. So you might be able to use AggregatedResult[] that's been grouped.