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 :)


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


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.