How to pass Integer drop down value from VF page to Apex Controller?

Question

I am developing Visualforce Charts with JavaScript Remoting & Google Charts API. In this example, I am looking to pass selectedNumber to the

GoogleChartsController

global with sharing class GoogleChartsController{
    public static String selectedNumber {get; set; }

    @RemoteAction
    global static Opportunity[] loadOpps() {
        System.debug('Selected Number : '+selectedNumber);
        if(selectedNumber != null){
            Integer intValue = Integer.valueOf(selectedNumber);
            return [SELECT Id, Name, ExpectedRevenue, Amount FROM Opportunity ORDER BY CreatedDate DESC LIMIT :intValue];
        }
        else
            return [SELECT Id, Name, ExpectedRevenue, Amount FROM Opportunity ORDER BY CreatedDate DESC LIMIT 5];
    }

    global GoogleChartsController(){}

    global List<SelectOption> getdynamiclist() {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('PieChart','PieChart'));
        options.add(new SelectOption('Histogram','Histogram'));
        return options;
    }

    global List<SelectOption> getdynamicNumbers() {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('10','10'));
        options.add(new SelectOption('20','20'));
        options.add(new SelectOption('50','50'));
        return options;
    }
}

GoogleChartsControllerVFPage

<apex:page controller="GoogleChartsController" sidebar="false">
     <!-- Google API inclusion -->
    <apex:includeScript id="a" value="https://www.google.com/jsapi" />
    <apex:sectionHeader title="Google Charts + Javascript Remoting" subtitle="Demoing - Opportunities by Exepected Revenue" />

    <div id="theF">
        <apex:form id="theForm">
            <b>Chart Type : </b> 
            <apex:selectList size="1" styleclass="chartBlock" onchange="initCharts()">
                <apex:selectOptions value="{!dynamiclist}"></apex:selectOptions>
            </apex:selectList>

            <b>Opportunity Size : </b> 
            <apex:selectList multiselect="false" size="1" label="Type" styleclass="chartBlock" onchange="initCharts()">
                <apex:selectOptions value="{!dynamicNumbers}"></apex:selectOptions>
            </apex:selectList>
        </apex:form> 
    </div>   

    <div id="chartBlock">
        <script>
            // 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.
            google.setOnLoadCallback(initCharts);

            function initCharts(selectedNumber){
                GoogleChartsController.loadOpps(
                    function(result, event){
                         var e = document.getElementsByClassName("chartBlock")[0];
                         var strUser = e.options[e.selectedIndex].value;

                        // load Column chart
                        var visualization = null;
                        if(strUser == 'PieChart')
                            visualization = new google.visualization.PieChart(document.getElementById('chartBlock'));
                        else if(strUser == 'Histogram')
                            visualization = new google.visualization.Histogram(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]); 
                          }
                        // 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}});
                }, {escape:true});
            }
        </script>
    </div>
</apex:page>

When I selected any number from the drop down list, value always goes null. why ?

Added screen shot:

Answer 1

If you are going to use a remote action you need to pass in selectedNumber as a parameter.

Page:

<apex:page controller="GoogleChartsController" sidebar="false">
     <!-- Google API inclusion -->
    <apex:includeScript id="a" value="https://www.google.com/jsapi" />
    <apex:sectionHeader title="Google Charts + Javascript Remoting" subtitle="Demoing - Opportunities by Exepected Revenue" />

    <div id="theF">
        <apex:form id="theForm">
            <b>Chart Type : </b> 
            <apex:selectList id="dynamicList" size="1" styleclass="chartBlock" onchange="initCharts()">
                <apex:selectOptions value="{!dynamiclist}"></apex:selectOptions>
            </apex:selectList>

            <b>Opportunity Size : </b> 
            <apex:selectList id="dynamicNumbers" multiselect="false" size="1" label="Type" styleclass="chartBlock" onchange="initCharts()">
                <apex:selectOptions value="{!dynamicNumbers}"></apex:selectOptions>
            </apex:selectList>
        </apex:form> 
    </div>   
    <div id="chartBlock"></div>
    <div id="histogramBlock"></div>
    <script>
        // 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.
        google.setOnLoadCallback(initCharts);

        function initCharts() {
            var selectedNumber = document.getElementById('{!$Component.theForm.dynamicNumbers}').value;
            GoogleChartsController.loadOpps(
                selectedNumber,
                function(result, event) {
                    var selectedChart = document.getElementById('{!$Component.theForm.dynamicList}').value;
                    // load Column chart
                    var visualization = null;  
                    if (selectedChart === 'PieChart') {
                        visualization = new google.visualization.PieChart(document.getElementById('chartBlock'));
                    }
                    if (selectedChart === 'Histogram') {
                        visualization = new google.visualization.Histogram(document.getElementById('histogramBlock'));
                    }
                    // 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]); 
                    }
                    // 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}});
                }, {escape:true}
            );
        }
    </script>
</apex:page>

Controller:

global with sharing class GoogleChartsController {

    global GoogleChartsController() {}

    @RemoteAction
    global static Opportunity[] loadOpps(Integer selectedNumber) {
        if (selectedNumber != null) {
            return [SELECT Id, Name, ExpectedRevenue, Amount FROM Opportunity ORDER BY CreatedDate DESC LIMIT :selectedNumber];
        } else {
            return [SELECT Id, Name, ExpectedRevenue, Amount FROM Opportunity ORDER BY CreatedDate DESC LIMIT 5];
        }
    }

    global List<SelectOption> getdynamiclist() {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('PieChart','PieChart'));
        options.add(new SelectOption('Histogram','Histogram'));
        return options;
    }

    global List<SelectOption> getdynamicNumbers() {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('10','10'));
        options.add(new SelectOption('20','20'));
        options.add(new SelectOption('50','50'));
        return options;
    }
}