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.

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.