+ Start a Discussion
Bryn JonesBryn Jones 

Help...basic vf coding

Im new to coding and would like help in referencing a cell in accounts for google gauges. see my code below...

also....i wont to build a standalone dashbord for my office screen. how do i reference or get numbers from a report for the guages. or how do i reference a scecific account without placing the vf page in the account to make a dashboard? 

sorry to be so dumb...just learning as is fun stuff to work with...
thanks to all who help out...muchly appreciated...

Bryn

<apex:page standardcontroller="Account" sidebar="false" showHeader="false" >

<apex:sectionHeader title="FRS GROUP DASHBOARD"/>
<font size="20"  color="darkblue" > <center> <b> FRS </b> </center> </font>
<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 = new google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', value = "!cash__c"],
         
        ]);
          var data2 = new google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['nemory', 90],
         
        ]);
         var data3 = new google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['oemory', 100],
         
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5, max: 120
        };
       
        var options2 = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5, max: 130
        };
       
        var options3 = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5, max: <apex:outputText value="{!DAY(TODAY()) *10}" />
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);
        var chart2 = new google.visualization.Gauge(document.getElementById('chart_div2'));
        chart2.draw(data2, options2);
        var chart3 = new google.visualization.Gauge(document.getElementById('chart_div3'));
        chart3.draw(data3, options3);
      }
    </script>
  </head>
  <body>
    <div id='chart_div' ></div>  
    <div id='chart_div2'></div>   
    <div id='chart_div3'></div>
   
    <div id='visualization' style="width: 1500px; height: 700px  "></div>
  </body>
</html>
</apex:page>
Best Answer chosen by Bryn Jones
CyberJusCyberJus
If you only want to see one account at a time then you probably do not need a controller. If you want it to aggregate a bunch of accounts then you do need a controller. 

I assume Cash is the field you want to report on?
Change ['Memory', value = "!cash__c"], to ['Memory', value = "{!Account.cash__c}"],

Then when you call your page just add "?id=PUT ACCOUNTID HERE" to the end of it. That will force the page to grab the account you want when it loads.

All Answers

hitesh90hitesh90
Hi,

You can't get the numbers from reports directly in your visualforce page.
you must have to use custom controller and put SOQL query inside it to get the account record.

Thank You,
Hitesh Patel
SFDC Certified Developer & Administrator & Advanced Administrator & Sales cloud consultant
Email :- hiteshpatel.aspl@gmail.com
My Blog:- http://mrjavascript.blogspot.in/
CyberJusCyberJus
If you only want to see one account at a time then you probably do not need a controller. If you want it to aggregate a bunch of accounts then you do need a controller. 

I assume Cash is the field you want to report on?
Change ['Memory', value = "!cash__c"], to ['Memory', value = "{!Account.cash__c}"],

Then when you call your page just add "?id=PUT ACCOUNTID HERE" to the end of it. That will force the page to grab the account you want when it loads.
This was selected as the best answer
Bryn JonesBryn Jones
Is this right CyberJus: b/c when i go preview the first guage doesn't show up! Thanks a ton...........

<apex:page standardcontroller="Account"  sidebar="false" showHeader="false">
?id=001i000000Y7WWP

<apex:sectionHeader title="FRS GROUP DASHBOARD"/>
<font size="20"  color="darkblue" > <center> <b> FRS </b> </center> </font>
<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 = new google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', value = "{!Account.opp__c}"],
         
        ]);
          var data2 = new google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['nemory', 90],
         
        ]);
         var data3 = new google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['oemory', 100],
         
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5, max: 120
        };
       
        var options2 = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5, max: 130
        };
       
        var options3 = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5, max: <apex:outputText value="{!DAY(TODAY()) *10}" />
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);
        var chart2 = new google.visualization.Gauge(document.getElementById('chart_div2'));
        chart2.draw(data2, options2);
        var chart3 = new google.visualization.Gauge(document.getElementById('chart_div3'));
        chart3.draw(data3, options3);
      }
    </script>
  </head>
  <body>
    <div id='chart_div' ></div>  
    <div id='chart_div2'></div>   
    <div id='chart_div3'></div>
   
    <div id='visualization' style="width: 1500px; height: 700px  "></div>
  </body>
</html>
</apex:page>