Displaying Salesforce Data with Google Charts and AJAX Toolkit

In this second post about using Google Charts to visualize Salesforce data, I’ll show how to use the AJAX Toolkit to query data in related objects and display a summary in a chart. In the first example, I created a column chart with data from custom fields on the Account. In this next example, let’s assume we have an object called AccountHistory which has the sales by Product and Account. On the Account page layout, we want to be able to see a summary of sales by Product Family.

In order to show this, we need to run a SOQL query summarizing sales by Product Family. I’ll take advantage of the AJAX Toolkit to query the data without having to use a custom controller. Using the AJAX toolkit is pretty simple to query data. First we query data using SOQL and then iterate over the results, adding each record returned to the chart.

<apex:page standardController="Account">
  <head>
  <script type='text/javascript' src='https://www.google.com/jsapi' />
  <script src="/soap/ajax/19.0/connection.js" type="text/javascript" />

  <script type="text/javascript">

  // use this function to format the label
  formatCurrencyLabel = function( value )
    {
      return "$" + String(value);
    }

    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        // Create a new data table with two columns: the label and the value
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Product Family');
        data.addColumn('number', 'Sales');

        // We need the sessionId to be able to query data
        sforce.connection.sessionId = '{!$Api.Session_ID}';
        // Query data using SOQL.
        var result = sforce.connection.query("Select ah.Product__r.Family productFamily, sum(ah.Sales__c) sales " +
                      "from AccountHistory__c ah where ah.Account__c = '{!account.Id}' group by ah.Product__r.Family " +
                      "order by sum(ah.Sales__c) desc");
        // Iterate over the result
        var it = new sforce.QueryResultIterator(result);
        while(it.hasNext()) {
            var record = it.next();
            // Add the data to the table
            data.addRow([record.productFamily, {v:parseFloat(record.sales), f: formatCurrencyLabel(record.sales)}]);
        }
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 800, height: 300, pieSliceText:'label'});
    };

  </script>
  </head>
  <div id="chart_div" />
</apex:page>

Once we have the Visualforce page created, it can be added to an Account page layout. Remember to make the height the same as defined on the page (in this case 300 px). The result should look something like this:

I’ve updated my unmanaged package to include this example. It includes the custom object and Visualforce page as well as the example from my previous post. You can install it into your org by clicking on the following link: https://login.salesforce.com/packaging/installPackage.apexp?p0=04t80000000xviT. Make sure you have some products with Product Families assigned and then populate some Account History records. Add the new Visualforce page to an existing page layout and you should be up and running.

Obviously, this is a very simple example, but I hope it illustrates how this can be a great addition to any page layout.

Advertisements

36 thoughts on “Displaying Salesforce Data with Google Charts and AJAX Toolkit

  1. This is a great piece of code, thank you! I couldn’t find any other examples of developers using the latest Google interactive charts…and then we found you! I am trying to get it to work for my custom app. If I want to display this chart for my records can you just give me what to substitute in your code?

    I have a master object ‘Homework’ with roll up fields to average the child object ‘Assessment’. In Assessment (one for each student of the class) I have Grade 1, Grade 2, Grade 3 etc as marks given against Objective 1, Objective 2, Objective 3 etc. If I want to display a chart for that particular Homework what would I need to change in your code to make it work? Do I also need to make changes to the package stuff too?

    Then I guess it would work for a series of Homeworks (i.e. over the course of the year)?

    • Thanks for the comments! As for what to modify, first you need to figure out the SOQL syntax to query your data. I use the Force.com Explorer to construct and test my SOQL. Once I have the syntax right, then that should show me what the columns I need to add to my data table (modify the lines with code data.addColumn). Then put your SOQL string on the line with the code sforce.connection.query. Finally iterate through the results to add the rows to the data table and then display the chart. The new candlestick chart could be an interesting one to use in this example as it can display max, min and variance.

  2. I forgot one major thing. You need to make the Visualforce page’s standard controller be the object name that you want to put the chart on. So, if you wanted to display a chart on the Homework page summarizing each Assessment, then you’d want to make your standard controller be Homework.

  3. Hey Daniel, thanks for the responses. Yes, I worked out the bit about making Homework the standard controller. Unfortunately you lost me on the SOQL syntax…I’m too much of a newbie to understand how to do that…looks like it’s back to the drawing board for me!

    • Yes, you need a good idea of how to get the data summarized. I’m not quite sure I understand your data model, but let’s say you wanted to show a chart on the Homework page the average grade for each objective, your SOQL might look something like this:
      SELECT Objective__c, AVG(Grade) AvgGrade from Assesement__c where Homework__c = ‘{!Homework__c.Id}’ group by Objective__c

      If you haven’t downloaded it, definitely get the Force.com Explorer from http://wiki.developerforce.com/index.php/ForceExplorer. You can use it to build queries and play with your data. There’s a lot of SOQL documentation out there – it is a very important skill for a developer to have.

      • Hey Daniel, this is lovely…thanks for giving me the SOQL syntax, it makes things clearer. Was up late last night trying to work out the logic myself, thought I’d wake up fresh in the morning and try with a clear mind…and hey presto I see you found it for me! Really kind of you! I’ll definitely download the Force Explorer and play around with it…and read up on SOQL! Cheers!

  4. Hi Daniel,

    I really hope you don’t mind me asking you for help like this. I played around with Force Explorer as you recommended, got the query I wanted to work – (SELECT Average_Obj_1__c, Average_Obj_2__c, Average_Obj_3__c, Average_Obj_4__c, Average_Obj_5__c, Average_Obj_6__c, No_of_assessments__c, Subject__c, Date_set__c, Standard__c, Teacher__c FROM Homework__c WHERE Standard__c=’8th’ AND Subject__c=’State Language’ AND No_of_assessments__c>0 order by Date_set__c).

    But just pasting it in didn’t give me any chart visuals. I realised that you have {!} function i.e. {!account.Id} which I don’t get in Force Explorer, so I modified it to put it in the way you wrote a tentative expression for me above, but substituting class for homework, and homework for assessment as I’ve done roll up summaries of the assessments in the homework records. But still I get no chart visual. Below I’ve pasted in the code I tried to write. Please could you have a look at it and tell me where I’m going wrong. I’d really appreciate it. The Class object is a parent to the Homework object, and Homework is the parent to the Assessment object. I’d be really grateful for any further advice you could give.

    // use this function to format the label
    formatLabel = function( value )
    {
    return String(value)+ “%”;
    }

    google.load(“visualization”, “1”, {packages:[“corechart”]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
    // Create a new data table with two columns: the label and the value
    var data = new google.visualization.DataTable();
    data.addColumn(‘number’, ‘Objective 1’);
    data.addColumn(‘string’, ‘Date’);
    // We need the sessionId to be able to query data
    sforce.connection.sessionId = ‘{!$Api.Session_ID}’;
    // Query data using SOQL.
    var result = sforce.connection.query(“SELECT Average_Obj_1__c grade, Date_set__c date” +
    “FROM Homework__c hw WHERE hw.Class__c = ‘{!Class__c.Id}’” +
    “order by Date_set__c”);
    // Iterate over the result
    var it = new sforce.QueryResultIterator(result);
    while(it.hasNext()) {
    var record = it.next();
    // Add the data to the table
    data.addRow([record.date, {v:parseFloat(record.grade), f: formatLabel(record.grade)}]);
    }
    var chart = new google.visualization.ColumnChart(document.getElementById(‘chart_div’));
    chart.draw(data, {width: 800, height: 300, pieSliceText:’label’});
    };

    • Sorry my code didn’t go in fully, seemed to cut the top and bottom off – here it is again.

      // use this function to format the label
      formatLabel = function( value )
      {
      return String(value)+ “%”;
      }

      google.load(“visualization”, “1”, {packages:[“corechart”]});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
      // Create a new data table with two columns: the label and the value
      var data = new google.visualization.DataTable();
      data.addColumn(‘number’, ‘Objective 1’);
      data.addColumn(‘string’, ‘Date’);
      // We need the sessionId to be able to query data
      sforce.connection.sessionId = ‘{!$Api.Session_ID}’;
      // Query data using SOQL.
      var result = sforce.connection.query(“SELECT Average_Obj_1__c grade, Date_set__c date” +
      “FROM Homework__c hw WHERE hw.Class__c = ‘{!Class__c.Id}’” +
      “order by Date_set__c”);
      // Iterate over the result
      var it = new sforce.QueryResultIterator(result);
      while(it.hasNext()) {
      var record = it.next();
      // Add the data to the table
      data.addRow([record.date, {v:parseFloat(record.grade), f: formatLabel(record.grade)}]);
      }
      var chart = new google.visualization.ColumnChart(document.getElementById(‘chart_div’));
      chart.draw(data, {width: 800, height: 300, pieSliceText:’label’});
      };

      • Looks like you are close. In the code where you create the data table, I would switch the order of the columns. You want your label first and then your measurement second. For almost all the Google charts, the first column needs to be a string to represent the label.

        data.addColumn(‘string’, ‘Date’);
        data.addColumn(‘number’, ‘Objective 1′);

        Second, when you do data.addRow, you are putting a date field into a string. I suspect this is throwing an error. I recommend using Firefox with Firebug to look for script errors.
        Finally, you are doing a pie chart, but I’m not sure that makes sense for your application. Maybe a bar chart would be better?

  5. Thanks for your reply Daniel, I really appreciate it, and your suggestions. I’ve done those changes, and troubleshooting some more … let’s hope I can finally get there! Cheers!

  6. Daniel, I’ve been back and forth about this, but realise the real issue is that I don’t know how to write queries with custom parent and custom child objects AND the syntax to get them to bring back fields from both parent and child objects (e.g. a row in a chart/table). This is the query that Force.com Explorer suggests, but the output doesn’t come out properly, so it’s something about how I write the row syntax maybe, or something about how those fields are formed?

    “SELECT Deadline__c, No_of_assessments__c, Teacher__c, (SELECT Student__c,Obj_1__c FROM Assessments__r) FROM Homework__c order by Deadline__c”

    That’s the query. It works fine if I only use the parent part of the query. The following is for row 34:

    data.addRow([record.Assessments__r.Student__c, v:parseFloat(record.Assessments__r.Obj_1__c)}]);

    I can’t find any documentation that gives concrete examples of custom child objects and their fields for within a query and for the output line. Can you help?

    • Is there a reason you are using the parent object Homework in the query? It looks like you just want to display on the chart information from the Assessments object. If that is the case. then just query from Assessments with a where clause to filter for the Homework you want. That’s what I do in the sample code in the blog post. The way you are doing it, you have nested objects and you’d have to loop through the Homework results and then for each homework, loop through the Assessments. If you want to flatten the structure, but include values from the parent, then your SOQL query should look something like this:

      SELECT Homework__r.Deadline__c, Homework__r.No_of_assessments__c, Homework__r.Teacher__c, Student__c, Obj_1__c from Homework__c order by Homework__r.Deadline__c

  7. This is so much better than anything else i have been able to find on this subject. Much leaner and without the need for a bunch of classes and stuff. so thank you very much!

    I have been able to get most of this working. I am having one issue though. I have a parent object Vehicle and child object Report. I want to use this query:

    // use this function to format the label
    formatLabel = function( value )
    {
    return “$” + String(value);
    }

    google.load(“visualization”, “1”, {packages:[“corechart”]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
    // Create a new data table with two columns: the label and the value
    var data = new google.visualization.DataTable();
    data.addColumn(‘string’, ‘Driver’);
    data.addColumn(‘number’, ‘Fuel’);

    // We need the sessionId to be able to query data
    sforce.connection.sessionId = ‘{!$Api.Session_ID}’;

    // Query data using SOQL.
    var result = sforce.connection.query(“Select Driver__c Driver, sum(report__c.fuel_cons__C) Fuel” +
    “From Report__c where Report__c.vehicle_name__c='{!vehicle__c.id}’ group by driver__c”

    // Iterate over the result
    var it = new sforce.QueryResultIterator(result);
    while(it.hasNext()) {
    var record = it.next();
    // Add the data to the table
    data.addRow([record.Driver, {v:parseFloat(record.Fuel)}]);
    }
    //assign the chart to the appropriate div and draw the chart
    var chart = new google.visualization.ColumnChart(document.getElementById(‘chart_div’));
    chart.draw(data, {width: 300, height: 200, title:’Overall fuel consumption’, legend:’none’,
    vAxis: {minValue:0}, hAxis: {slantedTextAngle:45}});

    But when i put it into my Vehicle layout as VF page nothing shows up. I do believe it has something to do with my query, but it is working fine in the force.com explorer so i do not know how to fix it. Any ideas?

    • I think the problem might be with your concatenation in the SOQL. You are putting two lines of text together to build SOQL and there is no space after “Fuel”. I think your SOQL ends up being FuelFrom Report__c. Change those two lines to this:

      var result = sforce.connection.query(“Select Driver__c Driver, sum(report__c.fuel_cons__C) Fuel ” +
      “From Report__c where Report__c.vehicle_name__c=’{!vehicle__c.id}’ group by driver__c”

      Crossing my fingers…

  8. You are of course right, and i also forgot to put ); at the end there. However it does nothing in terms changing the onscreen result.

    I am using the standard controller of the parent but my query does not include anything from the parent object. Is there some sort of requirement for this? i also tried specifying the vehicle.id and changing controller to the child (report) but to no avail. I must admit that all this parent/child relationship stuff is a bit confusing to me.

  9. Oh, I missed the ); too! You want the standard controller for the page to be the one where you display the chart. In this case, it looks like on the Vehicle page. It is ok if you don’t include anything from the parent object – you are just using the id as a filter.

    It looks right to me, but that is one of the drawbacks of using Javascript – it usually fails silently in the background when something is wrong. If you’ve tested the SOQL statement and it works by itself, then it must be in the Javascript. When I hit these kind of walls, I use Firebug or the built in developer tools in Chrome to debug the code.

  10. Ok, with my limited knowledge about how to debug using firebug or chrome, the only error i can get in the debug console is “sforce is not defined”?

    • To add to the error checking: I have a functioning version of the chart from your previous google charts post, without any soql. When i simply add the line

      var result = sforce.connection.query etc….

      from this code, to the working code, the previously working page fails. So i still feel there is something up with this line..

  11. Yes, when any sforce.connection.query is added before the chart-part of the code the chart fails to load. If i put it below, the chart displays.
    Complete code following below:

    google.load(“visualization”, “1”, {packages:[“corechart”]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
    // we need a table to act as the datasource for the chart
    var data = new google.visualization.DataTable();

    //When any sforce.connection is added the code fails. So without the below line the code works.
    var result = sforce.connection.query(“Select fuel_cons__c from report__c”);

    // the table needs two columns
    data.addColumn(‘string’, ‘Period’);
    data.addColumn(‘number’, ‘cons’);

    // add the rows of data which consist of a value and a formatted label
    data.addRow([‘2008’, {v:{!report__c.fuel_tot_cons__c}}]);
    data.addRow([‘2009’, {v:{!report__c.oil_tot_cons__c}}]);

    //assign the chart to the appropriate div and draw the chart
    var chart = new google.visualization.ColumnChart(document.getElementById(‘chart_div’));
    chart.draw(data, {width: 300, height: 200, title:’test chartd’, legend:’none’,
    vAxis: {minValue:0}, hAxis: {slantedTextAngle:45}});

    //IF i put the connection query line here the above code still executes and the chart is displayed.

    };

    • jeez

      script type=’text/javascript’ src=’https://www.google.com/jsapi’ />
      script src=”/soap/ajax/23.0/connection.js” type=”text/javascript” />
      script type=”text/javascript”>

  12. Daniel, I changed the original chart page to the SOQL approach as you suggested on the other post, but get nothing when I show the visualforce page either as standalone or in my Opportunity page.

    Here are the facts:

    I have a custom object called SALES12MTHROLL__c that has a lookup relationship to the Opportunity object. This stores sales for the current and prior 12 months for the product referenced in the Opportunity. My objective is to show a line graph of the sales before and after the Opportunity Won date, to visualize whether the Won business had any actual impact on our Sales trend.The query below was tested in Apex Explorer and works great.

    I do not get any errors when I save or run the vfpage.

    Problem is that I get a blank screen when I call the page via https://na2.salesforce.com/apex/(the page name), and get the same when I drag the vf page into my Opportunity page layout.

    Any idea what is happening here?

    Thanks in advance.

    // use this function to format the label

    formatCurrencyLabel = function( value )
    {
    return “$” + String(value);
    }

    google.load(“visualization”, “1”, {packages:[“corechart”]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
    // Create a new data table with two columns: the label and the value
    var data = new google.visualization.DataTable();
    data.addColumn(‘string’, ‘Current & Prior Months’);
    data.addColumn(‘number’, ‘Monthly Sales Before and After Declared Win Date’);

    // We need the sessionId to be able to query data
    sforce.connection.sessionId = ‘{!$Api.Session_ID}’;

    // Query data using SOQL.
    var result = sforce.connection.query(“Select s12.SC00__c m0, s12.SC01__c m1, s12.SC02__c m2, s12.SC03__c m3, s12.SC04__c m4, ” +
    “s12.SC05__c m5, s12.SC06__c m6, s12.SC07__c m7, s12.SC08__c m8, s12.SC09__c m9, s12.SC10__c m10, s12.SC11__c m11, ” +
    “s12.SC12__c m12 from SALES12MTHROLL__c s12 WHERE s12.SFCDKEY__c = ‘61157100CCLCOENT'”);
    // Iterate over the result
    var it = new sforce.QueryResultIterator(result);
    while(it.hasNext()) {
    var record = it.next();

    // Add the data to the table
    data.addRow([‘M-12’, {v:parseFloat(record.m12), f: formatCurrencyLabel(record.m12)}]);
    data.addRow([‘M-11’, {v:parseFloat(record.m11), f: formatCurrencyLabel(record.m11)}]);
    data.addRow([‘M-10’, {v:parseFloat(record.m10), f: formatCurrencyLabel(record.m10)}]);
    data.addRow([‘M-9’, {v:parseFloat(record.m9), f: formatCurrencyLabel(record.m9)}]);
    data.addRow([‘M-8’, {v:parseFloat(record.m8), f: formatCurrencyLabel(record.m8)}]);
    data.addRow([‘M-7’, {v:parseFloat(record.m7), f: formatCurrencyLabel(record.m7)}]);
    data.addRow([‘M-6’, {v:parseFloat(record.m6), f: formatCurrencyLabel(record.m6)}]);
    data.addRow([‘M-5’, {v:parseFloat(record.m5), f: formatCurrencyLabel(record.m5)}]);
    data.addRow([‘M-4’, {v:parseFloat(record.m4), f: formatCurrencyLabel(record.m4)}]);
    data.addRow([‘M-3’, {v:parseFloat(record.m3), f: formatCurrencyLabel(record.m3)}]);
    data.addRow([‘M-2’, {v:parseFloat(record.m2), f: formatCurrencyLabel(record.m2)}]);
    data.addRow([‘M-1’, {v:parseFloat(record.m1), f: formatCurrencyLabel(record.m1)}]);
    data.addRow([‘Today’, {v:parseFloat(record.m0), f: formatCurrencyLabel(record.m0)}]);
    }

    //assign the chart to the appropriate div and draw the chart
    var chart = new google.visualization.LineChart(document.getElementById(‘chart_div’));
    chart.draw(data, {width: 500, height: 200, title:’Impact of Won Opportunity’, legend:’none’});
    };

    Thanks.

    • At first glance, your code looks right. Have you tried using Firebug or the tools in Chrome to see if your JavaScript is throwing errors? The problem with JavaScript is that when it encounters a problem, it is fairly silent.

      When I get some time tonight, I’ll try it out in a developer edition to see if I can replicate the problem.

    • OK, I think I found a few found problems. I took your code and ran it through Firebug. There are some “illegal characters” in your code. Some of your double quotes and single quotes are the wrong type. For example, return “$” + String(value); should read return “$” + String(value);. There are a lot of them sprinkled through the code. Not sure where they came from. The other problem is in your SOQL, you do an alias on the fields, but that is only supported for aggregate functions. You’ll need to change the code to use the actual field names: SC01__c, etc.

  13. Daniel –

    I’m going in circles on this. I think I have isolated the problem to a combination of the SELECT string and the data.addRow syntax. I’m saying this because when the data row is just dumb text, I do ge a chart with no line, so I am guessing the query result is not being communicated to the data row line. I have tried about every example I’ve found here and in the Visualforce documentation, but must be missing something. Can someone actually show me what the SELECT and data.addRow lines should be for me to mimic?

    Here are the facts about the standard and custom objects we are working with:

    – The Chart visualforce page will be run as an insert into an Opportunity page.

    – I have an Opportunity field called Sales_History__c that is a lookup (not master relationship) to a custom object called SALES12MTHROLL__c. This related object stores the sales for each of the prior 12 months in fields called SC01__c through SC12__c.

    – The header of this visualforce page is:

    – The Select and data.addRow section is:

    // Query data using SOQL.
    var result = sforce.connection.query(“SELECT SC01__c, SC02__c, SC03__c, SC04__c, SC05__c, SC06__c,” +
    ” SC07__c, SC08__c, SC09__c, SC10__c, SC11__c, SC12__c, SC00__c ” +
    ” FROM SALES12MTHROLL__c where Name=’61157100CLCOENT'”);
    // Iterate over the result
    var it = new sforce.QueryResultIterator(result);
    while(it.hasNext()) {
    var record = it.next();

    // Add the data to the table
    data.addRow([‘M-12’, {v:parseFloat({????}), f: formatCurrencyLabel({????})}]);
    }

    – Notes:

    – In the data row, I’ve put ???? because everything I’ve tried has not worked.

    – I only show one data row, but I’d actually have one for each month.

    I appreciate the help and the great work you are contributing to the Salesforce community. I hope I can return that in some way.

    Best regards!

    • Hi Bob,

      I’ll send you an email to your gmail address. The wordpress comment formatting is making it difficult for me to see the code. (Those double and single quotes are all messed up)

  14. I must not have pasted this above as I intended.

    – The header of this visualforce page is:
    apex:page standardController=”Opportunity” showHeader=”false” sidebar=”false”

  15. Hi Daniel,

    Great site! I came across it when trying to troubleshoot a problem I’m having with Google Charts in a VF page. It’s the first time I’ve tried it out but can seem to get it to work. I wondered if you could help out. I started by taking a Code Example from the Google Charts site. I then stuck the example code between two apex tags making the Account object the standardcontroller. The new VF page saves fine. I then edited the Page Layout on an account and dropped the new page into a new section I created but all I see on the Account page are the two javascript buttons labelled ‘Go Faster’ and ‘Slow down’. No chart! I’m baffled. The section size (height etc) is perfect but blank. If you could help at all I’d be very grateful. Have a good weekend. Here’s the code:

    ————————————————————————————————————————-

    var gaugeData = new google.visualization.DataTable();
    gaugeData.addColumn(‘number’, ‘Engine’);
    gaugeData.addColumn(‘number’, ‘Torpedo’);
    gaugeData.addRows(2);
    gaugeData.setCell(0, 0, 120);
    gaugeData.setCell(0, 1, 80);
    var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250,
    redFrom: 250, redTo: 280, minorTicks: 5};
    var gauge;
    function drawGauge() {
    gauge = new google.visualization.Gauge(document.getElementById(‘gauge_div’));
    gauge.draw(gaugeData, gaugeOptions);
    }
    function changeTemp(dir) {
    gaugeData.setValue(0, 0, gaugeData.getValue(0, 0) + dir * 25);
    gaugeData.setValue(0, 1, gaugeData.getValue(0, 1) + dir * 20);
    gauge.draw(gaugeData, gaugeOptions);
    }

    ————————————————————————————————————————-

    Many thanks in advance,

    Gerry

    • When you don’t see any chart, then that usually means there is a problem with your JavaScript. Have you tried using Firefox with Firebug and look at the console in Firebug for any errors?

      Where are your ‘Go Faster’ and ‘Slow Down’ buttons defined? I don’t see them in the code.

  16. @Daniel,

    Thanks for these great samples !
    I wonder if anyone has a working example with barcharts, eg this one : http://code.google.com/intl/fr/apis/chart/interactive/docs/gallery/barchart.html

    Transforming the SOQL AggregateResult[] into records consumable by the chart is not that easy, especially if (in the above example) one category is not represented in one of the past years …

    Anyone already done it ?

    Best regards,
    Rup (@altiusservices on Twitter)

    • Hi Rup,

      I’ve done it with bar charts too. Let me see if I can dig up some code when I get a chance. The technique is very similar to my example. You just add more columns to the data table and then include them in the row add.

      Daniel

  17. I’m just getting into this and trying to get it to work. I originally had the standard Venn Diagram on my Account records but we implemented Multi Currency and that all went away. I am aware because of the multi-currency, I can use roll-up summaries for amount but what about Record Count?

    I’d love to have a bar or pie graph on the Account record that shows how many of what product line we have either sold or is in the pipeline for any given account.
    It would be a great visual to see this and understand what product lines that are lacking.

    Any suggestions?

    • Yes, multi-currency does make things more complicated. Here’s some info from the Help:

      If your organization uses multiple currencies, the currency of the master record determines the currency of the roll-up summary field. For example, if the master and detail records are in different currencies, the values in the detail record are converted into the currency of the master record before calculating the final value and displaying it in the same currency as the master record. If your organization has advanced currency management enabled, currency roll-up summary fields are invalid if they are on accounts and summarizing opportunity values, or on opportunities and summarizing custom object values.

      If you don’t have advanced currency management, you should be able to do roll-up summaries.

      You should be able to do a record count using the technique in the blog post, though. If you can write a SOQL query to get the data, then you can make a graph of it. Have you tried writing a SOQL query in Workbench or Force.com Explorer?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s