{"id":2956,"date":"2009-12-10T15:47:56","date_gmt":"2009-12-10T21:47:56","guid":{"rendered":"http:\/\/bobbeaty.com\/wp\/?p=2956"},"modified":"2009-12-14T09:09:08","modified_gmt":"2009-12-14T15:09:08","slug":"optimizing-google-annotatedtimeline-updating","status":"publish","type":"post","link":"https:\/\/bobbeaty.com\/wp\/archives\/2956","title":{"rendered":"Optimizing Google AnnotatedTimeLine Updating"},"content":{"rendered":"

When I added a bunch of additional values to my web app, I noticed that the updating of the Google AnnotatedTimeLine<\/a> was taking a lot<\/strong> longer than before. I mean it was pausing for a good 3 sec. before updating the view. I looked at the CPU usage, and it was all in the Flex component. It was bad. Very bad. So I knew I had to do something about it.<\/p>\n

In the original version of the page, I had code that was run when the data was received and the graph redrawn. This was a standard hook for the AnnotatedTimeLine:<\/p>\n

  \/**\n   * This function is called when the ATL is done updating the graph\n   * from the data and the "draw()" method.\n   *\/<\/span>\n  function<\/span> graphReady(<\/span>)<\/span> {<\/span>\n    \/\/ hide all the unchecked data sets<\/span>\n    for<\/span> (<\/span>var<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> portfolioChecks.length<\/span>;<\/span> ++<\/span>i)<\/span> {<\/span>\n      if<\/span> (<\/span>!<\/span>portfolioChecks[<\/span>i]<\/span>.checked<\/span>)<\/span> {<\/span>\n        updateBackgroundVisibility(<\/span>portfolioNames[<\/span>i]<\/span>,<\/span> false<\/span>)<\/span>;<\/span>\n      }<\/span>\n    }<\/span>\n    \/\/ ...finish up with more processing<\/span>\n  }<\/span>\n \n  \/**\n   * This is called to update the visibility of the named portfolio\n   * to the provided state in the background graph.\n   *\/<\/span>\n  function<\/span> updateBackgroundVisibility(<\/span>name,<\/span> state)<\/span> {<\/span>\n    var<\/span> colCnt =<\/span> graphData.getNumberOfColumns<\/span>(<\/span>)<\/span>;<\/span>\n    \/\/ I have to find the column name in the table<\/span>\n    for<\/span> (<\/span>var<\/span> i =<\/span> 1<\/span>;<\/span> i <<\/span> colCnt;<\/span> ++<\/span>i)<\/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[<\/span>bg]<\/span>.showDataColumns<\/span>(<\/span>i-<\/span>1<\/span>)<\/span>;<\/span>\n        }<\/span> else<\/span> {<\/span>\n          chart[<\/span>bg]<\/span>.hideDataColumns<\/span>(<\/span>i-<\/span>1<\/span>)<\/span>;<\/span>\n        }<\/span>\n      }<\/span>\n    }<\/span>\n  }<\/span><\/pre>\n
When I originally built the code, I wanted to have something that allowed me to change the visibility of the data sets in the graph(s) either way, and that's really nice. But what I didn't expect was the performance penalty I would pay for such a design.<\/p>\n
  \/**\n   * This function is called when the ATL is done updating the graph\n   * from the data and the "draw()" method.\n   *\/<\/span>\n  function<\/span> graphReady(<\/span>)<\/span> {<\/span>\n    \/\/ hide all the unchecked data sets<\/span>\n    var<\/span> cols =<\/span> [<\/span>]<\/span>;<\/span>\n    for<\/span> (<\/span>var<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> portfolioChecks.length<\/span>;<\/span> ++<\/span>i)<\/span> {<\/span>\n      if<\/span> (<\/span>!<\/span>portfolioChecks[<\/span>i]<\/span>.checked<\/span>)<\/span> {<\/span>\n        cols.push<\/span>(<\/span>i-<\/span>i)<\/span>;<\/span>\n      }<\/span>\n    }<\/span>\n    chart[<\/span>bg]<\/span>.hideDataColumns<\/span>(<\/span>cols)<\/span>;<\/span>\n    \/\/ ...finish up with more processing<\/span>\n  }<\/span><\/pre>\n
Without the call to  updateBackgroundVisibility()<\/tt>, I knew it'd be a little faster - no need to look up all the column headers, etc. But I didn't expect to see what I saw.<\/p>\n
The resulting code took the refresh time from 2-3 sec. to under the blink of an eye. Really. It was a slight flicker<\/em>, but that's about it. Amazing. In retrospect, it makes sense... I was individually hiding about 30 columns each update. That's a lot. To do it right, there had to be some type of lock, update, refresh\/redraw, and then unlock. All that added up. Big time.<\/p>\n
It's taught me a big lesson about the efficiency of Google's code: if in doubt, look for a better way, there's probably one there, or you can always ask the visualization team. I know I've learned my lesson.<\/p>\n","protected":false},"excerpt":{"rendered":"
When I added a bunch of additional values to my web app, I noticed that the updating of the Google AnnotatedTimeLine was taking a lot longer than before. I mean it was pausing for a good 3 sec. before updating the view. I looked at the CPU usage, and it was all in the Flex […]<\/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],"tags":[],"class_list":["post-2956","post","type-post","status-publish","format-standard","hentry","category-coding","category-cube-life"],"_links":{"self":[{"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts\/2956","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=2956"}],"version-history":[{"count":1,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts\/2956\/revisions"}],"predecessor-version":[{"id":2957,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts\/2956\/revisions\/2957"}],"wp:attachment":[{"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/media?parent=2956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/categories?post=2956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/tags?post=2956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
As it turns out, there's a form of the hideDataColumns()<\/tt> method<\/a> on the ATL that allows the user to send an array of dataset indexes. I didn't know what to expect, but I thought it had<\/strong> to be better than this, so I recoded this as:<\/p>\n