I want to display, on a single page, a gauge chart for each record of a certain type (Scholarship Campaign) that is currently active. This number may change at any time, and the specific records being pulled may change at any time. With apex:gaugeSeries, you load a list of data and it uses the first entry only for that chart. My idea was to then create a list that contains all of those data lists List<List<GaugeData>> lofl
, then iterate through that list on the Visualforce page. This does not seem to work however; it does not render anything on the page with it set up that way.
My Code with the Nested List Set Up:
Visualforce Page
<apex:page controller="BaselineBMark_Controller" action="{!init}"> <apex:form > <br/> {!message} <br/> <br/> <apex:repeat value="{!lofl}" var="l"> <apex:chart height="250" width="450" animate="true" legend="false" data="{!l}"> <apex:axis type="Gauge" position="gauge" margin="-10" minimum="0" maximum="35" title="" /> <apex:gaugeSeries dataField="links" highlight="true" tips="false" donut="50" needle="false" colorSet="green, red"> </apex:gaugeSeries> </apex:chart> </apex:repeat> </apex:form> </apex:page>
Controller
public Class BaselineBMark_Controller { public String message {get; set;} public Boolean status {get; set;} public List<Scholarship_Campaign__c> activeCamps {get; set;} public List<List<GaugeData>> lofl {get; set;} public PageReference init() { lofl = new List<List<GaugeData>>(); return null; } public List<GaugeData> getData() { activeCamps = [SELECT Id, Name, Start_Date__c, End_Date__c, Number_of_Links_Gained__c FROM Scholarship_Campaign__c WHERE Is_Current__c = 1]; message = 'Campaigns loaded successfully.'; List<GaugeData> data = new List<GaugeData>(); for (Scholarship_Campaign__c camp : activeCamps) { if (data.size() > 0) data.clear(); data.add(new GaugeData(camp.Name, (Decimal)camp.Number_of_Links_Gained__c)); lofl.add(data); } return data; } public Class GaugeData { public String name {get; set;} public Decimal links {get; set;} public Decimal lowRange {get; set;} public Decimal highRange {get; set;} public GaugeData(String name, Decimal linksTo) { this.name = name; this.links = linksTo; this.lowRange = 7; this.highRange = 15; } } }
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
This cut-down version of your controller will display 10 gauge charts with your page. It has the changes made in my comments applied with the data hard coded; replace the for loop with your query and use your GaugeChart
class.
public with sharing class BaselineBMark_Controller { public String message { get; set; } public List<List<GaugeData>> lofl {get; set;} public PageReference init() { lofl = new List<List<GaugeData>>(); for (Integer i = 0; i < 10; i++) { List<GaugeData> data = new List<GaugeData>(); data.add(new GaugeData()); lofl.add(data); } return null; } public Class GaugeData { public String name {get; set;} public Decimal links {get; set;} public GaugeData() { this.name = 'random-' + Math.random(); this.links = Math.random() * 35; } } }
Replace:
for (Integer i = 0; i < 10; i++) {
with your query:
for (Scholarship_Campaign__c camp : [ SELECT Id, Name, Start_Date__c, End_Date__c, Number_of_Links_Gained__c FROM Scholarship_Campaign__c WHERE Is_Current__c = 1 ]) {
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0