0

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'));

OR

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

How we can show that ?

VFPage

<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>
      </apex:selectList>
    </apex:form>  


    <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(){
                GoogleChartsController.loadOpps(
                    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});
            }
        </script>
    </div>

</apex:page>

GoogleChartsController

global with sharing class GoogleChartsController{   
    @RemoteAction
    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

Improve this question

2 Answers 2

Reset to default
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>
 </apex:selectList>

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'));

to

var e = document.getElementsByClassName("chartBlock")[0];
    var strUser = e.options[e.selectedIndex].value;
 var visualization = new google.visualization.LineChart(strUser);
Improve this answer
3
  • @user4567570 answer updated. Commented 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 Commented 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. Commented Jun 13, 2017 at 13:58
0

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}">
          </apex:selectOptions>

      </apex:selectList>

Then dirctly use in the vf script tag

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

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.