Google柱狀圖空白頁

我正在研究這個項目，我需要製作一個Google Chart（柱狀圖），以使數據庫中的數據可視化。我檢查了IP和數據庫（數據來自數據庫），一切正常。但是當我嘗試在計算機上看到輸出時，該頁面是空白的。我認爲問題來自google.load，我在下面做了這個。我仍然得到空白頁。請幫我解決這個問題。謝謝！Google柱狀圖空白頁

// 
    google.load('visualization', '1.0', {packages:['corechart'], callback: drawChart}); 
//

這是整個頁面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"><html> 
     <head> 
      <title>R1 Google Chart</title> 
      <!-- Load jQuery --> 
      <script language="javascript" type="text/javascript" 
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"> 
      </script> 
      <!--Load the Ajax API--> 
      <script type="text/javascript" src="https://www.google.com/jsapi"></script> 

      <script type="text/javascript"> 
      // Load the Visualization API and the column chart package. 
      // Set a callback to run when the Google Visualization API is loaded. 
      google.load('visualization', '1.0', {packages:['corechart'], callback: drawChart}); 

      function drawChart() { 
       var jsonData = $.ajax({ 
        url: "chart.php", 
        dataType: "json", 
        async: false 
       }).responseText; 

       var obj = jQuery.parseJSON(jsonData); 
       var data = google.visualization.arrayToDataTable(obj); 
       var options = { 
        title: 'Solar Panel Data', 
        width: 800, 
        height: 600, 
        hAxis: {title: 'time', titleTextStyle: {color: 'red'}} 
       }; 
       var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
       chart.draw(data, options); 
      } 
      </script> 
     </head> 
     <body> 
      <!--this is the div that will hold the column chart--> 
      <div id="chart_div" style="width: 900px; height: 500px;"> 
      </div> 
     </body> 
    </html>

PHP頁面

<?php 
      $con=mysql_connect("131.xxx.xxx.xx","xx","xxxx") or die("Failed to connect with database!!!!"); 
      mysql_select_db("r1array", $con); 
      /** This example will display a column chart. If you need other charts such as a Bar chart, you will need to modify the code a little 
      to make it work with bar chart and other charts **/ 
      $sth = mysql_query("SELECT UNIX_TIMESTAMP(TimeStamp), Pac FROM SolarData"); 
      /* 
      --------------------------- 
      example data: Table (Chart) 
      -------------------------- 
      TimeStamp    Pac 
      2013-08-16 06:45:01  0 
      2013-08-16 06:50:01  0 
      2013-08-16 06:55:01  12 
      2013-08-16 07:00:00  39 
      2013-08-16 07:05:01  64 
      2013-08-16 07:10:00  84 

      */ 

      $rows = array(); 
      //flag is not needed 
      $flag = true; 
      $table = array(); 
      $table['cols'] = array(
       // Labels for your chart, these represent the column titles 
       array('label' => 'TimeStamp', 'type' => 'TIMESTAMP DEFAULT NOW()'), 
       array('label' => 'Pac', 'type' => 'INT') 
      ); 
      $rows = array(); 
      while($r = mysql_fetch_assoc($sth)) { 
       $temp = array(); 
       // 
       $temp[] = array('v' => (string) $r['TimeStamp']); 

       // Values of each slice 
       $temp[] = array('v' => (int) $r['Pac']); 
       $rows[] = array('c' => $temp); 
      } 
      $table['rows'] = $rows; 
      $jsonTable = json_encode($table); 
      echo $jsonTable; 
      mysql_close($db); 
     ?>

來源

2013-12-20 Shurui Liu

使用火蟲追蹤問題。檢查你的螢火蟲控制檯，並確保你沒有得到任何錯誤。 – phpsmashcode

我使用了Firebug。我可以看到我的所有代碼。但似乎Firebug不會給你錯誤，如果我以正確的方式使用它... –

轉到您的瀏覽器中的'chart.php'，並更新您的帖子與PHP輸出的內容。 – asgallant

看來，在你的PHP文件錯誤的方式準備數據。用你的html文件和下面的僞造你的數據的php文件，我得到了柱形圖。

<?php 
    /* 
    --------------------------- 
    example data: Table (Chart) 
    -------------------------- 
    TimeStamp    Pac 
    2013-08-16 06:45:01  0 
    2013-08-16 06:50:01  0 
    2013-08-16 06:55:01  12 
    2013-08-16 07:00:00  39 
    2013-08-16 07:05:01  64 
    2013-08-16 07:10:00  84 
    */ 

    $table = array(); 

    $table[0] = array('TimeStamp', 'Pac'); 
    $table[1] = array('2013-08-16 06:45:01',  0); 
    $table[2] = array('2013-08-16 06:50:01',  0); 
    $table[3] = array('2013-08-16 06:55:01',  12); 
    $table[4] = array('2013-08-16 07:00:00',  39); 
    $table[5] = array('2013-08-16 07:05:01',  64); 
    $table[6] = array('2013-08-16 07:10:00',  84); 

    $jsonTable = json_encode($table); 
    echo $jsonTable; 
?>

。在你的PHP文件這個例子將顯示餅圖...評論。你想創建哪個圖表？

來源

2013-12-20 22:34:38

對不起，我正在嘗試顯示列數據，這是肯定的。 –

了蝙蝠，我可以看到這裏有一個問題：

$table['cols'] = array(
    // Labels for your chart, these represent the column titles 
    array('label' => 'TimeStamp', 'type' => 'TIMESTAMP DEFAULT NOW()'), 
    array('label' => 'Pac', 'type' => 'INT') 
);

爲'TIMESTAMP DEFAULT NOW()'和'INT'是不是一個DataTable有效的數據類型。如果要從時間戳創建Date對象，則需要使用'date'或'datetime'數據類型，並將格式化爲'Date(year, month, day, hour, minute, second, millisecond)'格式的字符串，其中month爲零索引（因此1月份爲0而不是1）。 'INT'類型應該是'number'。

使用這些修補程序更新您的代碼。如果您的圖表仍然無法正常工作，請在瀏覽器中查看chart.php - 您應該看到數據的JSON字符串輸出（如果沒有，您的PHP中存在問題，您必須進行調試） - 然後使用此更新您的帖子JSON字符串。

來源

2013-12-23 15:55:02 asgallant

Google柱狀圖空白頁

回答

相關問題