Dynamic Gauge in salesforce

Salesforce provide us standard functionality to create Reports and dashboards to represent record in diagrammatic form. Sometimes we face the requirement to represent our data in diagrammatic Form on visual force page in some specific type of diagram we represent it using chart. Salesforce provide us Bar chart, Pie chart, Gauge chart, Radar charts

Here I am going to explain how we can represent specific field data in the form of gauge chart. To achieve this requirement we need four things basically. First we should have an object whether its standard or custom object, a field associated with that object that should hold any numeric Value, apex controller, apex class.

I will start with object lets say I have a standard controller Account where I have a custom field Score and I need to represent that score in the form of gauge. Whenever page loads that value represent in the form of gauge and whenever the fields value changes the gauge should reflect that Change.

So items that we have is:

1- Standard object: Account.
2- Custom Field : score__c,score1__c
3-Apex controller: TestPageController1.
4- Visualforce page: gauge.

 

First of all the code for controller that we will need is:

We have created a controller named GaugeController.

Mirketa_GaugeController_Step1

Now visual force page that we are creating for Gauge Meter:

Mirketa_GaugeMeter_Visualforce_Step2

The output that you will get is:

Mirketa_GaugeMeter_Output_Step3

Components of gauge are:

Mirketa_Gauge_Components_Step4

ColorSet: holds the value for gauge color.

DataField: holds the value for which it creates gauge. Basically this value comes from the
wrapper

Class variable that we have declared in apex controller.

Donut: use to set the width of gauge.

Highlight: we use to highlight the value section for ex:

Mirketa_Gauge_Output_Step5

Needle: it is used to show the needle at the value.

Tips: It is used to highlight the left region from the different color if its value is set to true now when the value is false it shows like.

Mirketa_Gauge_Output_Needle_Step6

Thanks,

Sandy@mirketa.com

Posted in Apex Controller, apex develeopment, Apex Development, Dynamic Gauge In Salesforce, force.com app development, Force.com Offshore, HTML/CSS, Salesforce, salesforce administrator, salesforce certified, salesforce certified developer, Salesforce cloud Implementation, salesforce community implementation, salesforce consultant, salesforce customization, salesforce development, Salesforce Dynamic Gauge, Salesforce.com, UI, Visualforce. Tagged with , , , , , .

Leave a Reply

Your email address will not be published. Required fields are marked *


6 + = eleven

CommentLuv badge
Skip to toolbar