Salesforce provides an out-of-the-box solution in the form of a dynamic dashboard which highlights a user’s information. This out-of-the-box solution is all fine and good until you hit the limit.

I’ve come across a solution which requires a little code and Google Charts. Google charts is a free to use JavaScript visualization tool which synchronizes perfectly with Visualforce.

Problem: Org has reached the limit for number of dynamic dashboards 😦

Today we will draw a pie chart which shows closed cases by a user grouped by case type(feedback, compliment and complaint). Firstly, we will start with the controller – this is where we query the data which dynamically renders the chart every time the page loads.

Our custom controller will include a constructor to initialize the data when the chart loads. We then set the variables which will be called later in our Visualforce page – I have listed three for now and assigned it to zero. The data is then queried and a counter is performed for every case that contains ‘X’ type.

public class MyClosedCaseController {
    public integer CustomerFeedback{
        get ; set;
    }
    public integer CustomerComplaint{
        get ; set;
    }
    public integer CustomerCompliment{
        get ; set;
    }
    public MyClosedCaseController (){
        system.debug('userId: ' + UserInfo.getUserId());
        CustomerFeedback = 0;
        CustomerComplaint = 0;
        CustomerCompliment = 0;
        for(Case c: [
            SELECT Type FROM Case WHERE Status = 'Closed' AND ownerid =: UserInfo.getUserId()
            AND ClosedDate = TODAY
        ])
        {
            If (c.Type == 'Customer Feedback') CustomerFeedback ++;
            If (c.Type == 'Customer Complaint') CustomerComplaint ++;
            If (c.Type == 'Customer Compliment') CustomerCompliment ++;
        }
    }
}

Our controller is complete! Now to draw our chart with Google Charts. Google provides an in-depth tutorial on how to use the charts – I found this easy to understand after drawing my second chart.

First we set the standard Visualforce tags, I’ve added html as it will help us style later when we add more charts to the page. We also add a markup for the custom controller we created earlier – this will allow us to call the variables (CustomerCompliment, CustomerComplaint and CustomerFeedback).

I’ve added comments in the source code below which summarizes the purpose of each action. The important part is to create a div tag in the body and add the markup (variable – piechart) which holds the chart that was created in the earlier step.

<apex:page controller="MyClosedCaseController" sidebar="false" showHeader="false">
    <html>
        <head>
            <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
            <script type="text/javascript">
              // loads the chart packages
              google.charts.load('current', {'packages':['corechart']});
              // set a callback to run when the Google Visualization API is loaded
              google.charts.setOnLoadCallback(drawChart);

              // drawing the chart
              function drawChart() {

                // constructing the data table
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Case Type');
                data.addColumn('number', 'Quantity');
                data.addRows([
                    ['Compliment', {!CustomerCompliment}],
                    ['Complaint', {!CustomerComplaint}],
                    ['Feedback', {!CustomerFeedback}]
                ]);

                // customizing the chart
                var options = {
                    'title': 'My Closed Cases By Type',
                    'width': 800,
                    'height': 600,
                };

                var chart = new google.visualization.PieChart(document.getElementById('piechart'));

                chart.draw(data, options);
              }
            </script>
        </head>
        <body>
<a href="ap4.salesforce.com/SalesforceReportId>
<div id="piechart" />
</a>

</body>
    </html>
</apex:page>

The chart should end up looking something like this:

chart

I hope this helps you as much as it did help me. Please feel free to ask questions.