Measuring account credit scores graphically using a Google image chart

This recipe shows the steps for rendering a credit score graphically using a Google Chart contained within a custom Salesforce CRM formula field. Here we are using a dial-type chart from Google called a Google-O-Meter chart.

Google provides various APIs for mapping functions, developer tools, graphical user interfaces, and so on. At the time of writing, the Google-O-Meter image chart is fully functioning for the purpose described in this recipe; however, Google APIs are subject to change and may become unsupported in the future.

The Google-O-Meter is a gauge that points toward a single value on a range. More details can be found at https://developers.google.com/chart/image/docs/gallery/googleometer_chart#introduction.

First, we create a custom account credit score which will feed the values rendered in the graphical range.

You can omit the steps in the following Getting ready section if you have previously carried out the steps in the Getting ready section of the Building an account credit score graphically with code recipe.

Getting ready

Carry out the following steps to create a custom Credit Score field on the Account object:

1. Click on the Setup gear icon in the top right-hand of the main Home page, as shown in the following screenshot:

2. Click the Setup option, as shown in the following screenshot:

3. Navigate to the Account customization setup page, by clicking the following: Objects and Fields | Object Manager | Account | Fields and Relationships.

Locate the Fields & Relationships section on the right of the page.

4. Click New.

We will be presented with the Step 1. Choose the field type page.

5. Choose Number from the Data Type options.
6. Click Next.

We will be presented with the Step 2. Enter the details page.

7. Enter Credit Score in the Field Label.
8. Enter 3 in the Length field.

Accept the default option of 0 in the Decimal Places field, as shown in the following screenshot:

9. Optionally, enter a value in the Description field.
10. Optionally, enter a value in the Help Text field.
11. Click Next.

We will be presented with the Step 3. Establish field-level security page.

12. Select the profiles to which you want to grant edit access to this field via the field-level security. The field will be hidden from all profiles if you do not add it to the field-level security.
13. Click Next.

We will be presented with the Step 4. Add to page layouts page.

14. Select the page layouts that should include this field. The field will be added as the last field in the first two-column section of these page layouts. The field will not appear on any pages if you do not select a layout.
15. Finally, click Save.

How to do it...

Carry out the following steps to create an account Credit Score formula field that uses the data contained in a custom field to display a Google Chart graphic:

1. Click on the Setup gear icon in the top right-hand of the main Home page, as shown in the following screenshot:

2. Click the Setup option, as shown in the following screenshot:

3. Navigate to the Account customization setup page, by clicking the following: Objects and Fields | Object Manager | Account | Fields and Relationships.
4. Locate the Fields & Relationships section on the right of the page.
5. Click New.

We are presented with the Step 1. Choose the field type page.

6. Select the Formula option.
7. Click Next.

We are presented with the Step 2. Choose output type page.

8. Type Credit Score Graphic in the Field Label textbox.
9. Click on the Field Name. When clicking out of the Field Label textbox, the Field Name is automatically filled with the value Credit_Score_Graphic.
10. Set the Formula Return Type as Text.
11. Click Next.

We are presented with the Step 3. Enter formula page.

12. Paste the following code in the formula edit box (as shown in the next screenshot):

 
/*********************************************************** 

Google Chart type Google-O-meter 

  
***********************************************************/ 
IF( 
  ISNUMBER( TEXT(Credit_Score__c) ),  
    IMAGE(  
      "http://chart.apis.google.com/chart?cht=gm" & 
      "&chxl=0:|0|50|100&chxt=y&chs=200x120&chls=2|10" &  
      "&chd=t:" & TEXT((Credit_Score__c)) & 
      "&chl=" & TEXT(Credit_Score__c), "Credit Score Graphic" 
    ), 
  "Not Specified" 
)

13. In the Blank Field Handling section, select the option Treat blank fields as blanks, as shown in the following screenshot:

14. Optionally, enter a value in the Description field.
15. Optionally, enter a value in the Help Text field.
16. Click Next.

We will be presented with the Step 4. Establish field-level security page.

17. Select the profiles to which you want to grant edit access to this field via the field-level security. The field will be hidden from all profiles if you do not add it to the field-level security.
18. Click Next.

We will be presented with the Step 5. Add to page layouts page.

19. Select the page layouts that should include this field. The field will be added as the last field in the first two-column section of these page layouts. The field will not appear on any pages if you do not select a layout.
20. Finally, click Save.

How it works...

Navigate to an account record page and enter the value 95 in the custom Credit Score number field. Upon saving, the account detail page displays the Credit Score Graphic image, as shown in the following screenshot:

Navigate to an account record page and enter the value 23 in the Credit Score number field. Upon saving, the account detail page displays the Credit Score Graphic image, as shown in the following screenshot:

Describing each part of the Google Chart code in the formula field gives the following:

/*********************************************************** 
Google Chart type Google-O-meter 
  
***********************************************************/ 
IF( 
  ISNUMBER( TEXT(Credit_Score__c) ),  
    IMAGE(  
      "https://chart.apis.google.com/chart?cht=gm" & 
      "&chxl=0:|0|50|100&chxt=y&chs=200x120&chls=2|10" &  
      "&chd=t:" & TEXT((Credit_Score__c)) & 
      "&chl=" & TEXT(Credit_Score__c), "Credit Score Graphic" 
    ), 
"Not Specified" 
) 

The comment section to describe the code in the formula is:

/*********************************************************** 
Google Chart type Google-O-meter 
  
***********************************************************/

Check that the Credit Score contains a number. If so, then continue to build the Google Chart code. If there is no valid number, then return the value Not Specified:

IF( 
  ISNUMBER( TEXT(Credit_Score__c) ),  
<.........................................> 
"Not Specified" 
) 

The Google Chart image construction is as follows:

    IMAGE(  
      "https://chart.apis.google.com/chart?cht=gm" & 
      "&chxl=0:|0|50|100&chxt=y&chs=200x120&chls=2|10" &  
      "&chd=t:" & TEXT((Credit_Score__c)) & 
      "&chl=" & TEXT(Credit_Score__c), "Credit Score Graphic" 
    ), 

Use the Google Chart URL https://chart.apis.google.com/chart?.Specify the chart type gm (Google-O-Meter):

cht=gm 

Set the labels for the chart:

chxl=0:|0|50|100 

Specify using the y axis:

chxt=y 

Set the dimensions for the chart (width x height):

chs=200x120 

Specify the arrow line width and arrow head (2px line and small arrow head):

chls=2|10 

Set the data value passed to the graph (the data from the Credit Score field is passed):

chd=t:" & TEXT((Credit_Score__c)) 

Specify the data label on the chart (the data from the Credit Score field is passed):

chl=" & TEXT(Credit_Score__c)

There's more...

The Credit Score Graphic formula image field is not only shown when the record is being viewed or edited but can also be seen when you include the field in a list view.

Formula fields containing an image can also be sorted on in the list view.

You can see what this looks like within a list view when the list of account records is set with various scores on the CREDIT SCORE GRAPHIC column, as shown in the following screenshot:

Accessing Google Charts requires sending data from Salesforce over the internet so it is not secure. You should ensure only non-sensitive data is being sent.