function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Vadivel MuruganVadivel 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.
KaranrajKaranraj
Vadivel - Trendline is not supported in google chart if your X-axis of type string. So change that into type of Date and pass the date value instead of string in the row. Try the update below code
<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('date', 'Created Date'); //Changed DataType from String to Date
data.addColumn('number', 'Record Count');
data.addRows(records.length);

for(var i = 0 ; i < records.length ; i++){
data.setValue(i,0,new Date(records[i].days)); //Added date method to convert string to date type
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>

Thanks,
Karanraj
 
Vadivel MuruganVadivel Murugan
But here i got only start date of month. It didn't take repeated date i h axix why?


<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>