I am developing a code Easy Visualforce Charts with JavaScript Remoting & Google Charts API. In this example I want to provide two options ColumnChart and LineChart. By default ColumnChart value should be selected. If I select any value then that value I want to pass it into my onload javascript function right here:

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


var visualization = new google.visualization.ColumnChart(document.getElementById('chartBlock'));

How we can show that ?


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

    <apex:form >
      <apex:selectList size="1">
          <apex:selectOptions value="{!dynamiclist}"></apex:selectOptions>

    <div id="chartBlock">
            // 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(){
                    function(result, event){
                        // load Column chart
                        var visualization = new google.visualization.LineChart(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});



global with sharing class GoogleChartsController{   
    global static Opportunity[] loadOpps() {
        return [SELECT Id, Name, ExpectedRevenue, Amount FROM Opportunity ORDER BY CreatedDate DESC LIMIT 20];

    global GoogleChartsController(){}

    global List<SelectOption> getdynamiclist() {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('ColumnChart','ColumnChart'));
        options.add(new SelectOption('LineChart','LineChart'));
        return options;

Here is the dropdown and response:

enter image description here

and If select other option, then I should see like below

enter image description here

2 Answers 2


To get the selected value of selectList in JavaScript you need to change your approach.

<apex:selectList size="1" styleclass="chartBlock">
      <apex:selectOptions value="{!dynamiclist}"></apex:selectOptions>

Now in your JavaScript get the value using className attribute and use that.

var e = document.getElementsByClassName("chartBlock")[0];
var strUser = e.options[e.selectedIndex].value;

you need to change javascript here

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


var e = document.getElementsByClassName("chartBlock")[0];
    var strUser = e.options[e.selectedIndex].value;
 var visualization = new google.visualization.LineChart(strUser);
  • @user4567570 answer updated. Jun 13, 2017 at 13:51
  • Thanks, but I dont see its properly working yet, debugging it, Nothing is rendering on the screen. Also when we changed the drop down value nothing is happening. Please look at it Jun 13, 2017 at 13:54
  • We need to use strUser value in var visualization = new google.visualization.LineChart(document.getElementById('chartBlock')); I have also highlighted in my post. Jun 13, 2017 at 13:58

You can use action support to catch the value change.

<apex:selectList value="{!selectedValue}" size="1">
          <apex:actionSupport event="onchange" reRender="chartPanel"/>
          <apex:selectOptions value="{!dynamiclist}">


Then dirctly use in the vf script tag

when {!selectedValue} = "ColumnChart" then load all column chart google script

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .