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.
