Annotaded TimeLine - hideDataColumns()

162 views
Skip to first unread message

Jacob Hansen

unread,
Apr 7, 2012, 5:08:41 AM4/7/12
to google-visua...@googlegroups.com
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>

asgallant

unread,
Apr 9, 2012, 10:47:03 AM4/9/12
to google-visua...@googlegroups.com
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/.

Jacob Hansen

unread,
Apr 14, 2012, 3:52:31 PM4/14/12
to google-visua...@googlegroups.com
Hi Drew

Thank you very much. This solved my problem. It looks like that the main issue is that when I run it locally the code behaves different from when it is http://jsfiddle.net

Thanks!!!

/Jacob

Jacob Hansen
68 Cheshire Street, Flat 2
E2 6EH
London, United Kingdom
Tel. (+44) 0777 073 6138 

E-mail: ejacob...@gmail.com
Let's connect! http://uk.linkedin.com/in/ejacobhansen 





--
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 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.

Reply all
Reply to author
Forward
0 new messages