0

I have an html drop down that I want to connect with a google linechart in order to filter data. I have an event listener inside a setChartView function. I want to set specific columns based on what the user selects.

In this case:

view.columns.push(columnsTable.getValue(4, 1)); 
view.columns.push(columnsTable.getValue(5, 1));

The problem is, I cannot put these view requests inside my if statements because they are not defined within the scope of the event listener. I can take my if statement out of the event listener and say if (a.value == 'selectedValue') but then the event listener only takes the default selected value (in this case, 'maint') and does not recognize changed value a.

How do I put my view requests 

view.columns.push(columnsTable.getValue(4, 1)); 
view.columns.push(columnsTable.getValue(5, 1));

inside my listener? And have these setChartView values recognized within the listener?

I've tried adding setChartView to the Listener parameters, calling setChartView after the function declaration and have been referencing this https://www.w3schools.com/jsref/met_document_addeventlistener.asp

I feel like I'm missing something quite simple?

    function setChartView(linechart, columnsTable, columnFilter) {
        var state = columnFilter.getState();
        var row;
        var view = {
            columns: [0]
        };

         var a = document.getElementById('select');
         a.addEventListener('change', function() {

              if (this.value = 'maint'){
                 console.log('maint');

              } else if (this.value = 'ru'){
                 console.log('ru');

              } else if (this.value = 'sf'){
                 console.log('sf');
              }

              }, false);



        view.columns.push(columnsTable.getValue(4, 1)); 
        view.columns.push(columnsTable.getValue(5, 1));

        // sort the indices into their original order
        view.columns.sort(function (a, b) {
            return (a - b);
        });

        linechart.setView(view);
        linechart.draw();
    }// end setChartView
Melody Anoni
  • 223
  • 1
  • 3
  • 16
  • Please add relevant language tags. Is this a web-app based on Google apps script or a html/javascript page? – TheMaster Nov 27 '18 at 22:13
  • for clarification, you want to set the chart's view, when the select changes, and set the view columns based on the select value? – WhiteHat Nov 27 '18 at 23:06
  • @WhiteHat yes, that is correct! It currently works, but only if I do not include the listener. But I need the listener so the user can select which columns they want to see – Melody Anoni Nov 28 '18 at 17:17
  • @TheMaster thanks, I did now! This is using google appsscript with gs for the backend, and separate html and js files – Melody Anoni Nov 28 '18 at 17:18
  • so how / when is `setChartView` being called now? you'll want to call `setChartView` when the select changes, so need to move the event listener outside of `setChartView`... – WhiteHat Nov 28 '18 at 17:36
  • Thank you, I realize I was calling setChartView on page load which makes sense why nothing was happening on click – Melody Anoni Nov 30 '18 at 14:30

0 Answers0