You need to include tableHandler and bubbleHandler inside
drawVisualization, so they can be in-scope for your visualization objects.
You can then get information about the selected item like this:
function tableHandler () {
// get the data used by the Table
var dt = table.getDataTable();
// get the selection from the chart
var selection = table.getChart().getSelection();
// iterate over the selection (as selection is an array, and can
contain multiple selections if the user selected multiple rows, or 0 if the
user deselected all rows)
for (var i = 0; i < selection.length; i++) {
// get the item in column 0 of the DataTable in the selected row
dt.getValue(selection[i].row, 0);
}
}
The BubbleChart's select handler would work much the same way, though it
will likely contain 0 or 1 elements in the select array, unless you set the
"selectionMode" option to "multiple".
On Monday, June 23, 2014 5:50:44 PM UTC-4, [email protected] wrote:
>
> Can anyone please show me how to read the selected item in column zero of
> a table or ditto from a bubble chart? I've so many ways as described in the
> documentation and none of them seem to work for me. I'm sure its a foolish
> error but I would appreciate some help on this one. Here's my code so far -
> I've managed to create to listeners which work fine (even though I've put
> them after the draw - they don't work if I put them before - could be a
> clue) but I've tried various ways of using getSelection and basically I'm
> just stuck. Should say I'm using the ChartWrapper/Dashboard approach. Bryan.
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
> http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head>
> <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
> <title>
> Google Visualization API Sample
> </title>
> <script type="text/javascript" src="//www.google.com/jsapi"></script>
> <script type="text/javascript">
> google.load('visualization', '1.1', {packages: ['controls']});
> </script>
> <script type="text/javascript">
> var data;
> var table;
> var bubble;
> function drawVisualization() {
> // Prepare the data
> var data = google.visualization.arrayToDataTable([
> ['MODEL','Wave Height (ft)','Wave Period (s)','Wave
> Quality','SHAPER'],
> ['BLANK #3CRUISER',3,7,'Mush','Blanksy'],
> ['LITTLE BUDDY',4,9,'Fun','Matt'],
> ['MODTRO',4,7,'Mush','Matt'],
> ['UFSO',5,7,'Mush','Scott'],
> ['BLANK #2FISH',5,8,'Fun','Blanksy'],
> ['The Egg',5,10,'Fun','Clayton'],
> ['LCD',5,10,'Fun','Clayton'],
> ['DONUTS',6,8,'Heavy','Matt'],
> ['FAT BOY',6,7,'Heavy','Matt'],
> ['ROUND FISH',6,8,'Heavy','Matt'],
> ['Gypsy',6,11,'Classic','Clayton'],
> ['Mongrel',7,11,'Classic','Clayton'],
> ['DIABLO',7,11,'Classic','Matt'],
> ['Trickster',7,11,'Classic','Clayton'],
> ['SUPER STUMP',7,10,'Classic','Scott'],
> ['ROCKET FISH',7,12,'Classic','Jeff'],
> ['Red Ranga',7,12,'Classic','Clayton'],
> ['G JETZON',8,10,'Classic','Scott'],
> ['Jester',8,11,'Classic','Clayton'],
> ['VIPER',8,12,'Classic','Matt'],
> ['The Rox',8,10,'Classic','Clayton'],
> ['Makoi',8,10,'Classic','Clayton'],
> ['STUMPY',8,10,'Classic','Matt'],
> ['Ned Kelly',8,11,'Classic','Clayton'],
> ['BLANK #1SQUASH',8,11,'Classic','Blanksy'],
> ['Titan',9,8,'Heavy','Clayton'],
> ['Clay10 Pro',9,11,'Classic','Clayton'],
> ['EDGC',9,12,'Classic','Scott'],
> ['STUMP',9,11,'Classic','Scott'],
> ['Swivel',9,14,'Classic','Clayton'],
> ['TRXTR',9,12,'Classic','Jeff'],
> ['WASABI',9,11,'Classic','Matt'],
> ['Dredger',9,12,'Classic','Clayton'],
> ['MAGIC',9,13,'Classic','Matt'],
> ['Supernova',9,12,'Classic','Clayton'],
> ['Genghis',10,14,'Best','Clayton'],
> ['Super B',10,14,'Best','Clayton'],
> ['The Project',10,12,'Best','Clayton'],
> ['Spitfire',10,12,'Best','Clayton'],
> ['FLYER',10,12,'Best','Matt'],
> ['GTO',10,14,'Best','Matt'],
> ['XX BOARD',11,14,'Best','Jeff'],
> ['NOW BOARD',11,16,'Best','Jeff'],
> ['J BOARD',11,16,'Best','Jeff'],
> ['INDO',11,11,'Best','Scott'],
> ['C-Indo',12,13,'Best','Clayton']
> ]);
>
> // Define a slider control for the Wave Height column.
> var slider = new google.visualization.ControlWrapper({
> 'controlType': 'NumberRangeFilter',
> 'containerId': 'control1',
> 'options': {
> 'filterColumnLabel': 'Wave Height (ft)',
> 'ui': {'labelStacking': 'vertical'}
> }
> });
>
>
>
>
>
>
>
> // Define a category picker control for the Shaper column
> var categoryPicker = new google.visualization.ControlWrapper({
> 'controlType': 'CategoryFilter',
> 'containerId': 'control2',
> 'options': {
> 'filterColumnLabel': 'SHAPER',
> 'ui': {
> 'labelStacking': 'vertical',
> 'allowTyping': false,
> 'allowMultiple': false
> }
> }
> });
>
> // Define a category picker control for the Wave Quality column
> var wcategoryPicker = new google.visualization.ControlWrapper({
> 'controlType': 'CategoryFilter',
> 'containerId': 'control4',
> 'options': {
> 'filterColumnLabel': 'Wave Quality',
> 'ui': {
> 'labelStacking': 'vertical',
> 'allowTyping': false,
> 'allowMultiple': false
> }
> }
> });
>
>
> // Define a Bubble chart
> var bubble = new google.visualization.ChartWrapper({
> 'chartType': 'BubbleChart',
> 'containerId': 'chart1',
> 'options': {
> 'width': 1000,
> 'height': 800,
> 'legend': 'none',
> 'title': 'Choose the Wave Height & Wave Quality and see the
> boards that work best',
> 'hAxis': {'title': 'Wave Size (ft)'},
> 'sizeAxis':{'maxSize':[14]},
> 'vAxis': {'title': 'Wave Period (sec)'}
>
> },
> // Instruct the bubblechart
> // from the 'data' DataTable.
> 'view': {'columns': [0,1,2,3]}
> });
>
> // Define a table
> var table = new google.visualization.ChartWrapper({
> 'chartType': 'Table',
> 'containerId': 'chart2',
> 'options': {
> 'width': '350px'
> }
> });
>
> // Create a dashboard
> new
> google.visualization.Dashboard(document.getElementById('dashboard')).
> // Establish bindings, declaring the both the slider and the
> category
> // picker will drive both charts.
> bind([slider, categoryPicker, wcategoryPicker], [bubble,
> table]).
> // Draw the entire dashboard.
>
> draw(data);
> google.visualization.events.addListener(table, 'select',
> tableHandler);
> google.visualization.events.addListener(bubble, 'select',
> bubbleHandler);
>
>
>
>
> }
>
> //this is the bit i'm stuck on
>
> function bubbleHandler() {
> alert('You selected a bubble ');
> }
>
> function tableHandler() {
> alert('Table Selected');
>
> }
>
> google.setOnLoadCallback(drawVisualization);
> </script>
> </head>
> <body style="font-family: Arial;border: 0 none;">
> <div id="dashboard">
> <table>
> <tr style='vertical-align: top'>
> <td style='width: 350px; font-size: 0.9em;'>
> <div id="control1"></div>
>
> <div id="control2"></div>
> <div id="control4"></div>
> <div style="float: left;" id="chart2"></div>
> </td>
> <td style='width: 1000px'>
> <div style="float: left;" id="chart1"></div>
> </td>
> </tr>
> <tr>
> <td>
> <div style="float: left;" id="chart3"></div>
> </td>
> </tr>
> </table>
> </div>
> </body>
> </html>
>
>
>
>
--
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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
