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

1

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);
  • @user4567570 answer updated. – Tushar Sharma Jun 13 '17 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 – user4567570 Jun 13 '17 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. – user4567570 Jun 13 '17 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.