tag:blogger.com,1999:blog-20703450149997661942024-03-05T15:15:50.366-08:00Self Learn Salesforce CloudAbilash Kosigihttp://www.blogger.com/profile/07061650309353155986noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-2070345014999766194.post-38896564627904156192015-03-19T02:17:00.001-07:002015-03-19T02:17:48.866-07:00Leveraging Google Charts in Inline Visualforce Pages of Salesforce<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<div style="text-align: left;">
<b><span style="font-family: Arial, Helvetica, sans-serif;">Google Charts</span></b></div>
<div style="text-align: left;">
<span style="background-color: white; color: #222222; line-height: 22.3999996185303px;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></span></div>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; color: #222222; line-height: 22.3999996185303px;">As per this link</span> <a href="https://google-developers.appspot.com/chart/interactive/docs/index">https://google-developers.appspot.com/chart/interactive/docs/index</a>, <span style="background-color: white; color: #222222; line-height: 22.3999996185303px;">Google Charts provides a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the </span><a href="https://google-developers.appspot.com/chart/interactive/docs/gallery" style="background-color: white; border: 0px; color: #4285f4; line-height: 22.3999996185303px; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">chart gallery</a><span style="background-color: white; color: #222222; line-height: 22.3999996185303px;"> provides a large number of ready-to-use chart types. </span></span></div>
<div style="text-align: left;">
<span style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; line-height: 22.3999996185303px;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;"><span style="color: #222222;"><span style="line-height: 22.3999996185303px;">To use Google Charts in Salesforce Visualforce pages, there is </span></span><span style="color: #222222;"><span style="line-height: 22.3999996185303px;">absolutely no need to do complex integration configurations. It is as simple as referring a URL in the javascript.</span></span></span></div>
<div style="text-align: left;">
<span style="background-color: white;"><span style="color: #222222;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small; line-height: 22.3999996185303px;"><br /></span></span></span></div>
<div style="text-align: left;">
<span style="background-color: white;"><span style="color: #222222;"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 22.3999996185303px;"><b>Requirement</b></span></span></span></div>
<div style="text-align: left;">
<span style="background-color: white;"><span style="color: #222222;"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 22.3999996185303px;">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.</span></span></span></div>
<div style="text-align: left;">
<span style="background-color: white;"><span style="color: #222222;"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 22.3999996185303px;"><br /></span></span></span></div>
<div style="text-align: left;">
<span style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; line-height: 22.3999996185303px;"><b>Solution</b></span></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 22.3999996185303px;">Firstly, let us develop a VF page with an associated controller which leverages the Google Chart API.</span></span></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 22.3999996185303px;"><br /></span></span></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 22.3999996185303px;"><i><b>VF Page</b></i></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_zMvSxAxKXpBvEw51eqfd4X9dPEPduChee50NXLelIJb2hKaG1eXmXq26yGGtOSmOPgu5FJOs4veO_Q-tSt5JN4DU9WKgxe3xBMRcMrIFNdpOdjbwV3jjYrce-AH2TPGWXODV9RA6sYY/s1600/Page2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_zMvSxAxKXpBvEw51eqfd4X9dPEPduChee50NXLelIJb2hKaG1eXmXq26yGGtOSmOPgu5FJOs4veO_Q-tSt5JN4DU9WKgxe3xBMRcMrIFNdpOdjbwV3jjYrce-AH2TPGWXODV9RA6sYY/s1600/Page2.PNG" height="404" width="640" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span style="background-color: white; line-height: 22.3999996185303px;"><i><b><br /></b></i></span></span></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 22.3999996185303px;">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. </span></span></div>
<div style="text-align: left;">
<b style="color: #222222; line-height: 22.3999996185303px;"><i><span style="font-family: Arial, Helvetica, sans-serif;"> google.load("visualization", "1",{packages: ["gauge"]});</span></i></b></div>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: #222222;"><span style="line-height: 22.3999996185303px;">The above line selects the Gauge chart of Google and loads it initially. </span></span><span style="color: #222222; line-height: 22.3999996185303px;"><i style="font-weight: bold;"> </i></span></span></div>
<div style="text-align: left;">
<span style="color: #222222; line-height: 22.3999996185303px;"><i style="font-weight: bold;"><span style="font-family: Arial, Helvetica, sans-serif;"> google.setOnLoadCallback(drawChart); </span></i></span></div>
<div style="text-align: left;">
<span style="color: #222222; line-height: 22.3999996185303px;"><span style="font-family: Arial, Helvetica, sans-serif;">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 <b>TotalPercentage </b>of Apex controller that we have written.</span></span></div>
<div style="text-align: left;">
<b style="color: #222222; line-height: 22.3999996185303px;"><i><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></i></b></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 22.3999996185303px;"><b><i> function drawChart() {</i></b></span></span></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 22.3999996185303px;"><b><i> var totalFields = {!TotalPercentage};</i></b></span></span></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 22.3999996185303px;"><b><i> var data= google.visualization.arrayToDataTable([</i></b></span></span></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 22.3999996185303px;"><b><i> ['Label', 'Value'],</i></b></span></span></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 22.3999996185303px;"><b><i> [' % ', totalFields],</i></b></span></span></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 22.3999996185303px;"><b><i> ]); </i></b></span></span></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 22.3999996185303px;"><b><i> var options = {</i></b></span></span></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 22.3999996185303px;"><b><i> width: 400, height: 200,</i></b></span></span></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 22.3999996185303px;"><b><i> redFrom: 0, redTo: 75,</i></b></span></span></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 22.3999996185303px;"><b><i> greenFrom: 75, greenTo: 100,</i></b></span></span></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 22.3999996185303px;"><b><i> minorTricks: 10</i></b></span></span></div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 22.3999996185303px;"><b><i> };</i></b></span></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 22.3999996185303px;">The options variable lets you define the size of the chart and the color coding of the graph based on the values. </span></span></div>
<br />
<i><b><span style="font-family: Arial, Helvetica, sans-serif;"> var chart = new </span></b></i><i><b><span style="font-family: Arial, Helvetica, sans-serif;"> google.visualization.Gauge(document.getElementById('chart_div')); </span></b></i><i><b><span style="font-family: Arial, Helvetica, sans-serif;"> </span></b></i><br />
<i><b><span style="font-family: Arial, Helvetica, sans-serif;"> </span></b></i><span style="font-family: Arial, Helvetica, sans-serif;"><b><i> chart.draw(data, options); </i></b></span><br />
<i><b><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></b></i>
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 22.3999996185303px;">The above code draws the data in the div element with id 'chart_div'.</span></span><br />
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; font-size: 14px; line-height: 22.3999996185303px;"><br /></span></span>
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 22.3999996185303px;"><b>Apex Class</b></span></span><br />
<span style="color: #222222;"><span style="background-color: white; font-size: 14px; line-height: 22.3999996185303px;"><b><br /></b></span></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq3mElftahyphenhyphenXzhaL0pW9RIAVBhmRluBNCtldiCY5aEPCrDoCyO2QQQRrspq_VDV5eJYeKz0infE54HA9mmH3Fhz-xUa4wwrkNL5QZpHPw2-JM-mdl5L4XgM4UzBxPi7SvUDRAQSjKm4u0/s1600/Class1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq3mElftahyphenhyphenXzhaL0pW9RIAVBhmRluBNCtldiCY5aEPCrDoCyO2QQQRrspq_VDV5eJYeKz0infE54HA9mmH3Fhz-xUa4wwrkNL5QZpHPw2-JM-mdl5L4XgM4UzBxPi7SvUDRAQSjKm4u0/s1600/Class1.PNG" height="324" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdOLukLED6LdmYeQZ7mpd7TnwhYjhHylHRxNky1c6EhO3PUhbd8pgV3sqSpd2XMb99Tk_9HRvd-wxuvwlNejDq6A7yaP6BftivtJtiifeWPAE2CWc63crJf6p3jjLLfmT4IUYIrMAFhyphenhyphen0/s1600/Class2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdOLukLED6LdmYeQZ7mpd7TnwhYjhHylHRxNky1c6EhO3PUhbd8pgV3sqSpd2XMb99Tk_9HRvd-wxuvwlNejDq6A7yaP6BftivtJtiifeWPAE2CWc63crJf6p3jjLLfmT4IUYIrMAFhyphenhyphen0/s1600/Class2.PNG" height="228" width="640" /></a></div>
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; font-size: 14px; line-height: 22.3999996185303px;"><b><br /></b></span></span>
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; font-size: 14px; line-height: 22.3999996185303px;"> </span><span style="background-color: white; line-height: 22.3999996185303px;">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.</span></span><br />
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 22.3999996185303px;"><br /></span></span>
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 22.3999996185303px;"><b>Adding the VF Page to the Page Layout of the object</b></span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">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.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<b><span style="font-family: Arial, Helvetica, sans-serif;">Output</span></b><br />
<b><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></b>
<span style="font-family: Arial, Helvetica, sans-serif;">Create a sample Account by filling in some random fields and go to the detail page. The output should look this way.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GgeSjaOw96xNyYqoozoQ9-hmf_v2ZtYaIMR9xVqXwpduZ0GS4-O57iHFZ9t2Ajf5LooScuvvOu0nB6U9jo3W__hAealerH6DeFYo4bCsHkdmVeeDe9GJamC4glCHJe68gAES-MvDiec/s1600/Demo1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GgeSjaOw96xNyYqoozoQ9-hmf_v2ZtYaIMR9xVqXwpduZ0GS4-O57iHFZ9t2Ajf5LooScuvvOu0nB6U9jo3W__hAealerH6DeFYo4bCsHkdmVeeDe9GJamC4glCHJe68gAES-MvDiec/s1600/Demo1.PNG" height="330" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Add the values to few more field and save. You can notice the percentage value changing to a new value in the google chart.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzOeXCHlnYwUS6VD7U1w4kRRwVFG_FW4CQ8Je_8BdIakhVcDe-f5-AFxuQvuPcOogQrnmR-9YqiwmOp4TR-JmYSkKtIXglXDAiaDco6wJfHnaaiapxxSmpZrdmRjuiuBSBTXFBlf6HHdM/s1600/demo2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzOeXCHlnYwUS6VD7U1w4kRRwVFG_FW4CQ8Je_8BdIakhVcDe-f5-AFxuQvuPcOogQrnmR-9YqiwmOp4TR-JmYSkKtIXglXDAiaDco6wJfHnaaiapxxSmpZrdmRjuiuBSBTXFBlf6HHdM/s1600/demo2.PNG" height="332" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<span style="font-family: Arial, Helvetica, sans-serif;">As promised, I assume you understood the simplicity of using the Google charts in Salesforce.</span><br />
<br />
<span style="color: #222222; font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 22.3999996185303px;">Please comment here for any queries and suggestions.</span></span><br />
<span style="color: #222222;"><span style="background-color: white; font-size: 14px; line-height: 22.3999996185303px;"><br /></span></span>
<span style="color: #222222;"><span style="background-color: white; font-size: 14px; line-height: 22.3999996185303px;"><b>References:</b></span></span><br />
<span style="background-color: white; font-size: 14px; line-height: 22.3999996185303px;"><span style="color: #222222;"><b><a href="https://developers.google.com/chart/interactive/docs/gallery/gauge">https://developers.google.com/chart/interactive/docs/gallery/gauge</a></b></span></span><br />
<span style="color: #222222;"><span style="background-color: white; font-size: 14px; line-height: 22.3999996185303px;"><br /></span></span></div>
Abilash Kosigihttp://www.blogger.com/profile/07061650309353155986noreply@blogger.com3