Sign Up ›

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

visualforce gauge on account page layout

I am trying to add a gauge onto the account page.  I am trying to pull only the field Variance by Percentage into the gauge.  It allowed me to save the code but nothing is showing up when I add it to the page layout.  Any suggestions.

<apex:page standardcontroller="Account" sidebar="false" showHeader="false">
<html>
  <head>
    <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'],
          ['', SELECT Id, Variance_by_Percentage__c FROM Account],
         
        ]);

        var options = {
          width: 400, height: 120,
          greenFrom: -5, redTo: 5,
          Min: -20,
          Max: 20,
          majorTicks: [-20, -15, -10, -5, 0, 5, 10, 15, 20]
        };

        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>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>
</apex:page>