Building an account credit score graphically with code

In this recipe, we will detail the steps to render an account credit score graphically using JavaScript and CSS within a Visualforce page.

We will add the Visualforce page as a component onto a Salesforce Account page using the Lightning App Builder and the image will appear on the main Account page as well as in the detail section of the page.

First, we create a custom Account Credit Score, which will feed the values rendered in the graphical range.

Note

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 Measuring account credit scores graphically using a Google image chart 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...