Interaction with Scatter Plot

[Maxim Colls]

Hi,

I'm trying to interact with the Scatter Plot. What I want to do is to
highlight / change the color of a point dynamically.

I tried with setSelection method but it doesn't seem to work.

Thanks,

Màxim

[Riccardo Govoni ☢]

At the moment the scatter plot does not offer any visual highlight for selection events (that is, the selection is registered, but the selected point is not visually differentiated from the others, see https://groups.google.com/d/topic/google-visualization-api/jwLMkhwKP6c/discussion ), so plain setSelection won't work for you. Other team members might detail whether changes are happening in this area or not, because I'm not fully up-to-date on this.

In the meanwhile, since the scatterplot uses a separate color for each data serie (each datatable column) an alternative solution might be the following:

- when a point is selected (via setSelection or by user click), identify the correspondent datatable row and move the cell containing the point value to a separate column (this will trigger a color change) and redraw the visualization.

- when another point is selected, revert the previous change and apply the previous step.

I haven't explicitly coded this, but I think it should work, although it's a non trivial amount of helper code to write.

-- R.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[asgallant]

It shouldn't be that hard to implement:

/*  this adds a 'select' event listner that removes a point
 *  from column 1 and adds it to column 2 (which changes 
 *  the point's color)
 *  assumes:
 *    data is the DataTable object, with data in column 1 and an empty column 2
 *    chart is the Chart object
 *    options is an object of chart options
 *  "highlighted" elements that are re-selected stay highlighted
 *  "highlighted" elements that are not re-selected get returned
 *  to column 1
 */
new google.events.addListener(chart, 'select', function() {
    // only change if data in column 1 is selected
    if (data.getSelection()['column'] == 1) {
        // return previous highlighted elements to column 1
        for (i = 0, i < data.getNumberOfRows; i++) {
            if (data.getValue(1, 2) != null) {
                data.setValue(i, 1, data.getValue(i, 2));
                data.setValue(i, 2, null);
            }
        }
        // add this element to column 2
        var row = data.getSelection()['row'];
        data.setValue(row, col, null);
        data.setValue(row, 2, data.getValue(row, 1));
        chart.draw(data, options);
    }
});

[Riccardo Govoni ☢]

You're right, for some reason I ended up thinking you'd need to generate/destroy rows, while you can just use nulls in place of values during the shift. Thanks.

You might want to cache the last shifted value, to avoid having to scan the entire datatable on each 'select' event to unshift it.

Also, I think you want to set the col2 value before erasing col1 value to null.

Working demo: http://jsfiddle.net/Ry6AA/3/  ( which deselects if you click on a previously selected item).

-- R.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/hi1UtDbwPK0J.

[asgallant]

D'oh!  *sheepish grin* Yeah, writing and then erasing would be a good idea.  I initially wrote it with the value stored in a variable prior to erasing the cell, but then changed it when I realized I only needed it once.  Didn't think that through too far  >;o)

[asgallant]

You need a minor tweak in your code as well, as row 0 never gets deselected: http://jsfiddle.net/Ry6AA/4/

[Maxim Colls]

Thank you very much! I did what you said and it perfectly works. Just
one thing, there is a little delay because you actually redraw the
complete plot and there are about 300 dots, but it works fine :)