The main problem you are having is that the index you need to pass to the #hideDataColumns method is the index of the *data series* not the index of the column in the DataTable; so the first series is 0, not 1. I did up your code in jsfiddle and made a few tweaks to make it work (namely, I changed the columns being fetched from the fusion table, as the ones you listed don't currently exist there): http://jsfiddle.net/fRfJQ/.
On Saturday, April 7, 2012 5:08:41 AM UTC-4, Jacob Hansen wrote: > > Hi All > > This is related to annotatedtimeline and method hideDataColumns(* > columnIndexes). * > https://developers.google.com/chart/interactive/docs/gallery/annotatedtimeline > > The issue is that I am not able to hide one of my dataserires from my > chart when I call hideDataColumns() from my clickHandlerFunction. There are > similar posts on this topic in here which I have walked through, but the > problem still persists for me, and I was lacking a good example with the > code. > > You can see my complete code below, where you can also see that chart is > defined globally. > > I hope that you are able to advice me on this issue. > > Br. > Jacob > > > > <html> > <head> > <style type="text/css"> > @import url("style.css"); > </style> > > <link > href="/apis/fusiontables/docs/samples/style/default.css"rel="stylesheet" > type="text/css"> > <script type='text/javascript' src='http://www.google.com/jsapi > '></script> > <script type='text/javascript'> > google.load('visualization', '1', > {'packages':['annotatedtimeline']}); > google.setOnLoadCallback(drawChart); > > var chart; > > function drawChart() { > var query = "SELECT 'YMD', " + "'Oil_Price_USD_bbl', > 'Oil_Price_grGold_bbl'" + 'FROM 3405615'; > var queryText = encodeURIComponent(query); > var gvizQuery = new google.visualization.Query(' > http://www.google.com/fusiontables/gvizdata?tq=' + queryText); > gvizQuery.send(function(response) { > chart = new > google.visualization.AnnotatedTimeLine(document.getElementById('chart_div')); > chart.draw(response.getDataTable(),{ > 'displayAnnotations': false, > 'colors': ['black', 'blue'], > 'allowRedraw': true, > }); > }); > } > > function handleButtonClick_USD() { > if (document.getElementById('Oil_USD').checked) {alert("USD ticked");} > else{ > chart.hideDataColumns(1); > alert("USD unticked"); > } > } > > function handleButtonClick_GLD() { > if (document.getElementById('Oil_GLD').checked) {alert("GLD ticked");} > else{ > chart.hideDataColumns(2); > alert("GLD unticked"); > } > } > > > </script> > </head> > <body> > > <div id='chart_div'> > </div> > <form name = "selectform"> > Oil_USD: <input id='Oil_USD' type = "checkbox" name = "Oil_USD" > checked="" onclick="handleButtonClick_USD()";/> > Oil_GLD: <input id='Oil_GLD' type = "checkbox" name = "Oil_GLD" checked="" > onclick="handleButtonClick_GLD()" /> > <br> > </form> > </body> > </html> > -- 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/-/7XkDxyLHNgwJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
