Currently I am developing a visualforce page to change the display of a custom object.

<apex:page standardController="CustomObject__c" > ...

Our customers wish to have a gauge chart which displays one single value X. All examples on how to setup this charts looks the same:

<apex:chart height="100" width="100" animate="true" data="{!data}">

My problem: I do not have the mentioned data-array. I've only got the single value which the gauge should display. I've tried the following code snippet, but unfortunately I've got no idea what value to put into the attribute 'dataField'.

<apex:chart height="100" width="100" animate="true" data="{!Planzahl__c.ist_rab_vj__c}">
        <apex:axis type="Gauge" position="gauge" title="in %" minimum="0" maximum="30"/>
        <apex:gaugeSeries dataField="value" donut="60" colorSet="#78c953,#ddd">
            <apex:chartTips height="50" width="200"/>

Maybe anybody is able to help me with this? Is it even possible? Thanks for any help in advance :)

1 Answer 1


As per Salesforce docs in Data field:

Specifies the data binding for the chart. This can be a controller method reference in an expression, a JavaScript function, or a JavaScript object. In all cases, the result must be an array of records, and every record must contain all fields referenced in child data series components.

So you need to pass array of records instead of sngle value.As you are not using extension so you can create array in javascript and can use that

    // Build the chart data array in JavaScript
    var dataArray = new Array();
    // ...

    <apex:chart data="dataArray" ...></apex:chart>

Here is a code sample for you so you can take help.

Providing Chart Data via a JavaScript Array

  • When i paste this similar code i'm getting browser console error Visualforce Chart: Error loading configuration for chart '...' Data retrieval function or object not found: 'dataArray'. ``` <script> let dataArray = []; dataArray.push({'data1':33,'data2':66,'data3':80,'name':'Jan'}); dataArray.push({'data1':33,'data2':66,'data3':80,'name':'Feb'}); </script> <apex:chart height="350" width="450" data="dataArray"> <apex:pieSeries dataField="data1" labelField="name"/> <apex:legend position="right"/> </apex:chart> ```
    – sh6210
    Commented Nov 14, 2022 at 19:45

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .