The problem is far simpler than I was thinking. There's no bug involving redrawing, or use of a DataView, but setting the point size to a different value for each point is not as convenient as one would like. Since you can only have one style role column, you have to specify all the style properties that you want to set every time. Your click handler is changing all the rows of the style column, and you are only setting the fill-color, which results in all other styles reverting to the default. That's why the point size reverts to the default, but not actually 0 (or you wouldn't see them at all).
Here is your example in a jsfiddle: https://jsfiddle.net/dlaliberte/b4bj7t4r/2/ So, until we allow multiple style role columns, or separate columns for different aspects of the style, you'll have to manage this yourself. It should be enough to just use setValue() for the style column on the row that is to be changed, and don't build a new DataView each time a point is clicked. You should save the size value for each row somewhere else, but one place you could save it is in another column of your datatable. What you are doing with setting the size of the points is very similar to what you get with a BubbleChart, by the way. Is there a reason you didn't want to use the BubbleChart? On Wed, Jun 15, 2016 at 11:49 AM, <steve.ave...@gmail.com> wrote: > Hello Daniel, > > Thanks for suggesting the work around. Can you please help me with a > sample code that does my required functionality.. > > > > > On Wednesday, June 15, 2016 at 10:39:58 AM UTC-5, Daniel LaLiberte wrote: >> >> Hi Steve, >> >> Sounds like you have found a bug. I haven't tried to reproduce it yet, >> but I would suspect this is caused by the fact that the ScatterChart is >> actually implemented internally using a LineChart with lineWidth of 0 and >> pointSize of 8. Perhaps on redrawing, it gets confused about part of this >> internal hack. As a workaround, you might try doing the same thing >> explicitly. That is, use LineChart instead, and set the lineWidth option >> to 0. >> >> Another possible workaround is to use LineChart with a 'series' option >> and set the 'type' of series 0 to 'scatter'. >> >> >> On Wed, Jun 15, 2016 at 9:38 AM, <steve....@gmail.com> wrote: >> >>> 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 google-visualization-api+unsubscr...@googlegroups.com. >>> To post to this group, send email to google-visua...@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/12a589c0-a618-4838-8036-bc4f5c0b4bef%40googlegroups.com >>> <https://groups.google.com/d/msgid/google-visualization-api/12a589c0-a618-4838-8036-bc4f5c0b4bef%40googlegroups.com?utm_medium=email&utm_source=footer> >>> . >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> >> >> -- >> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> >> dlali...@google.com 5CC, Cambridge MA >> > -- > 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/d39efc17-f7c2-4713-8d28-797dab86e5c0%40googlegroups.com > <https://groups.google.com/d/msgid/google-visualization-api/d39efc17-f7c2-4713-8d28-797dab86e5c0%40googlegroups.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> dlalibe...@google.com <dlalibe...@google.com> 5CC, Cambridge MA -- 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/CAOtcSJP_g4ipYMzbesYC1bn%2B2VwNJ4_r0Hzj-WZYCADnic59VQ%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
