{"id":1843,"date":"2009-03-31T08:59:04","date_gmt":"2009-03-31T13:59:04","guid":{"rendered":"http:\/\/bobbeaty.com\/wp\/?p=1843"},"modified":"2009-03-31T10:42:08","modified_gmt":"2009-03-31T15:42:08","slug":"interesting-gotchas-with-google-visualization-annotatedtimeline","status":"publish","type":"post","link":"https:\/\/bobbeaty.com\/wp\/archives\/1843","title":{"rendered":"Interesting Gotchas with Google Visualization AnnotatedTimeLine"},"content":{"rendered":"

\"GoogleVisualization.jpg\"<\/p>\n

I have been messing with the Google Visualization's<\/a> AnnotatedTimeLine<\/a> widget on my webapp, and while it's wonderful<\/em> in so many ways, there are a few 'gotchas' that I've run into - and I'm not alone on one of these.<\/p>\n

Specifying Column Index in Hiding\/Showing Columns<\/h3>\n

The AnnotatedTimeLine<\/a> has some really nice methods that allow you to show\/hide the lines on the graph (columns in the DataTable<\/a>):<\/p>\n

    chart.hideDataColumns<\/span>(<\/span>2<\/span>)<\/span>;<\/span>\n    chart.showDataColumns<\/span>(<\/span>2<\/span>)<\/span>;<\/span><\/pre>\n
the problem is that the columnIndex<\/tt> that you'd think<\/em> you needed to pass in would probably be wrong<\/strong>. They are looking for the dataset index<\/em><\/strong> and for that, you have to remember that the date data in column 0 of the table is really not<\/strong> considered in this calculation.<\/p>\n
So, if you have the name of the column and want to make it disappear, you need to have a function like:<\/p>\n
    function<\/span> toggleView(<\/span>name,<\/span> state)<\/span> {<\/span>\n      var<\/span> i;<\/span>\n      var<\/span> colCnt =<\/span> graphData.getNumberOfColumns<\/span>(<\/span>)<\/span>;<\/span>\n      for<\/span> (<\/span>i =<\/span> 1<\/span>;<\/span> i <<\/span> colCnt;<\/span> i++<\/span>)<\/span> {<\/span>\n        if<\/span> (<\/span>graphData.getColumnLabel<\/span>(<\/span>i)<\/span> ==<\/span> name)<\/span> {<\/span>\n          \/\/ the dataset number is one less than the column number<\/span>\n          if<\/span> (<\/span>state)<\/span> {<\/span>\n            chart.showDataColumns<\/span>(<\/span>i-<\/span>1<\/span>)<\/span>;<\/span>\n          }<\/span> else<\/span> {<\/span>\n            chart.hideDataColumns<\/span>(<\/span>i-<\/span>1<\/span>)<\/span>;<\/span>\n          }<\/span>\n        }<\/span>\n      }<\/span>\n    }<\/span><\/pre>\n
If you remember to have the right offset, it all works fine.<\/p>\n
Showing a Hidden Line Bug<\/h3>\n
I found a reference to this on the Google Visualization<\/a> mailing list. It turns out that if you try to show a hidden line, it doesn't work. But if you cycle it twice<\/em> then it works. Meaning this doesn't<\/strong> work:<\/p>\n
    \/\/ hide the line on the graph<\/span>\n    chart.hideDataColumns<\/span>(<\/span>2<\/span>)<\/span>;<\/span>\n    \/\/ show the line we just hid<\/span>\n    chart.showDataColumns<\/span>(<\/span>2<\/span>)<\/span>;<\/span><\/pre>\n
but this does<\/em><\/strong>:<\/p>\n
    \/\/ hide the line on the graph<\/span>\n    chart.hideDataColumns<\/span>(<\/span>2<\/span>)<\/span>;<\/span>\n    \/\/ show the line we just hid<\/span>\n    chart.showDataColumns<\/span>(<\/span>2<\/span>)<\/span>;<\/span>\n    chart.hideDataColumns<\/span>(<\/span>2<\/span>)<\/span>;<\/span>\n    chart.showDataColumns<\/span>(<\/span>2<\/span>)<\/span>;<\/span><\/pre>\n
It's the \"second cycle\" on the 'show' side of things that makes the difference. This is an acknowledged bug by Google, and the good news is that as soon as they fix it, we're going to get the fix. Nice.<\/p>\n
UPDATE:<\/strong> With the 3\/30\/2009 Release Candidate from Google, this is fixed!<\/em><\/strong> Yup, just use the version \"1.1\" in the google.load()<\/tt> javascript call and you'll set it. It's set to go to production on 4\/6, and at that point, version \"1\" will again get it. Excellent update!<\/p>\n
So... just keep these in mind if you're using this widget.<\/p>\n","protected":false},"excerpt":{"rendered":"
I have been messing with the Google Visualization’s AnnotatedTimeLine widget on my webapp, and while it’s wonderful in so many ways, there are a few ‘gotchas’ that I’ve run into – and I’m not alone on one of these. Specifying Column Index in Hiding\/Showing Columns The AnnotatedTimeLine has some really nice methods that allow you […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-1843","post","type-post","status-publish","format-standard","hentry","category-coding","category-open-source-software"],"_links":{"self":[{"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts\/1843","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/comments?post=1843"}],"version-history":[{"count":3,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts\/1843\/revisions"}],"predecessor-version":[{"id":1846,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts\/1843\/revisions\/1846"}],"wp:attachment":[{"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/media?parent=1843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/categories?post=1843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/tags?post=1843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}