Apex Code Development You need to sign in to do that
Don't have an account?
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
<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>
<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>
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
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>