在Google Charts API中包含php腳本

我想模擬Google圖表的數據庫（使用php）。我無法將php連接到Google Charts。到目前爲止，我試圖使用JSON.stringify（），JSON.parse（），......不幸的是，我沒有找到包含生成數據的正確方法。我究竟做錯了什麼？在Google Charts API中包含php腳本

$fakedate = new DateTime('2014-01-01 14:05:00'); 
$testTime = $fakedate->format('[H,i,s]'); 
$testNb = rand (1000 , 5000); 

for ($i = 0; $i <= 47; $i++) 
{ 
    $chartsdata[$i] = array($testTime, $testNb); 

    $fakedate->add(new DateInterval('PT10M')); 
    $testTime = $fakedate->format('[H,i,s]'); 
    $testNb = rand (1000 , 5000); 
}  
echo json_encode($chartsdata);

在另一方面，我已經寫下面柱形圖：

<script type="text/javascript" src="jquery-1.7.2.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 drawChart() 
    { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('timeofday','testTime'); 
     data.addColumn('number','testNb'); 

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

     var obj = JSON.stringify(jsonData); 
     data.addRows(obj); 

     var options = { 
      title: 'Chart title', 
     }; 

     var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    } 

</script>

來源

2014-03-28 user3474326

這部分代碼

以自動生成數據I寫了下面test.php的似乎不正確：

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

您需要設置成功處理程序，而不是分配jsonDat一到$ .ajax.responseText（我不認爲這是有這樣的屬性）

它會是這樣的：

$.ajax({ 
     url: "test.php", 
     dataType: "json", 
     async: false, 
     success: function(data) { 
      jsonData = data; 
     } 
    });

由於調用是同步的，然後$就會因此在創建圖表之前不應該調用成功處理程序。

來源

2014-03-29 04:41:51 hrgui

有兩種方法可以在javascript中處理這個問題。第一，使用你的代碼爲基礎，要求您使用JSON.parse：

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('timeofday','testTime'); 
    data.addColumn('number','testNb'); 

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

    var obj = JSON.parse(jsonData); 
    data.addRows(obj); 

    var options = { 
     title: 'Chart title', 
    }; 

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
}

第二，暗示在hrgui的回答，是AJAX調用使用success處理程序：

function drawChart() { 
    var jsonData = $.ajax({ 
     url: "test.php", 
     dataType: "json", 
     success: function (jsonData) { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('timeofday','testTime'); 
      data.addColumn('number','testNb'); 
      data.addRows(jsonData); 

      var options = { 
       title: 'Chart title', 
      }; 

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
      chart.draw(data, options); 
     } 
    }); 
}

第二種方法通常是首選，但兩者都可以使用。

來源

2014-03-31 16:03:07 asgallant

在Google Charts API中包含php腳本

回答

相關問題