使用Google Chart API显示图

Question

I am trying to create pie chart using google chart api. 我正在尝试使用Google Chart API创建饼图。 It has no issue, and shows perfectly when testing on localhost. 它没有问题，并且在localhost上测试时可以完美显示。

But when I put entire code on my ec2 linux instance. 但是，当我将整个代码放在ec2 linux实例上时。 It create chart box, gives title but chart is not drawn. 它创建图表框，给出标题但未绘制图表。 What can be the mistake? 可能是什么错误？

data is taken from mysql databaase. 数据取自mysql databaase。 I checked table and it's content, but it is same as on my localhost. 我检查了表及其内容，但与我的本地主机相同。

url.php url.php

<html>
   <head>
      <title>ThenWat</title>

    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>   
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script type="text/javascript">
    google.load('visualization', '1', {'packages':['corechart']});
    google.setOnLoadCallback(drawChart);    


    function drawVisualization(dataFromAjax) {

    var jsonData = $.ajax({
          url: "ajax_graph_temp.php",
          dataType:"json",
          async: false
          }).responseText;
    var data = new google.visualization.DataTable(jsonData);
        var options = {
           title: 'Index analysis',
          is3D: 'true',
          width: 800,
          height: 600
        };
        alert("");
        var chart = new google.visualization.PieChart(document.getElementById('txtHint'));
        chart.draw(data, options);
         }
function makeAjaxCall() {
      $.ajax({url:'url.php',
              data: {},
              success: function(responseData) {
                         drawVisualization();
                       }
        });
    }
     </script>
   </head>
   <body style="height: 560px">
           <img alt="" src= "3.png" style="top: 38px; right: 689px; position: absolute; height: 91px; width: 417px"/>
               <form action="data.php" method="POST" onsubmit="showUser(this, event)">
            <div style="z-index: 1; left: 470px; top: 100px; position: absolute; margin-top: 0px">              
               <label>Enter URL: <input type="text" name="sent"></label><br/>
            </div>
            <div style="z-index: 1; left: 420px; top: 160px; position: absolute; margin-top: 0px">  <button> Fire me </button>      
            </div>
         </form>
         <div style="z-index: 1; left: 660px; top: 160px; position: absolute; margin-top: 0px"> 
            <button onclick="makeAjaxCall(); return false;" value="View Graph" > View Graph </button>
         </div>

         <div id="txtHint" style="z-index: 1; left: 220px; top: 250px; position: absolute; margin-top: 0px">        
         </div>

   </body>
</html>

ajax_graph_temp.php ajax_graph_temp.php

<?php
$mysqli =mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
  $result = $mysqli->query('SELECT * FROM view_name');

  $rows = array();
  $table = array();
  $table['cols'] = array(
    array('label' => 'pcount', 'type' => 'string'),
    array('label' => 'ncount', 'type' => 'number')
);
    /* Extract the information from $result */
    foreach($result as $r) {
      $temp = array();
      $temp[] = array('v' => (string) $r['ind_type']); 
      $temp[] = array('v' => (int) $r['Index_val']); 
      $rows[] = array('c' => $temp);
    }

$table['rows'] = $rows;

// convert data into JSON format
$jsonTable = json_encode($table);
echo $jsonTable;
?>

Answer 1

The way that you have your code set up, you are making two AJAX calls, the first of which doesn't seem to accomplish anything: 设置代码的方式是，进行两个AJAX调用，第一个似乎没有完成任何事情：

function makeAjaxCall() {
    $.ajax({url:'url.php',
        data: {},
        success: function(responseData) {
            drawVisualization();
        }
    });
}

Do you have a "url.php" for that AJAX call to query? 您有用于该AJAX调用的“ url.php”吗？ If not, then your success function will never fire, and thus never call drawVisualization . 如果没有，则成功函数将永远不会触发，因此永远不会调用drawVisualization 。 Unless you have other plans for this function, you could simplify your code like this: 除非对此功能有其他计划，否则可以这样简化代码：

google.load('visualization', '1', {'packages':['corechart']});

function drawVisualization(dataFromAjax) {
    var data = new google.visualization.DataTable(dataFromAjax);
    var options = {
        title: 'Index analysis',
        is3D: 'true',
        width: 800,
        height: 600
    };
    var chart = new google.visualization.PieChart(document.getElementById('txtHint'));
    chart.draw(data, options);
}
function makeAjaxCall() {
    $.ajax({
        url: "ajax_graph_temp.php",
        dataType:"json",
        success: drawVisualization
    });
}

使用Google Chart API显示图

问题描述

1 个解决方案

解决方案1
1 2013-09-18 15:07:40

使用Google Chart API显示图

问题描述

1 个解决方案

解决方案1 1 2013-09-18 15:07:40

解决方案1
1 2013-09-18 15:07:40