How to use Google Charts in Visualforce pages

Usually you might come across requirements to show charts in visualforce page. Salesforce’s built in analytics solutions is good. You can even embed those charts in your regular visualforce pages without much difficulty. But the only limitations is that some types of charts are not available in visualforce page. Another one common use case is community pages. Salesforce charts can be used in community, only if users have partner community or community user plus licenses, which are bit more costly. In such cases, you will have to go for third party charting solutions like Google Charts, Fusion charts etc. Here is an example of how to embed a Google chart in visualforce page.

Steps to Use

1) Understand the data requirements of the chart you need

    You can find the list of all Google charts at charts gallery. Once you have found the right chart for your requirement, you need to check the data requirements of the chart. Each chart requires data in some specific format.

2) Format data in visualforce page controller in the required format

    Once you have found the right format for data, next step is to format data in that format before sending to chart.

3) Visualforce page and controller implementation of doughnut chart

    Check out below code where a doughnut chart is displayed with attendance of student. In the controller different attendance values are aggregated and passed that to page level using properties,

Use Cases

• Whenever charts need to be shown in visualforce pages
• Wherever standard Salesforce charts are not fitting your requirements
• If you have regular community licenses and want to show charts to users, Google charts is a good alternative.