1

Google Chart APIを使用して円グラフを作成しようとしています。問題はなく、localhost でテストすると完全に表示されます。

しかし、ec2 Linux インスタンスにコード全体を配置すると、. チャートボックスを作成し、タイトルを付けますが、チャートは描画されません。間違いは何ですか？

データは mysql データベースから取得されます。テーブルとその内容を確認しましたが、ローカルホストと同じです。

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

<?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;
?>
4

1 に答える 1

1

コードをセットアップする方法では、2 つの AJAX 呼び出しを行っていますが、最初の呼び出しは何も達成していないようです。

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

クエリへの AJAX 呼び出し用の「url.php」はありますか? そうでない場合、成功関数は決して起動しないため、 を呼び出すことはありませんdrawVisualization。この関数について他の計画がない限り、次のようにコードを単純化できます。

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
    });
}
于 2013-09-18T15:07:40.163 に答える