title: How to launch fancybox from button onclick event to draw google chart?
body: <p>Can we draw a google chart in a pop up fancybox?</p>
  
  <p>I have data shown in a table, and there is a button in each row for showing google chart of each record.</p>
  
  <p>Currently, my chart is always shown in the bottom after the table, but when the record is scroll over the screen, user need scroll to bottom to get the chart view. 
  Is it possible to use fancybox or some way solving this inconvenient?</p>
  
  <p>Thanks for any advise!</p>
  
  <p>html:</p>
  
  <pre><code>&lt;table&gt;
     &lt;tr&gt;
        &lt;td&gt; data &lt;/td&gt;
        ...
        &lt;td&gt;
          &lt;button onclick="showChartByEmpId()"&gt; pie chart &lt;/button&gt;
        &lt;/td&gt;
     &lt;/tr&gt;
  
  &lt;/table&gt;
  
  &lt;div class="secondary"&gt; &lt;/div&gt;  &lt;!-- showing chart here --&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>function drawPieChart(dataArr, elementId) {
      //dataArr : the data to display
      //elementId : &lt;div&gt; element where to display chart
  
      var data = google.visualization.arrayToDataTable(dataArr);
      var chart = new google.visualization.PieChart(document.getElementById(elementId));
  
      chart.draw(data, options);
  }
  
  function showChart(){
      //alert("readyState=" + xhr2.readyState);
  
      if(xhr2.readyState == 4) {
          if(xhr2.status == 200){
              var allEmp = xhr2.responseText;
              var empList = JSON.parse(allEmp);
  
                      ... prepare pieChartDate[] to draw chart ...
  
                      //create &lt;div&gt; to displaying chart in it    
              $('.secondary').html('&lt;div id="chart_div" height="450" width="450"&gt;&lt;/div&gt;');
              drawPieChart(pieChartData[0], "chart_div");
        ...
  
  }
  
  
  function showChartByEmpId(){
  
      var url = '/CMP/employee/emp.do';
  
      //create XMLHttpRequest
      xhr = createXHR();
  
      if( xhr == null ){
          alert("no xhr creted");
          return;
      }          
  
      var requestData = "action=getOneEmpJSON&amp;empId1=" + escape(empId1) + "&amp;empId2=" + escape(empId2);
  
  
      xhr.open('POST', url, true);
      xhr.onreadystatechange = showChart;
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send(requestData);
  }
  </code></pre>