[SalesForce] Dynamically pass values for multiple charts in diiferent tabs

Have a graph setup with some simple data coming from a controller.Below is the code for the visualforce page. 

<apex:page readonly="true">
<apex:tabPanel switchType="server" id="panel">
    <apex:tab label="Pie chart" id="tab1">
        <script>
        var pieData = [{'data1':100, 'name':'Alice'}, {'data1':30, 'name':'Bob'}, {'data1':55, 'name':'Carl'}, {'data1':60, 'name':'Dan'}];
        </script>

        <apex:chart data="pieData" height="200px" width="200px">
            <apex:pieSeries labelField="name" dataField="data1"/>
        </apex:chart>
    </apex:tab>
    <apex:tab label="Line chart" id="tab2">
        <script>
        var barData = [{'data':100, 'label':'UK'}, {'data':30, 'label':'France'}, {'data':55, 'label':'Spain'}, {'data':60, 'label':'Germany'}];
        </script>

        <apex:chart data="barData" height="200px" width="300px">
            <apex:legend position="left"/>
            <apex:axis type="Numeric" position="left" title="Nos Leads" grid="true" fields="data" minimum="0">
            </apex:axis>
            <apex:axis type="Category" position="bottom" fields="label" title="Country">
                <apex:chartLabel rotate="315"/>
            </apex:axis>
            <apex:barSeries orientation="vertical" axis="left" xField="label" yField="data"/>
        </apex:chart>
    </apex:tab>
</apex:tabPanel>
</apex:page>

Can anyone please help me out with the code as to dynamically pass values instead of passing values in script ?

Best Answer

Below is some code that I posted as an answer to this Salesforce Visualforce Bar Chart problem question that uses the "controller method reference" data option. For naming you are using in your Visualforce, in the class change v to data and n to name.

To support multiple charts, you would need to add multiple methods that return different data.

<apex:page controller="ChartController">
    <apex:pageBlock title="Annual Recurring Revenue">
        <apex:chart name="AnnualRecurringRevenue" data="{!nvs}" width="400" height="400"
                colorSet="#156F9E,#FF9123,#6BAE4A,#424242,#A4A4A4">
            <apex:axis type="Numeric" position="left" grid="true" title="$(Millions)"
                    fields="v"/>
            <apex:axis type="Category" position="bottom" grid="false" title="Quarter"
                    fields="n"/>
            <apex:barSeries orientation="vertical" axis="left" xField="n" yField="v"
                    colorsProgressWithinSeries="true"/>
        </apex:chart>
    </apex:pageBlock>
</apex:page>

public class ChartController {
    public class Nv {
        public String n { get; private set; }        
        public Decimal v { get; private set; }
        Nv(String n, Decimal v) {
            this.n = n;
            this.v = v;       
        }
    }
    public Nv[] getNvs() {
        return new Nv[] {
            new Nv('Actual', 106.00),
            new Nv('Forecast', 150.56),
            new Nv('Plan', 135.00),
            new Nv('Prior Qtr', 97.00),
            new Nv('Prior Yr', 88.44)
        };
    }
}
Related Topic