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">
        var pieData = [{'data1':100, 'name':'Alice'}, {'data1':30, 'name':'Bob'}, {'data1':55, 'name':'Carl'}, {'data1':60, 'name':'Dan'}];

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

        <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 type="Category" position="bottom" fields="label" title="Country">
                <apex:chartLabel rotate="315"/>
            <apex:barSeries orientation="vertical" axis="left" xField="label" yField="data"/>

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


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"
            <apex:axis type="Numeric" position="left" grid="true" title="$(Millions)"
            <apex:axis type="Category" position="bottom" grid="false" title="Quarter"
            <apex:barSeries orientation="vertical" axis="left" xField="n" yField="v"

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)
  • This worked. But i'm trying to display more than one charts in a tab. So how do i do that.? Did use <apex:tabpanel> and <apex:tab> for above. Say i want to include opportunity chart in this same tab.How will <apex: chart> and </apex:chart> and controller look like ? – JJoseph Mar 18 '14 at 9:47
  • Can anyone please help me out with the above question ? – JJoseph Mar 18 '14 at 10:18
  • Repeat you apex:chart and its content and change the data field to reference a second method on your controller to get different data. (If you want a cleaner solition you could move the apex:chart to a component.) You can decide the layout of the charts by choosing what tag to put around the pair of them. – Keith C Mar 18 '14 at 10:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.