Default Point size being rendered when I redraw Scatter Chart

45 views
Skip to first unread message

steve....@gmail.com

unread,
Jun 15, 2016, 9:38:31 AM6/15/16
to Google Visualization API
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!!!
pic1.PNG
pic2.PNG

Daniel LaLiberte

unread,
Jun 15, 2016, 11:39:58 AM6/15/16
to Google Visualization API
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'.


--
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-visualizati...@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.
For more options, visit https://groups.google.com/d/optout.



--

steve....@gmail.com

unread,
Jun 15, 2016, 11:49:27 AM6/15/16
to Google Visualization API
Hello Daniel,

Thanks for suggesting the work around. Can you please help me with a sample code that does my required functionality..


To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

Daniel LaLiberte

unread,
Jun 15, 2016, 1:57:52 PM6/15/16
to Google Visualization API
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?


To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.



--

--
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-visualizati...@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/d39efc17-f7c2-4713-8d28-797dab86e5c0%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

steve....@gmail.com

unread,
Jun 15, 2016, 3:19:15 PM6/15/16
to Google Visualization API
Thanks for your response. I haven't used bubble chart because I needed to have the transparent circles/squares/triangles in my chart. I will check out the changes suggested by you and let you know if that works.

Thanks again.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
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+unsub...@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.



--
Reply all
Reply to author
Forward
0 new messages