You need to sign in to do that
Don't have an account?
Vadivel Murugan
Vf in google chart
<apex:page >
<apex:includeScript value="{!URLFOR($Resource.dateformat)}" />
<apex:includeScript id="a" value="https://www.google.com/jsapi" />
<apex:sectionHeader subtitle="Reactive Call Outs Per Day"/>
<!-- Google Charts will be drawn in this DIV -->
<div id="chart_div" />
<script type="text/javascript" src="/soap/ajax/20.0/connection.js"></script>
<script type="text/javascript">
sforce.connection.sessionId = "{!$Api.Session_ID}";
var result = sforce.connection.query("SELECT DAY_ONLY(CreatedDate) days, count(createdDate) counts FROM Visits__c where createdDate = LAST_N_Days:90 AND Cancelled__c = false AND Visit_Type__c = 'Reactive' AND (Call_Out_Types__c = 'Call Out' OR Call_Out_Types__c = 'Revisit' OR Call_Out_Types__c = 'Recall' OR Call_Out_Types__c = 'Revisit - P&L Only') AND (NOT(Site__r.Name = 'Messages' OR Site__r.Name = 'Holidays' OR Site__r.Name = 'Projects Work' OR Site__r.Name = 'Training' OR Site__r.Name = 'Unifier Test Customer' OR Site__r.Name = 'Unifier Test Customer - Site A' OR Site__r.Name = 'Unifier Test Customer - Site B' OR Site__r.Name = 'Unifier Test Customer - Site C' OR Site__r.Name = 'Unifier Test Customer - Site D')) GROUP BY DAY_ONLY(CreatedDate) order by DAY_ONLY(createdDate) desc");
records = result.getArray("records");
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
google.load("visualization", "1", {packages: ["scatter"]});
google.setOnLoadCallback(drawCharts);
function drawCharts() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Created Date');
data.addColumn('number', 'Record Count');
data.addRows(records.length);
for(var i = 0 ; i < records.length ; i++){
var dateformat = moment(records[i].days).format("DD-MM-YYYY");
data.setValue(i,0,dateformat);
data.setValue(i,1,records[i].counts);
}
var options = {
title: '',
hAxis: {title: 'Created Date'},
vAxis: {title: 'counts'},
legend: 'none',
trendlines: { 0: {color: 'green',} } // Draw a trendline for data series 0.
};
var visualization = new google.visualization.ColumnChart(document.getElementById('chart_div'));
visualization.draw(data, {showRowNumber: true, width: '1250', height: '500'}, options);
}
</script>
</apex:page>
IN this above code Trend Line is not showing chart. Why? anyone know reply.
<apex:includeScript value="{!URLFOR($Resource.dateformat)}" />
<apex:includeScript id="a" value="https://www.google.com/jsapi" />
<apex:sectionHeader subtitle="Reactive Call Outs Per Day"/>
<!-- Google Charts will be drawn in this DIV -->
<div id="chart_div" />
<script type="text/javascript" src="/soap/ajax/20.0/connection.js"></script>
<script type="text/javascript">
sforce.connection.sessionId = "{!$Api.Session_ID}";
var result = sforce.connection.query("SELECT DAY_ONLY(CreatedDate) days, count(createdDate) counts FROM Visits__c where createdDate = LAST_N_Days:90 AND Cancelled__c = false AND Visit_Type__c = 'Reactive' AND (Call_Out_Types__c = 'Call Out' OR Call_Out_Types__c = 'Revisit' OR Call_Out_Types__c = 'Recall' OR Call_Out_Types__c = 'Revisit - P&L Only') AND (NOT(Site__r.Name = 'Messages' OR Site__r.Name = 'Holidays' OR Site__r.Name = 'Projects Work' OR Site__r.Name = 'Training' OR Site__r.Name = 'Unifier Test Customer' OR Site__r.Name = 'Unifier Test Customer - Site A' OR Site__r.Name = 'Unifier Test Customer - Site B' OR Site__r.Name = 'Unifier Test Customer - Site C' OR Site__r.Name = 'Unifier Test Customer - Site D')) GROUP BY DAY_ONLY(CreatedDate) order by DAY_ONLY(createdDate) desc");
records = result.getArray("records");
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
google.load("visualization", "1", {packages: ["scatter"]});
google.setOnLoadCallback(drawCharts);
function drawCharts() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Created Date');
data.addColumn('number', 'Record Count');
data.addRows(records.length);
for(var i = 0 ; i < records.length ; i++){
var dateformat = moment(records[i].days).format("DD-MM-YYYY");
data.setValue(i,0,dateformat);
data.setValue(i,1,records[i].counts);
}
var options = {
title: '',
hAxis: {title: 'Created Date'},
vAxis: {title: 'counts'},
legend: 'none',
trendlines: { 0: {color: 'green',} } // Draw a trendline for data series 0.
};
var visualization = new google.visualization.ColumnChart(document.getElementById('chart_div'));
visualization.draw(data, {showRowNumber: true, width: '1250', height: '500'}, options);
}
</script>
</apex:page>
IN this above code Trend Line is not showing chart. Why? anyone know reply.
Thanks,
Karanraj
<apex:page >
02 <apex:includeScript value="{!URLFOR($Resource.dateformat)}" />
03 <apex:includeScript id="a" value="https://www.google.com/jsapi" />
04 <apex:sectionHeader subtitle="Reactive Call Outs Per Day"/>
05 <!-- Google Charts will be drawn in this DIV -->
06 <div id="chart_div" />
07 <script type="text/javascript" src="/soap/ajax/20.0/connection.js"></script>
08 <script type="text/javascript">
09
10 sforce.connection.sessionId = "{!$Api.Session_ID}";
11 var result = sforce.connection.query("SELECT DAY_ONLY(CreatedDate) days, count(createdDate) counts FROM Visits__c where createdDate = LAST_N_Days:90 AND Cancelled__c = false AND Visit_Type__c = 'Reactive' AND (Call_Out_Types__c = 'Call Out' OR Call_Out_Types__c = 'Revisit' OR Call_Out_Types__c = 'Recall' OR Call_Out_Types__c = 'Revisit - P&L Only') AND (NOT(Site__r.Name = 'Messages' OR Site__r.Name = 'Holidays' OR Site__r.Name = 'Projects Work' OR Site__r.Name = 'Training' OR Site__r.Name = 'Unifier Test Customer' OR Site__r.Name = 'Unifier Test Customer - Site A' OR Site__r.Name = 'Unifier Test Customer - Site B' OR Site__r.Name = 'Unifier Test Customer - Site C' OR Site__r.Name = 'Unifier Test Customer - Site D')) GROUP BY DAY_ONLY(CreatedDate) order by DAY_ONLY(createdDate) desc");
12
13 records = result.getArray("records");
14
15 // Load the Visualization API and the piechart package.
16 google.load('visualization', '1.0', {'packages':['corechart']});
17 google.load("visualization", "1", {packages: ["scatter"]});
18
19 google.setOnLoadCallback(drawCharts);
20
21 function drawCharts() {
22 var data = new google.visualization.DataTable();
23
24 data.addColumn('date', 'Created Date'); //Changed DataType from String to Date
25 data.addColumn('number', 'Record Count');
26 data.addRows(records.length);
27
28 for(var i = 0 ; i < records.length ; i++){
29 data.setValue(i,0,new Date(records[i].days)); //Added date method to convert string to date type // " Here only dispaly the start of date in month"
30 data.setValue(i,1,records[i].counts);
31 }
32
33 var options = {
34 title: '',
35 hAxis: {title: 'Created Date'},
36 vAxis: {title: 'counts'},
37 legend: 'none',
38 trendlines: { 0: {color: 'green',} } // Draw a trendline for data series 0.
39 };
40
41 var visualization = new google.visualization.ColumnChart(document.getElementById('chart_div'));
42 visualization.draw(data, {showRowNumber: true, width: '1250', height: '500'}, options);
43
44 }
45 </script>
46 </apex:page>