Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Vadivel MuruganVadivel Murugan 

Google Chart in VF

<apex:page >

<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/29.0/apex.js"></script>
    <script type="text/javascript" src="/soap/ajax/20.0/connection.js"></script>
    <script type="text/javascript">

            var result = sforce.connection.query("SELECT DAY_ONLY(CreatedDate) days, count(createdDate) counts FROM Visits__c where createdDate = LAST_N_Days:90  GROUP BY DAY_ONLY(CreatedDate) order by DAY_ONLY(createdDate) desc");
            records = result.getArray("records");
            alert(records);
            
    
   // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {'packages':['corechart']});
    
    google.setOnLoadCallback(drawCharts);

    function drawCharts() {         
     
           var data = new google.visualization.arrayToDataTable();
           
               data.addColumn('date', 'Created Date');
               data.addColumn('number', 'Record Count');
               
                              
             for(var i =0; i<records.length;i++)
                 data.Rows.add(['records[i].days', 'records[i].counts']);
                   
                 
                 var options = {
                title: '',
                hAxis: {title: 'days'},
                vAxis: {title: 'counts'},
                legend: 'none',
                trendlines: { 0: {color: 'red',} }    // Draw a trendline for data series 0.
              };   
               
          var visualization = new google.visualization.ColumnChart(document.getElementById('chart_div'));  
              
          visualization.draw(data,options);
          
           
          
      }
</script>
</apex:page>


In this above code Query working correctly. But Chart is not displayed Why?.......
Best Answer chosen by Vadivel Murugan
KaranrajKaranraj
Hi Vadivel - There are couple things you have make changes in your code, pass the session Id in the connection.js and there is also issue in the forming data for the chart. I have made those changes in the below code 
<apex:page >   
    <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  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.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++){
            	data.setValue(i,0,records[i].days);
            	data.setValue(i,1,records[i].counts);
            }
        var options = {
            title: '',
            hAxis: {title: 'days'},
            vAxis: {title: 'counts'},
            legend: 'none',
            trendlines: { 0: {color: 'red',} }    // Draw a trendline for data series 0.
        };   
        var visualization = new google.visualization.ColumnChart(document.getElementById('chart_div'));  
        visualization.draw(data,options);         
    }
    </script>
</apex:page>

You can always debug the javaa script code by the below steps
  • Right Click the paga and click Inspect Element or Ctrl+Shift+I
  • Click Console tab to view the error messages

Hope this resolves your problem.

Thanks,
Karanraj (http://www.karanrajs.com)
 

All Answers

KaranrajKaranraj
Hi Vadivel - There are couple things you have make changes in your code, pass the session Id in the connection.js and there is also issue in the forming data for the chart. I have made those changes in the below code 
<apex:page >   
    <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  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.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++){
            	data.setValue(i,0,records[i].days);
            	data.setValue(i,1,records[i].counts);
            }
        var options = {
            title: '',
            hAxis: {title: 'days'},
            vAxis: {title: 'counts'},
            legend: 'none',
            trendlines: { 0: {color: 'red',} }    // Draw a trendline for data series 0.
        };   
        var visualization = new google.visualization.ColumnChart(document.getElementById('chart_div'));  
        visualization.draw(data,options);         
    }
    </script>
</apex:page>

You can always debug the javaa script code by the below steps
  • Right Click the paga and click Inspect Element or Ctrl+Shift+I
  • Click Console tab to view the error messages

Hope this resolves your problem.

Thanks,
Karanraj (http://www.karanrajs.com)
 
This was selected as the best answer
Vadivel MuruganVadivel Murugan
But didn't show trend line why? and how to show date in chart below column.
KaranrajKaranraj
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