+ Start a Discussion
Chitral ChaddaChitral 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;

        }


}
}

   User-added image


ShashForceShashForce
Hi Chitral,

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
Gaurav NirwalGaurav Nirwal
You can use this code:
<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>