![\"GoogleVisualization.jpg\"](\"http:\/\/bobbeaty.com\/wp\/wp-content\/uploads\/2009\/03\/googlevisualization.jpg\")
<\/p>\n<\/p>\n
I've been working within the limitations of the AnnotatedTimeLine<\/a> graph from the Google Visualization API<\/a> set and have just been telling my users that the unfortunate \"flash\" to white of the graph while it's updating data is an unfortunate reality of the AnnotatedTimeLine<\/a>, and that Google knows this is in issue and they are working on it.<\/p>\n Then I read an interesting post to the mailing list about how Google Finance didn't have this issue, and it got me thinking... How could they get around the flash?<\/em> And in the show this morning, it hit me: Double-Buffering.<\/p>\n Simply have two<\/strong> graphs - one aligned in the z-axis behind the other. In fact, make them have the same coordinates, but just vary the zIndex<\/tt> value to \"flip\" them one in front of the other. Then, always draw to the rear (invisible) graph and when it's done, flip it to the front by setting sIndex<\/tt> to 49 on it, and setting zIndex<\/tt> to 0 on the one that was in front.<\/p>\n A simple use of an array of two graphs accomplishes this quite easily. I add in two variables - the index values for \"foreground\" and \"background\", and then you always draw to chart[bg]<\/tt> and so on. It's very clean and slick. The change of the z-axis values is done in the blink of an eye, it's very hard to see. Compared to the 3 to 6 seconds that the redraw used to take, it's nothing short of amazing<\/strong>.<\/p>\n In a very simplistic form:<\/p>\n and then in my initialization code, called from the Goolge setOnLoadCallback()<\/tt> method, I have:<\/p>\n and then when I need to draw to the correct graph, I simply call:<\/p>\n When the graph is done drawing, I'll get a call to:<\/p>\n There's a lot of the details I've left out because they don't really matter. The point is that you have to place them on top of each other, and then do this double-buffering. It's pretty nice.<\/p>\n","protected":false},"excerpt":{"rendered":" I’ve been working within the limitations of the AnnotatedTimeLine graph from the Google Visualization API set and have just been telling my users that the unfortunate “flash” to white of the graph while it’s updating data is an unfortunate reality of the AnnotatedTimeLine, and that Google knows this is in issue and they are working […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,6,5],"tags":[],"class_list":["post-2220","post","type-post","status-publish","format-standard","hentry","category-coding","category-cube-life","category-vendors"],"_links":{"self":[{"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts\/2220","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=2220"}],"version-history":[{"count":1,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts\/2220\/revisions"}],"predecessor-version":[{"id":2221,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts\/2220\/revisions\/2221"}],"wp:attachment":[{"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/media?parent=2220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/categories?post=2220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/tags?post=2220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} var<\/span> chart =<\/span> [<\/span>]<\/span>;<\/span>\n var<\/span> fg =<\/span> 0<\/span>;<\/span>\n var<\/span> bg =<\/span> 1<\/span>;<\/span><\/pre>\n chart[<\/span>0<\/span>]<\/span> =<\/span> new<\/span> google.visualization<\/span>.AnnotatedTimeLine<\/span>(<\/span>chartDiv[<\/span>0<\/span>]<\/span>)<\/span>;<\/span>\n chart[<\/span>1<\/span>]<\/span> =<\/span> new<\/span> google.visualization<\/span>.AnnotatedTimeLine<\/span>(<\/span>chartDiv[<\/span>1<\/span>]<\/span>)<\/span>;<\/span>\n \/\/ tie us into the events for these guys<\/span>\n google.visualization<\/span>.events<\/span>.addListener<\/span>(<\/span>chart[<\/span>0<\/span>]<\/span>,<\/span> 'ready'<\/span>,<\/span> graphReady)<\/span>;<\/span>\n google.visualization<\/span>.events<\/span>.addListener<\/span>(<\/span>chart[<\/span>1<\/span>]<\/span>,<\/span> 'ready'<\/span>,<\/span> graphReady)<\/span>;<\/span><\/pre>\n chart[<\/span>bg]<\/span>.draw<\/span>(<\/span>graphData,<\/span> chartParams)<\/span>;<\/span><\/pre>\n function<\/span> graphReady(<\/span>)<\/span> {<\/span>\n \/\/swap the graphs quickly<\/span>\n chartDiv[<\/span>fg]<\/span>.style<\/span>.zIndex<\/span> =<\/span> '0'<\/span>;<\/span>\n chartDiv[<\/span>bg]<\/span>.style<\/span>.zIndex<\/span> =<\/span> '49'<\/span>;<\/span>\n \/\/ now swap what we mean by back and front<\/span>\n if<\/span> (<\/span>fg ==<\/span> 0<\/span>)<\/span> {<\/span>\n fg =<\/span> 1<\/span>;<\/span>\n bg =<\/span> 0<\/span>;<\/span>\n }<\/span> else<\/span> {<\/span>\n fg =<\/span> 0<\/span>;<\/span>\n bg =<\/span> 1<\/span>;<\/span>\n }<\/span>\n }<\/span><\/pre>\n