Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/460.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何基于按钮点击重新加载我的谷歌图表?_Javascript_Php_Jquery_Ajax_Charts - Fatal编程技术网

Javascript 如何基于按钮点击重新加载我的谷歌图表?

Javascript 如何基于按钮点击重新加载我的谷歌图表?,javascript,php,jquery,ajax,charts,Javascript,Php,Jquery,Ajax,Charts,这是我用来显示图表和投票数的代码。它工作得很好 在这段代码中,当我点击刷新按钮时,选票将被更新而不刷新页面。我该怎么做 <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

这是我用来显示图表和投票数的代码。它工作得很好

在这段代码中,当我点击刷新按钮时,选票将被更新而不刷新页面。我该怎么做

<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);

刷新

实现这一点最常见的方法是:

  • 不要使用内联PHP从数据库中加载数据,而是使用一个服务,一个专用URL,它(使用相同的PHP)以JSON格式(最好)返回数据。然后,在加载页面并将其存储在某个JavaScript数据结构中时,进行AJAX JavaScript调用以获取该数据
  • 不要使用内联PHP在图表中插入此数据,而是使用前面提到的JavaScript数据

如果您以这种方式获取数据,刷新按钮可以简单地再次执行以下步骤:从服务URL获取新数据,并基于此重新绘制图表。这种设计有时被称为面向服务的体系结构(SOA)。

实现这一点的最常用方法:

  • 不要使用内联PHP从数据库中加载数据,而是使用一个服务,一个专用URL,它(使用相同的PHP)以JSON格式(最好)返回数据。然后,在加载页面并将其存储在某个JavaScript数据结构中时,进行AJAX JavaScript调用以获取该数据
  • 不要使用内联PHP在图表中插入此数据,而是使用前面提到的JavaScript数据
如果您以这种方式获取数据,刷新按钮可以简单地再次执行以下步骤:从服务URL获取新数据,并基于此重新绘制图表。这种设计有时被称为面向服务的体系结构(SOA)