new containerTable is created every time Google Chart is redrawn

Question

I have a submit button that submits the date/time period for Annotation Chart in Google Charts.

When I click the button, it redraws the chart with new query result.

It redraws the chart, but every time it does that, it also generates a trailing, empty container as in the screenshot below.

https://www.dropbox.com/s/7fyiy6pxlxkmeik/Screen%20Shot%202014-05-01%20at%2011.58.59%20AM.png

If you see the screenshot, you can see there is two chart_div2_AnnotationChart_containerTable.

I can't simply ignore this new containerTable or delete it, because it contains the buttons and annotations for the refreshed chart.

How can I fix this?

When I redraw the chart, I am calling the function below with new query result.

  function drawChart(myData, id) {
    var data = new google.visualization.DataTable();

    var params = myData[0];
    for(var i = 0; i < params.length; i++) {
      data.addColumn(params[i][0], params[i][1]); //type and name pair
    }

    var q_result = myData[1];
    var rows = new Array(q_result.length);

    for(var i = 0; i < q_result.length; i++) {
      tmp_array = [];
      for(var j = 0; j < q_result[0].length; j++) {
        var tobeadded = params[j][0]=='date'?
        new Date(q_result[i][j]) : q_result[i][j];
        tmp_array.push(tobeadded);
      }
      rows[i] = tmp_array;
    }

    data.addRows(rows);

    var chart = new google.visualization.AnnotationChart(
    document.getElementById('chart_div'+id));

    var options = {
      displayAnnotations: true,
    };

    chart.draw(data, options);
  }

---

When the chart is redrawn, drawChart() is called in the function below.

  function g(idx, start, end) {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", '/${conf["name"]}/submit_data?idx=' + idx + '&start=' + start + '&end=' + end, true);
    xmlhttp.onreadystatechange = function(i) {
      return function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          drawChart(JSON.parse(xmlhttp.responseText), i);
        }
      };
    }(idx);
    xmlhttp.send();
  }

When the chart is initially drawn, it is called from the function below.

  function getData() {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xhrs = [];
    if(window.XMLHttpRequest) {
      for (var i = 0; i < ${size}; ++i) {
        xhrs.push(new XMLHttpRequest());
      }
    }

    else { // code for IE6, IE5
      for (var i = 0; i < ${size}; ++i) {
        xhrs.push(new ActiveXObject("Microsoft.XMLHTTP"));
      }
    }

    for (var i = 0; i < ${size}; ++i) {
      xhrs[i].open("GET", '/${conf["name"]}/submit_data?idx=' + i, true);
      xhrs[i].onreadystatechange = function(idx) {
        return function() {
          if(xhrs[idx].readyState == 4 && xhrs[idx].status == 200) {
            drawChart(JSON.parse(xhrs[idx].responseText), idx);
          }
        };
      }(i);
      xhrs[i].send();
    }
  }

Answer 1

Here's some example code that reuses chart objects instead of recreating them:

function drawCharts () {
    var data = [], charts = [], xhrs = [], options = {
        displayAnnotations: true
    };

    for (var i = 0; i < ${size}; ++i) {
        if(window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xhrs.push(new XMLHttpRequest());
        }
        else {
            // code for IE6, IE5
            // you probably want to throw an error here, since the visualization API does not support IE 5, 6 anyway
            xhrs.push(new ActiveXObject("Microsoft.XMLHTTP"));
        }
        charts.push(new google.visualization.AnnotationChart(document.getElementById('chart_div'+id));
        xhrs[i].open("GET", '/${conf["name"]}/submit_data?idx=' + i, true);
        xhrs[i].onreadystatechange = function(idx) {
            return function() {
                if(xhrs[idx].readyState == 4 && xhrs[idx].status == 200) {
                    var myData = JSON.parse(xhrs[idx].responseText);
                    data[idx] = new google.visualization.DataTable();

                    var params = myData[0];
                    for(var i = 0; i < params.length; i++) {
                        data[idx].addColumn(params[i][0], params[i][1]); //type and name pair
                    }

                    var q_result = myData[1];
                    var rows = new Array(q_result.length);

                    for(var i = 0; i < q_result.length; i++) {
                        tmp_array = [];
                        for(var j = 0; j < q_result[0].length; j++) {
                            var tobeadded = params[j][0]=='date' ? new Date(q_result[i][j]) : q_result[i][j];
                            tmp_array.push(tobeadded);
                        }
                        rows[i] = tmp_array;
                    }

                    data[idx].addRows(rows);
                    charts[idx].draw(data[idx], options);
                }
            };
        }(i);
        xhrs[i].send();
    }
}