ボタンのクリックに基づいてGoogleのグラフをリロードするには？

Question

これは、グラフを表示し、投票数を表示するために使用される私のコードです。それは完璧に働いていた。

このコードでは、[更新]ボタンをクリックすると、ページを更新せずに票が更新されます。これどうやってするの？

<div id="barchart" style="width: 100%; height: 200px;margin-top:0px;"></div> 

<button>Refresh</button> 

<?php 
$q_id = $row['q_id']; 
include "connection.php"; 
$sql1 = mysql_query("SELECT * FROM votes where q_id='$q_id'"); 
$count1 = mysql_num_rows($sql1); 

$sql2 = mysql_query("SELECT * FROM votes where q_id='$q_id' and answer='Yes'"); 
$count2 = mysql_num_rows($sql2); 

$sql3 = mysql_query("SELECT * FROM votes where q_id='$q_id' and answer='No'"); 
$count3 = mysql_num_rows($sql3); 
?> 

<script type="text/javascript"> 
google.load("visualization", "1", {packages:["corechart"]});google.setOnLoadCallback(drawChart); 
google.setOnLoadCallback(render_applicant_sources); 

function drawChart() { 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('string', 'Task'); 
    dataTable.addColumn('number', 'Hours per Day'); 
    // A column for custom tooltip content 
    dataTable.addColumn({type: 'string', role: 'tooltip'}); 
    dataTable.addRows([ 
     ['<?php echo "Yes"; echo " "; echo ' ('.$count2.' '.$vname1.')'; ?>', <?php echo $count2; ?> ,'<?php echo "Yes"; ?>'], 
     ['<?php echo "No"; echo " "; echo ' ('.$count3.' '.$vname2.')'; ?>',  <?php echo $count3; ?>,'<?php echo "No"; ?>'] 
    ]); 

var chart = new google.visualization.PieChart(document.getElementById('barchart')); 

var options = { 
    backgroundColor: 'transparent', 
    pieSliceText:'none', 
    chartArea: {top: 10}, 
    titleTextStyle: {bold: false}, 
    enableInteractivity: false, 
    legend: {position: 'labeled',textStyle: {color: '#000',fontSize:13}}, 
    height:250, 
    fontName:"'Source Sans Pro', sans-serif", 
    tooltip: { 
     text: 'value' 
    } 
}; 
chart.draw(dataTable, options); 

}これを達成する

Answer 1

最も一般的な方法：

• 代わりサービス、専用のURLを、持っている、あなたのデータベースからデータをロードするために、インラインPHPを使用してどの（同じPHPを使用）は、このデータを（できれば）JSON形式で返します。次に、ページを読み込んでJavaScriptデータ構造体に格納するときに、このデータを取得するAJAX JavaScript呼び出しを行います。
• 代わりに、あなたのデータを取得する場合は、代わり

このように、前述のJavaScriptのデータを使用して、あなたのチャートでは、このデータを挿入するために、インラインPHPを使用しての、あなたの更新ボタンをもう一度これらの手順を行うことができますから、新たなデータを取得しますサービスのURLを入力し、それに基づいてグラフを再描画します。この種の設計は、サービス指向アーキテクチャ（SOA）と呼ばれることもあります。