When building the original chart, I have specified the style, shape and
size of the Point in my data.. and it rendered perfectly. Onclick,I change
the fill color of the clicked point and redraw the chart. While redrawing
the chart, default point size (0) is being rendered.. Is there anyway that
I can redraw the chart by keeping the size of the point.?
Please find the attached images and code below.
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['M', 'MC,{'type':'string','role':'legend'},{'type': 'string',
'role': 'tooltip'}, {'type': 'string', 'role': 'style'}],
[-2,-10,'Tr','A1','point { size:14;shape-type: circle;
fill-color: none;stroke-color:#66dcff }'],
[5,14,'Tr','A2','point { size:14;shape-type: circle; fill-color:
none;stroke-color:#66dcff }'],
[11,7,'Tr','A3','point { size:14;shape-type: circle; fill-color:
none;stroke-color:#66dcff }'],...........................]);
var options = {
is3D: true,
title: 'With PP',
titleTextStyle:{color: 'white'},
width:800,height:750,
legend: 'none',
backgroundColor: '#191919',
explorer: { maxZoomOut:2,
keepInBounds: true },
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
}
};
var chart = new
google.visualization.ScatterChart(document.getElementById('chart_div'));
function selectHandler() {
var selectedItem = chart.getSelection()[0];
var row=selectedItem.row;
if (selectedItem) {
var pr= data.getValue(selectedItem.row, 3);
alert('The user selected ' + pr);
var view = new google.visualization.DataView(data);
console.log(view);
view.setColumns([0, 1, {
type: 'string',
role: 'style',
calc: function (dt, i) {
return (i == row) ? 'fill-color: red' :
'fill-color:grey'
}
}]);
chart.draw(view, {
is3D: true,
title: 'With PP',
titleTextStyle:{color: 'white'},
width:800,height:750,
legend: 'none',
backgroundColor: '#191919',
explorer: { maxZoomOut:2,
keepInBounds: true },
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
}
}
google.visualization.events.addListener(chart, 'select',
selectHandler);
chart.draw(data, options);
}
</script>
Thank you!!!
--
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/12a589c0-a618-4838-8036-bc4f5c0b4bef%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
