google chart wordtree data load via ajax chart.draw compress on subsequence call

[robert ngo]

this is my js

<select id='selectdb' size=8 onclick="db_selected();" >

<option value='TSCORPE'>TSCORPE</option>

<option value='TSCORPG'>TSCORPG</option>

<option value='TSCORPW'>TSCORPW</option>

function db_selected(){
 var sname = $("#selectdb option:selected").html();
 var thiscall =cmdbservices +'110&par='+sname;
 var jsonData = $.ajax({
  url: thiscall,
  data: {tag:'db_user_by_instance'},
  dataType: "json",
  async: false
 }).responseText;
 //alert(jsonData);
 
 google.charts.load('current', {packages:['wordtree']});
 google.charts.setOnLoadCallback(drawChart2);

 $("#chart_div").show();
 
 function drawChart2() {
  var res = jsonData.split(',');
  var data = new google.visualization.DataTable();
  data.addColumn('string','[Phrase]');
  res.forEach(function(phrase) {
   data.addRow([phrase]);
  });
  
  var options = {
   wordtree: {
    format: 'implicit',
    word: sname  
   }

  };
  
  var chart = new google.visualization.WordTree(document.getElementById('chart_div'));
  chart.draw(data, options);
      }

}

Note, ajax data returned ok and assembled into datatable format also ok. no change to the html template nor css.

here's the problem. on first load or after page complete refresh. I got the display ok as shown top image below.

but if I select any option again, I got the middle image. the display of the tree is compress and left-shifted.

even though the display is compress, I can still refocus/drill-down just that the display is off-set left out of the page as shown in the last image.

please help. thanks, Robert