Google Charts
As per this link https://google-developers.appspot.com/chart/interactive/docs/index, Google Charts provides a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart gallery provides a large number of ready-to-use chart types.
To use Google Charts in Salesforce Visualforce pages, there is absolutely no need to do complex integration configurations. It is as simple as referring a URL in the javascript.
Requirement
In this blog, my requirement is to display a Gauge chart on an Object's detail page which shows the percentage of the total number of fields for which the values are filled in by the users. In this case I considered 'Account' object. In a typical production scenario where large data objects (For example Group Health Insurance orders for a Health Insurance company) need to be filled in with data, this Gauge chart in the first section of the detail page gives you an indication of the overall completeness of the object's data.
Solution
Firstly, let us develop a VF page with an associated controller which leverages the Google Chart API.
VF Page
As shown in the above code, first we go with the standard controller and extension controller(the logic of which is explained later). We include the URL for Google chart api in <script> tags. Next we proceed to the customization part.
google.load("visualization", "1",{packages: ["gauge"]});
The above line selects the Gauge chart of Google and loads it initially.
google.setOnLoadCallback(drawChart);
This line calls 'drawChart' function with which we customize the Gauge chart to cater to the data that we give as an input. In this function we pass the data for which a Gauge chart needs to be displayed as shown below. Using google.visualization.arrayToDataTable we give the Label ('%') and the Value for the Gauge(totalFields) chart. The variable totalFields calls the getter variable TotalPercentage of Apex controller that we have written.
function drawChart() {
var totalFields = {!TotalPercentage};
var data= google.visualization.arrayToDataTable([
['Label', 'Value'],
[' % ', totalFields],
]);
var options = {
width: 400, height: 200,
redFrom: 0, redTo: 75,
greenFrom: 75, greenTo: 100,
minorTricks: 10
};
The options variable lets you define the size of the chart and the color coding of the graph based on the values.
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
The above code draws the data in the div element with id 'chart_div'.
Apex Class
As shown in the code above, we call the fetch method from the constructor of the controller. With the associated Account Id we fetch all the field names using Schema.getGlobalDescribe() and getMap() methods. A dynamic query is constructed to fetch all the values for the given account object. Upon executing Database.query() we have all the values in hand now. In the for loop we check for nulls or blanks in all the fields and increment the counter variables for TotalFieldCound and FilledFieldCount. These two variables are subsequently used to calculate the TotalPercentage which is exposed to the Javascript of the VF page.
Adding the VF Page to the Page Layout of the object
Since we are dealing with the Account object in this example, edit the page layout of Account object and add a new section called as 'Percentage Completed'. Add the VF page developed above to the section and adjust the size of the section according the size of the chart.
Output
Create a sample Account by filling in some random fields and go to the detail page. The output should look this way.
Add the values to few more field and save. You can notice the percentage value changing to a new value in the google chart.
Please comment here for any queries and suggestions.
References:
https://developers.google.com/chart/interactive/docs/gallery/gauge
