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
Raja Bipin Chandra  M BRaja Bipin Chandra M B 

Call Apex Controller with parameters from script in VF page

Hello Gurus,

I am calling a controller method from VF page.And, i need to pass 'chartYear' parameter from the user input as a parameter to my controller method (loadOpps) from the script.  I am new to this and i believe there is something big i am missing. Request you please guide me.
<apex:page controller="GoogleChartsController" sidebar="false"> 
    <!-- Google API inclusion -->
    <apex:includeScript id="a" value="" />
    <apex:sectionHeader title="Google Charts + Javascript Remoting" subtitle="Demoing - Opportunities by Exepected Revenue"/>
    <apex:form id="form" html-oninput="out.value = document.getElementById('page:form:pbblk:sct2:range').value">
    <apex:selectcheckboxes value="{!chartYear}" >
                    <apex:selectOptions value="{!chartYearOptions}" />
                    <apex:actionSupport event="onchange" reRender="chartBlock"/>
            <apex:outputText value="Stage: "/>
    <!-- Google Charts will be drawn in this DIV -->
    <div id="chartBlock" style="width: 900px; height: 500px;" />
    <script type="text/javascript">
        // Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', {'packages':['corechart']});
        // Set a callback to run when the Google Visualization API is loaded.
        function initCharts() {         
          // Following the usual Remoting syntax
          // [<namespace>.]<controller>.<method>([params...,] <callbackFunction>(result, event) {...}
          // controller : GoogleChartsController
          // method : loadOpps
                 function(result, event){  
                     // load Column chart
                     var visualization = new google.visualization.PieChart(document.getElementById('chartBlock'));
                     // Prepare table model for chart with columns
                     var data = new google.visualization.DataTable();
                     data.addColumn('string', 'Opportunity');
                     data.addColumn('number', 'Expected Revenue');
                     data.addColumn('number', 'Amount');    
                     // add rows from the remoting results
                     for(var i =0; i<result.length;i++){
                        var r = result[i];
                        data.addRow([r.Name, r.ExpectedRevenue, r.Amount]); 
                      var options = {
          title: 'Opportunity Details',
          legend : {position: 'top', textStyle: {color: 'blue', fontSize: 10}}, 
          is3D: true,
                    // all done, lets draw the chart with some options to make it look nice.
                   // visualization.draw(data, {legend : {position: 'top', textStyle: {color: 'blue', fontSize: 10}}, width:window.innerWidth,vAxis:{textStyle:{fontSize: 10}},hAxis:{textStyle:{fontSize: 10},showTextEvery:1,slantedText:false}});
                   visualization.draw(data,options );
              }, {escape:true});

Hi Raja,

It will useful this one, please read this one.

David ZhuDavid Zhu
<apex:form id="form" html-oninput="out.value = document.getElementById('page:form:pbblk:sct2:range').value">
<apex:actionFunction action="{!loadOpps}" name="loadOppsInJavascript"> 
         ​<apex:param name="firstParam" assignTo="{!firstParam}" value="" />   //may add a varable in the controller



You may try above to see if it works for you.