Pie Chart not showing anything on Visualforce Page

The pie chart showing nothing but a blank page. Please find codes in the attached screenshotsPie Chart not showing anything on Visualforce Page

<apex:page standardController="case" extensions="CaseController"  >     <apex:sectionHeader subtitle="My Pie Chart"/>     <apex:chart height="450" width="550" data="{!case}">          <apex:pieSeries dataField="type" labelField="Case Status">            </apex:pieSeries>     </apex:chart> </apex:page> 

Replay

Below is an example of a pie chart that will display.

The key thing to check when working with apex:chart is your browser's console as most errors are reported there from the JavaScript that renders the chart. From that you will discover that:

  • the labelField and dataField values are case sensitive; ensure you match the casing of the field names exactly (e.g. check them in the Setup UI)
  • the field nominated by dataField must be a number so the logic can decide how wide to make the pie wedge
  • the dataField field must be set in every record (and probably also the labelField field)

Controller:

public class Tmp {
    public Account[] getAccounts() {
        Account[] accounts = [select Name, NumberOfEmployees from Account order by Name];
        for (Account a : accounts) {
            // All values must be set but this field is optional default where not set
            if (a.NumberOfEmployees == null) a.NumberOfEmployees = 0;
        }
        return accounts;
    }
}

Visualforce:

<apex:page controller="Tmp">
    <apex:sectionHeader subtitle="My Pie Chart"/>
    <apex:chart height="450" width="550" data="{!accounts}">
         <apex:pieSeries labelField="Name" dataField="NumberOfEmployees"/>
    </apex:chart>
</apex:page>

Unless you have a specific need that StandardSetController helps with, I suggest you remove that from your code. The data you want to display may not be immediately available and so require an aggregate query or some other processing logic to create it.

Category: apex Time: 2016-07-31 Views: 4

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.190 (s). 12 q(s)