Apex Code Development You need to sign in to do that
Don't have an account?
NVaef Unable to edit apex:axis steps on a visualforce gauge
So I've created a gauge using an apex class GaugeChartController like the demo in the online documentation and then used visualforce to actually build out the gauge. Unfortunately, I'm not able to edit the number of steps around the gauge - it seems to be defaulted to 10 and wouldn't display with anything other than that regardless of the input. How, in this case, do I edit the number of steps? I have almost zero coding experience so please pardon me if this question is silly.
Class:
public class GaugeChartController {
public String ProjId {get;set;}
public GaugeChartController(ApexPages.StandardController controller){
ProjId = controller.getRecord().Id;
}
public List<gaugeData> getData() {
Integer TotalAttnds = 0;
AggregateResult Attendees = [select COUNT(Name) numAPJs
from Attendee_Project_Junction__c
where Project__c =: projId
GROUP BY CALENDAR_MONTH(Event_Date__c) LIMIT 1];
List<gaugeData> data = new List<gaugeData>();
data.add(new gaugeData(Integer.valueOf(Attendees.get('numAPJs'))+ 'Attendees', Integer.valueOf(Attendees.get('numAPJs'))));
return data;
}
public class gaugeData {
public String name { get; set; }
public Integer size { get; set; }
public gaugeData(String name, Integer data) {
this.name = name;
this.size = data;
}
}
}
VF
Class:
public class GaugeChartController {
public String ProjId {get;set;}
public GaugeChartController(ApexPages.StandardController controller){
ProjId = controller.getRecord().Id;
}
public List<gaugeData> getData() {
Integer TotalAttnds = 0;
AggregateResult Attendees = [select COUNT(Name) numAPJs
from Attendee_Project_Junction__c
where Project__c =: projId
GROUP BY CALENDAR_MONTH(Event_Date__c) LIMIT 1];
List<gaugeData> data = new List<gaugeData>();
data.add(new gaugeData(Integer.valueOf(Attendees.get('numAPJs'))+ 'Attendees', Integer.valueOf(Attendees.get('numAPJs'))));
return data;
}
public class gaugeData {
public String name { get; set; }
public Integer size { get; set; }
public gaugeData(String name, Integer data) {
this.name = name;
this.size = data;
}
}
}
VF
<apex:page standardController="Attendee Goal" extensions="GaugeChartController">
<apex:chart name="MyChart" height="300" width="450" animate="true" data="{!data}">
<apex:axis type="Gauge" position="gauge" title="Attendee Goal" minimum="0" maximum="300" steps="5"/> //still displays 10 steps
<apex:gaugeSeries dataField="size" donut="50" colorSet="#78c953,#ddd"/>
</apex:chart>
<script>
MyChart.on('beforeconfig', function(config) {
config.axes[0].margin=-10;
});
</script>
</apex:page>
// do query to get total attendees and extract that number into TotalAttnds
data.add(new gaugeData('Attendees', 62, TotalAttnds));
Also, the value 62 there is arbitrary - you change or tweak as needed.
Hope that helps.
Ram
All Answers
thanks for the insight! I was under the impression that the numerical limitation was on steps and other variables assosciated with the chart type, not necessarily chart type itself. I suppose I'll have to cope with the extra information, haha.
would it be possible to have a single column bar chart that would accomplish a similar goal to a gauge in showing a goal number on the Y axis and the current number of attendees in this case on the X? Would this enable me to edit the number of steps on that Y axis?
<apex:chart name="MyChart2" height="500" width="200" animate="true" data="{!data}">
<apex:axis type="Numeric" position="left" fields="data3" title="Attendee Goal" minimum="0" maximum="600" steps="5"/>
<apex:barSeries title="Attendees" orientation="vertical" axis="left"
xField="name" yField="data3"/>
</apex:chart>
-----------------------------------------
Controller snippet
-----------------------------------------
public List<gaugeData> getData() {
Integer TotalAttnds = 0;
/*
AggregateResult Attendees = [select COUNT(Name) numAPJs
from Attendee_Project_Junction__c
where Project__c =: projId
GROUP BY CALENDAR_MONTH(Event_Date__c) LIMIT 1];
*/
List<gaugeData> data = new List<gaugeData>();
//data.add(new gaugeData('6 Attendees', 60, 10));
//data.add(new gaugeData(' Attendees', 61, 100));
data.add(new gaugeData('Attendees', 62, 200));
return data;
}
public class gaugeData {
public String name { get; set; }
public Integer size { get; set; }
public Integer data3 { get; set; }
public gaugeData(String name, Integer data, Integer data3) {
this.name = name;
this.size = data;
this.data3 = data3;
}
}
This will show a single bar at 200 with a Y axis that goes up to 600 with steps at each 100 mark.
Ram, this is fantastic, thank you!
One last question and I'll get out of your hair - I'm sorry. I tried to throw in the count variable to be displayed in the bar chart rather than the defaulted 200 in the controller, however I'm getting an error that says that variable doesn't exist. How do I get that to work?
Edit: Rather the method doesn't exist when trying to put in the attendees.get string.
// do query to get total attendees and extract that number into TotalAttnds
data.add(new gaugeData('Attendees', 62, TotalAttnds));
Also, the value 62 there is arbitrary - you change or tweak as needed.
Hope that helps.
Ram