select scatter plot dot on external click event

[sohail ahmed]

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

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.

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