In this blog, I am going to show how to create a simple lightning component pie chat to visualize the salesforce limits by using salesforce rest API. I am going to use d3 js and d3pie to built the lightning component. refer more to d3 pie js here.

Step 1: Create a salesforce connected app as shown below. We need to create a named credential to authenticate the web service call. Go to setup –> create apps–> create a new connected app as shown below and save it to get consumer key and secret key. In this step use any URL as callback URL. later after confirmed the auth provides we will replace the callback URL from auth provider callback URL

After saving the connected app you will get consumer key and consumer secret which we will use to configure the Auth provides.

Step 2: Now we need to create an auth provide as shown below. Go to setup –> administration  –> Security control -> create a new Auth provide as shown below .

Replace the connected App callback URL with Auth provide callback URL

Step 3: Create a named credentials as shown below.

Step 4: Create an Apex Class

Step 5: Create a Lightning component

Controller.js

Helper.js

 

Finally, the component output pie chart looks as shown below.