select scatter plot dot on external click event google charts
<p>I have an external ul li list containing john and smith this list is not part of scatter chart <strong>(html code not define here)</strong>. When user click on john or smith, scatter plot's related dot should be selected and change its color from blue to red. </p>

<p>Secondly I use google.visualization.events.addListener(scatterChart, 'select', tableSelectHandler); to change dot color but its color didn't remain changed. Is there any solution for these two situations. I use following code.</p>

<pre><code>var jsonData = '[[{"type":"number","label":"row"},{"type":"string","label":"Screen Name"},{"type":"number","label": "Followers Count"},{"type":"number","label":"Following Count"},{"type":"datetime","label":"Date"}],[1,"john",215,263,"Date(2016,1,10,17,07,38)"],[1,"smith",315,363,"Date(2016,1,10,18,07,38)"]]'; 

   var data = google.visualization.arrayToDataTable(jQuery.parseJSON(jsonData));


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

  // Create a range slider, passing some options
  var donutRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',
    'options': {
      'width': "100%",
      'filterColumnLabel': 'row',
      'minValue': 1,
      'maxValue': totalTweets
    },
      // Explicitly positions the thumbs at position 3 and 8,
    // out of the possible range of 1 to 10.
    'state': {'lowValue': 1, 'highValue': 1000}
  });

   // Create a scatter chart, passing some options
  var scatterChart = new google.visualization.ChartWrapper({
    'chartType': 'ScatterChart',
    'containerId': 'scatter_chart_div',
    'options': {
      'width': "100%",
      'height': 390,
      'legend': 'none',
      explorer : {
            actions : [ 'dragToZoom', 'rightClickToReset' ],
        },
    },

    // The scatter chart will use the following columns
    // out of all the available ones.
    'view': {'columns': [4, 2]}

  });

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

  // 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(donutRangeSlider, scatterChart);

    function tableSelectHandler() {

        var selection = scatterChart.getChart().getSelection();
        if(selection.length) {
            var selectedScreenName = data.getValue(selection[0].row, 1);

            // Select sidebar screen_name
            $("#" + selectedScreenName).trigger("click");

$("#scatter_chart_div div div div svg g g g circle[stroke-width='0']").attr("fill", "#fff000");


            // scroll to view sidebar screen_name
            var position = $("#" + selectedScreenName).offset().top - 
            $('#singleUserTimelineScreenNamesContainer').offset().top + 
            $('#singleUserTimelineScreenNamesContainer').scrollTop();
            $('#singleUserTimelineScreenNamesContainer').animate({ scrollTop: position });


            var view = new google.visualization.DataView(data);

            view.setColumns([1,2, {
                type: 'string',
                role: 'style',
                calc: function (dt, i) {
                console.log(i);
                    return (i == row) ? 'color: red' : null;
                }
            }]);

            scatterChart.draw(view);

        }
    }

    // Draw the dashboard.
    dashboard.draw(data);
</code></pre>