[visualization-api] 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);




-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/937ec944-bee4-4baa-8221-3be63a18ef2f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.