Apex Code Development You need to sign in to do that
Don't have an account?
Chitral Chadda display Gauge vf page
the link i have provided is that of the salesforce dashboard i hv created related to report bt wen i run this vf page i get the broken image..like in pic below
iwant to create a gauge which points to total sum of account ( adding sum fiels of all related contacts).
https://developer.salesforce.com/blogs/developer-relations/2012/10/animated-visualforce-charts.html
i referred this link bt i dnt know where from it created the image or whethr it copied from dashboard.
controller
:
<apex:page standardController="Account" extensions="GaugeChartController">
<apex:chart name="MyChart" height="300" width="450" animate="true" data="{!data}">
<apex:axis type="Gauge" position="gauge" title="Total Sum" minimum="0" maximum="300" steps="10"/>
<apex:gaugeSeries dataField="size" donut="50" colorSet="#78c959,#ddd"/>
</apex:chart>
<script>
MyChart.on('beforeconfig', function(config) {
config.axes[0].margin=-10;});
</script>
<a class="overlay" href="https://ap1.salesforce.com/01Z90000000noOl"><img class="size-medium wp-image-10915 aligncenter" src="https://ap1.salesforce.com/01Z90000000noOl" alt="" width="300" height="156"/></a>
</apex:page>
class
public class GaugeChartController {
public String acctId {get;set;}
public GaugeChartController(ApexPages.StandardController controller){
acctId = controller.getRecord().Id;
}
public List<gaugeData> getData() {
Integer TotalOpptys = 0;
Integer TotalAmount = 0;
Integer thisMonth = date.Today().month();
AggregateResult ar = [select SUM(Sum__c) totalsum,
COUNT(Name) numC
from contact
where AccountId =: acctId
GROUP BY LastName LIMIT 1];
List<gaugeData> data = new List<gaugeData>();
data.add(new gaugeData(Integer.valueOf(ar.get('numC')) + ' contact', Integer.valueOf(ar.get('totalsum'))));
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;
}
}
}
iwant to create a gauge which points to total sum of account ( adding sum fiels of all related contacts).
https://developer.salesforce.com/blogs/developer-relations/2012/10/animated-visualforce-charts.html
i referred this link bt i dnt know where from it created the image or whethr it copied from dashboard.
controller
:
<apex:page standardController="Account" extensions="GaugeChartController">
<apex:chart name="MyChart" height="300" width="450" animate="true" data="{!data}">
<apex:axis type="Gauge" position="gauge" title="Total Sum" minimum="0" maximum="300" steps="10"/>
<apex:gaugeSeries dataField="size" donut="50" colorSet="#78c959,#ddd"/>
</apex:chart>
<script>
MyChart.on('beforeconfig', function(config) {
config.axes[0].margin=-10;});
</script>
<a class="overlay" href="https://ap1.salesforce.com/01Z90000000noOl"><img class="size-medium wp-image-10915 aligncenter" src="https://ap1.salesforce.com/01Z90000000noOl" alt="" width="300" height="156"/></a>
</apex:page>
class
public class GaugeChartController {
public String acctId {get;set;}
public GaugeChartController(ApexPages.StandardController controller){
acctId = controller.getRecord().Id;
}
public List<gaugeData> getData() {
Integer TotalOpptys = 0;
Integer TotalAmount = 0;
Integer thisMonth = date.Today().month();
AggregateResult ar = [select SUM(Sum__c) totalsum,
COUNT(Name) numC
from contact
where AccountId =: acctId
GROUP BY LastName LIMIT 1];
List<gaugeData> data = new List<gaugeData>();
data.add(new gaugeData(Integer.valueOf(ar.get('numC')) + ' contact', Integer.valueOf(ar.get('totalsum'))));
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;
}
}
}
You are not supposed to add the html after the <script> from the example in the link. The page at the link seems to have some problem. It is supposed to show a guage result image, but instead, it is incorrectly exposing the html. So, please remove the <a> and <img> html tags and you should be good.
Your final vf page without the unnecessary html:
<apex:page standardController="Account" extensions="GaugeChartController"> <apex:chart name="MyChart" height="300" width="450" animate="true" data="{!data}"> <apex:axis type="Gauge" position="gauge" title="Total Sum" minimum="0" maximum="300" steps="10"/> <apex:gaugeSeries dataField="size" donut="50" colorSet="#78c959,#ddd"/> </apex:chart> <script> MyChart.on('beforeconfig', function(config) { config.axes[0].margin=-10;}); </script> </apex:page>Also, please note that this code does not have javascript exception handling. So, please be aware that you will only see a blank page if there is no data in the Sum__c field, i.e., if the field is blank. So, ensure that your test data has some value in the field, even if it is zero, populate it with zero. Else, you have to ensure that exception handling is done in case of a blank field.
If this answers your question, please mark this as the Best Answer for this post, so that others can benefit from this post.
Thanks,
Shashank
<apex:page standardController="Account" extensions="GaugeChartController">
<apex:chart name="MyChart" height="300" width="450" animate="true" data="{!data}">
<apex:axis type="Gauge" position="gauge" title="Total Sum" minimum="0" maximum="300" steps="10"/>
<apex:gaugeSeries dataField="size" donut="50" colorSet="#78c959,#ddd"/>
</apex:chart>
<script>
MyChart.on('beforeconfig', function(config) {
config.axes[0].margin=-10;});
</script>
</apex:page>