Display Google gauge chart on selection of Account Name

Apex Class :

public with sharing class AccountController {

public String account { get; set; }

public List<SelectOption> getListOfAccounts()
{
List<Account> AccountList = [select id,Name from Account] ;
System.debug('Accounts'+AccountList.size());
List<SelectOption> AccountOptionList = new List<SelectOption>();
AccountOptionList .add(new SelectOption( ' ' ,'---Select---'));
for(Account acc : AccountList )
{
AccountOptionList .add(new SelectOption(acc.id , acc.Name));
}
return AccountOptionList ;
}

public String selectedaccountId { get; set; }

public AccountController() {

}
}

VF Page :

<apex:page controller="AccountController">

<apex:form >
<apex:pageBlock >
<apex:pageBlockSection title="Select the Account" >
<apex:OutputPanel >
<apex:selectList value="{!selectedaccountId}" size="1" multiselect="false" id="theSelectList" onChange="doChange(); return false;">
<apex:selectOptions value="{!ListOfAccounts}" />
</apex:selectList>
<script> var options = document.getElementById("{!$Component.theSelectList}"); </script>
</apex:OutputPanel>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
<html>
<head>

<script type="text/javascript">
var __sfdcSessionId = '{!GETSESSIONID()}';
</script>
<script src="../../soap/ajax/33.0/connection.js" type="text/javascript"></script>
<script src="../../soap/ajax/24.0/apex.js" type="text/javascript"></script>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

var noOfCase;
function doChange(){
var accId =options.value;
console.log('@@selectedaccountId=='+accId);
// alert(options.value);

var caseQuery = sforce.connection.query(" select Id from case where AccountId= \'"+accId +"\' ");
var case_records = caseQuery.getArray("records");
noOfCase = +case_records.length;
console.log('@@noOfCase =='+noOfCase);


}

google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {

/* var data = google.visualization.arrayToDataTable([
// ['Label', 'Value'],
//['Memory', 80],
//['CPU', 55],
//['Network', 68]
//]);
*/
var data = new google.visualization.DataTable();
data.addColumn('string', 'Cases'); // must be string
data.addColumn('number', 'value');
data.addRow(['Cases',noOfCase]);

var options = {
width: 400, height: 120,
redFrom: 0, redTo: 33,
yellowFrom: 34, yellowTo: 66,
greenFrom: 67 , greenTo: 100
minorTicks: 5
};

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>

The Google chart needs to be displayed with Case Count , upon selection of the Account Name .
Can you please help with the loading of the chart?

January 19, 2016
·
Answer
·
Like
0
·
Follow
1

VinodKR
Hi BlueBerry,

Try this Page:

<apex:page controller="sfdctest">
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection title="Select the Account" >
<apex:OutputPanel >
<apex:selectList value="{!selectedaccountId}" size="1" multiselect="false" id="theSelectList" onChange="drawChart(this.value);">
<apex:selectOptions value="{!ListOfAccounts}" />
</apex:selectList>
<script> var options = document.getElementById("{!$Component.theSelectList}"); </script>
</apex:OutputPanel>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
<html>
<head>

<script type="text/javascript">

</script>
<script src="../../soap/ajax/33.0/connection.js" type="text/javascript"></script>
<script src="../../soap/ajax/24.0/apex.js" type="text/javascript"></script>
<script type='text/javascript' src='https://www.google.com/jsapi' />
<script type="text/javascript">

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

function drawChart(val) {

sforce.connection.sessionId = "{!$Api.Session_ID}";
var caseQuery = sforce.connection.query(" select Id from case where AccountId= \'"+val +"\' ");
var case_records = caseQuery.getArray("records");
var noOfCase = case_records.length;

var data = google.visualization.arrayToDataTable([
['Title', 'Value'],
['', 0]

]);

var data = new google.visualization.DataTable();
data.addColumn('string', 'Cases'); // must be string
data.addColumn('number', 'value');
data.addRow(['Cases',noOfCase]);

var options = {
width: 400, height: 120,
redFrom: 0, redTo: 33,
yellowFrom: 34, yellowTo: 66,
greenFrom: 67 , greenTo: 100,
minorTicks: 5
};
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>

Thanks,

Have a great day ahead,Let the Force be with you!
Please mark this as best answer if it helps you.

January 25, 2016
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Display Google gauge chart on selection of Account Name

You need to sign in to do that.