CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
PTN
PTN

Reputation: 427

Google Chart :Wrong result of 'select' event after filtered with ControlWrapper

UPDATE

I've change the code to fix this

there's no need to wrap select event to ready -- this fixed double tab open

google.visualization.events.addListener(chart1 ,'select', tableSelectHandler);

function tableSelectHandler(){
   var selection = chart1.getChart().getSelection()[0];
   var chartDataView = chart1.getDataTable();
   var rowindex = chartDataView.getTableRowIndex(selection.row);
   
      //in case you need value from underlyingtable (data1)
      
			var cnid = data1.getValue(rowindex, 0);
			var polid = data1.getValue(rowindex, 1);
			var strid = data1.getValue(rowindex, 2);
			var statecode = data1.getValue(rowindex, 4);
	
      window.open("http://www.sagisepr.com/country.php?country=" + cnid + "&polsel=" + polid + "&sid=" + strid + "&statecode=" + statecode);
		
	}

you can see the wrong result at my page here

When you click on any bar on Timeline Chart,it's gonna open a new tab and link to another page,and the result here correct.

but after you filter it with controlWrapper enter image description here

and click to any bar again,it's gonna link to the wrong page and open double tab.

for the code of the event

google.visualization.events.addListener(chart1, 'ready', function() {
  google.visualization.events.addListener(chart1, 'select', tableSelectHandler);
});


function tableSelectHandler() {
  var selection = chart1.getChart().getSelection();
  var cnid = data1.getValue(selection[0].row, 0);
  var polid = data1.getValue(selection[0].row, 1);
  var strid = data1.getValue(selection[0].row, 2);


  var statecode = data1.getValue(selection[0].row, 4);
  if (selection.length > 0) {
    //http://www.sagisepr.com/country.php?country=21&polsel=1&sid=17&statecode=AR
    window.open("http://www.sagisepr.com/country.php?country=" + cnid + "&polsel=" + polid + "&sid=" + strid + "&statecode=" + statecode);
  }

}

full code

google.charts.load('current', {
  'packages': ['corechart', 'controls']
});

google.charts.setOnLoadCallback(drawRegionsMap);



function drawRegionsMap() {

  var query1 = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1sOyYwL51uWTd7Pv4Sp_bKdxWmH-g6QA2SDHhw93_2s8/edit?usp=sharing");
  //all
  query1.setQuery('select * where J="Take back policy model" order by F,Y,M,N,L');
  query1.send(drawDashboard);
}

function drawDashboard(response1) {

  var data1 = response1.getDataTable();

  for (var row = 1; row < data1.getNumberOfRows(); row++) {
    if (data1.getValue(row - 1, 5) == data1.getValue(row, 5) && data1.getValue(row - 1, 6) == data1.getValue(row, 6)) { //if the previous one has the same label   
      if (data1.getValue(row - 1, 13) > data1.getValue(row, 12)) { // if the previous end date is greater than the start date of current row
        data1.setValue(row - 1, 13, data1.getValue(row, 12)) // set the previous end date to the start date of current row
      }
    }
  }



  var view1 = new google.visualization.DataView(data1);
  view1.setColumns([
    //index column 0
    {
      type: 'string',
      id: 'Country',
      calc: function(dt, row) {
        //return countryname statename - policies // USA New York - WEEE
        return dt.getFormattedValue(row, 5) + " " + dt.getFormattedValue(row, 22) + " - " + dt.getFormattedValue(row, 6)
      }
    },
    //index column 1

    {
      type: 'string',
      id: 'policy',
      calc: function(dt, row) {
        return dt.getFormattedValue(row, 6)
      }
    }
    //index column 2
    , {
      type: 'string',
      role: 'tooltip',
      properties: {
        html: true
      },
      calc: function(dt, row) {
        var country = dt.getFormattedValue(row, 5)
        var policy = dt.getFormattedValue(row, 6)
        var dataname = dt.getFormattedValue(row, 8)
        var dropname = dt.getFormattedValue(row, 11)
        var formatter = new google.visualization.DateFormat({
          pattern: "MMMM yyyy"
        });
        var startdate = formatter.formatValue(dt.getValue(row, 12));
        //var startdate = dt.getFormattedValue(row, 12)
        var comment = dt.getFormattedValue(row, 15)
        //colorValues.push(dt.getFormattedValue(row, 6))
        return '<br><div id="country">' + country + " - " + policy + '<br><br></div> ' +
          '<div id="header1">Dominant (E)PR policy model:<br></div>' +
          '<div id="dropname">' + dropname + '<br><br></div>' +
          '<div id ="header2">Since :&nbsp;</div><div id="date">' + startdate + " " + 'to current</div><br><br><br>' +
          '<div id ="comment">' + comment + '<\/div>'
      }
    },
    //style role
    {
      type: 'string',
      id: 'color',
      role: 'style',
      calc: function(dt, row) {
        return dt.getFormattedValue(row, 25)
      }
    },


    //index column 3,4 start-enddate
    12, 13,

  ]);



  var chart1 = new google.visualization.ChartWrapper({
    chartType: 'Timeline',
    //dataTable: 'data1',
    containerId: 'colormap1',
    options: {
      width: 800,
      height: 600,
      //colors: colorValues,

      timeline: {
        groupByRowLabel: true,
        rowLabelStyle: {
          fontSize: 12,
          width: 300
        },
        showBarLabels: false
      },
      tooltip: {
        isHtml: true
      },
    }


  });


  var namePicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnIndex': '1',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false
      }
    }
  });


  // Create a dashboard.
  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div'));




  // Establish dependencies, declaring that 'filter' drives 'pieChart',
  // so that the pie chart will only display entries that are let through
  // given the chosen slider range.
  dashboard.bind(namePicker, chart1);
  google.visualization.events.addListener(chart1, 'ready', function() {
    google.visualization.events.addListener(chart1, 'select', tableSelectHandler);
  });


  function tableSelectHandler() {
    var selection = chart1.getChart().getSelection();
    //var selection = chart1.getSelection();
    var cnid = data1.getValue(selection[0].row, 0);
    var polid = data1.getValue(selection[0].row, 1);
    var strid = data1.getValue(selection[0].row, 2);
    //var sid = (strid) - 1;

    var statecode = data1.getValue(selection[0].row, 4);
    if (selection.length > 0) {
      //http://www.sagisepr.com/country.php?country=21&polsel=1&sid=17&statecode=AR
      window.open("http://www.sagisepr.com/country.php?country=" + cnid + "&polsel=" + polid + "&sid=" + strid + "&statecode=" + statecode);
    }

  }

  // Draw the dashboard.
  dashboard.draw(view1);



}
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<div id="dashboard_div">
  <div id="filter_div"></div>
  <!--chart_div!-->
  <div id='colormap1'> </div>
</div>

anyone knows what's happening here?

I assume the selection still getting row from default chart(without filtered) but I don't know how to fix it.

thank you.

Upvotes: 2

Views: 416

Answers (1)

WhiteHat
WhiteHat

Reputation: 61230

instead of using original data table to get value... 

data1.getValue(...)

use filtered data table from the chart... 

chart1.getDataTable().getValue(...)

Upvotes: 1

Related Questions