function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sharp BESharp BE 

Google chart not displaying data

Google chart not presenting data
We are creating a visualforce page which contains a Google chart displaying entered data. 2 colums are currently added (2 budget fields) and the rows are the correct API.

With the following code I'm not getting anything out of my graph. Can someone help me out what I'm doing wrong here?

Visualforce page: 
<apex:page Controller="BudgetGraphController">
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        // Load Google Chart
      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

      var bdgtData; //Variable to store data
      // Call remote action method
      BudgetGraphController.getBudgetData(function(result, event){
          bdgtData = result; //get data from Apex controller
          },{escape:true});
      
      // Draw Google chart
      function drawChart() {
          //Create the data table
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Budget Engineering');
      data.addColumn('number', 'Budget Project Management');

		//Add datatable rows
        for(i = 0; i< bdgtData.length; i++){
            data.addRow([bdgtData[i].Budget_Engineering__c, bdgtData[i].Budget_Project_Management__c]);
        }

        var options = {
          title: 'Project Budget',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</apex:page>
Apex Controller: 
global with sharing class BudgetGraphController {
     
    @RemoteAction
    global static List<Budget__c> getBudgetData(){
        List<Budget__c> bdgtGroupList = [Select Budget_Engineering__c, Budget_Project_Management__c From Budget__c];
        return bdgtGroupList;
    }
}


 
sachinarorasfsachinarorasf
Hi Sharp,

->  google.charts.load('current', {'packages':['corechart']});

Use above line instead of below line.

->  google.charts.load('current', {'packages':['line']});
 
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Sachin Arora
www.sachinsf.com