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 [email protected].
To post to this group, send email to [email protected].
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.
