jquery - ボタンのonclickイベントからfancyboxを起動してGoogleチャートを描画するには?

Question

ポップアップ ファンシー ボックスに Google チャートを描画できますか?

表にデータが表示されており、各レコードの Google チャートを表示するためのボタンが各行にあります。

現在、チャートは常に表の後に下に表示されますが、レコードが画面上をスクロールしている場合、ユーザーは下にスクロールしてチャート ビューを取得する必要があります。ファンシーボックスを使用するか、この不便を解決する方法はありますか?

アドバイスありがとうございます！

html:

<table>
   <tr>
      <td> data </td>
      ...
      <td>
        <button onclick="showChartByEmpId()"> pie chart </button>
      </td>
   </tr>

</table>

<div class="secondary"> </div>  <!-- showing chart here -->

js:

function drawPieChart(dataArr, elementId) {
    //dataArr : the data to display
    //elementId : <div> 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 <div> to displaying chart in it    
            $('.secondary').html('<div id="chart_div" height="450" width="450"></div>');
            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&empId1=" + escape(empId1) + "&empId2=" + escape(empId2);


    xhr.open('POST', url, true);
    xhr.onreadystatechange = showChart;
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(requestData);
}