Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Samuel JohnsonCBESamuel JohnsonCBE 

Google Chart into visualforce page

I am trying to create a google chart image into a visualforce page and have it pull information from a field on the account page.  Here is my script.  I am using a field called "Variance_by_Percentage__c" I am trying to use an in image of
User-added image

<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">
 
 
    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 = google.visualization.arrayToDataTable([
              ['Title', 'Value'],
              ['', 0]

          ]);
             var options = {
              width: 600,
              height: 320,
            greenFrom: -5,
             greenTo: 5,
              min: -20,
              max: 20,
              majorTicks: [-20, -15, -10, -5, 0, 5, 10, 15, 20],
          };
 
        // 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 Id, Variance_by_Percentage__c FROM Account");
        // 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.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);

          setInterval(function () {
              data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
              chart.draw(data, options);
          }, 13000);
          setInterval(function () {
              data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
              chart.draw(data, options);
          }, 5000);
          setInterval(function () {
              data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
              chart.draw(data, options);
          }, 26000);

    };
 
  </script>
  </head>
  <div id="chart_div" />
</apex:page>
Darshan Shah2Darshan Shah2

Hello Samuel,

Please find below working updated code: (I have changed only 2 lines shown as underline)
Kindly let me know whether it works or not.

<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">
 
 
    google.load("visualization", "1", {packages:["gauge"]});
    google.setOnLoadCallback(drawChart);
 
    function drawChart() {
        // Create a new data table with two columns: the label and the value
       var data = google.visualization.arrayToDataTable([
              ['Title', 'Value'],
              ['', 0]

          ]);
             var options = {
              width: 600,
              height: 320,
            greenFrom: -5,
             greenTo: 5,
              min: -20,
              max: 20,
              majorTicks: [-20, -15, -10, -5, 0, 5, 10, 15, 20],
          };
 
        // 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 Id, Variance_by_Percentage__c FROM Account");
        // 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)}]);
        }
        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);

          setInterval(function () {
              data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
              chart.draw(data, options);
          }, 13000);
          setInterval(function () {
              data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
              chart.draw(data, options);
          }, 5000);
          setInterval(function () {
              data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
              chart.draw(data, options);
          }, 26000);

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

Warm Regards,
Darshan Shah
Samuel JohnsonCBESamuel JohnsonCBE
I don't know if your code worked or not but I was able to finally get it.  Here is what I used
underlined is what I changed.


<apex:page standardcontroller="Account" sidebar="false" showHeader="false">
<html>
<head>
<center> <h1><center><font size="4">Forecast Variance by %</font></center></h1>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["gauge"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['', {!account.Variance_by_Percentage__c}], ]); var options = { width: 600, height: 320, greenFrom: -6, greenTo: 6, min: -50, max: 50, majorTicks: [-40, -30, -20, -10, 0, 10, 20, 30, 40] }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); setInterval(function() { data.setValue({!account.Variance_by_Percentage__c}); chart.draw(data, options); }, 13000); } </script> </center> </head> <body> <center> <div id="chart_div" style="width: 400px; height: 120px;"></div> </center> </body> </html> </apex:page>