JSONを使用してPHP配列をJavascriptに渡してGoogle Chartを更新します

私はjsonでエンコードした3つのPHP配列を持っています...余分なPHPコードは配列が適切に機能するため省略されました....さらに、私は動的に私のGoogleのチャートを更新するために、JavaScriptでこれらの3つのアレイにアクセスしたいJSONを使用してPHP配列をJavascriptに渡してGoogle Chartを更新します

<?php 
$encoded_line_volume = json_encode($LineVol) . "\n"; 
$encoded_loan_volume = json_encode($LoanVol) . "\n"; 
$encoded_cluster_name = json_encode($ClusterLine) . "\n"; 
?>

... Googleのチャートを呼んで簡潔にするために省略されています。

<script type="text/javascript"> 

google.load("visualization", "1", {packages:["columnchart"]}); 
google.setOnLoadCallback(drawChart); 

var linevol = new Array; // This would be the first array passed from PHP 
var loanvol = new Array; // This would be the second array passed from PHP 
var clusters = new Array; // This would be the third array passed from PHP 

function drawChart() { 
    var data = new google.visualization.DataTable(); 

    data.addColumn('string', 'Cluster'); 
    data.addColumn('number', 'Loans'); 
    data.addColumn('number', 'Lines'); 

/* create for loops to add as many columns as necessary */ 

var len = jsonarray.length; 

    data.addRows(len); 

for(i=0; i<len; i++) { 

data.setValue(i, 0, ' '+clusters[i]+'');  /* x-axis */ 
data.setValue(i, 1, linevol[i]); /* Y-axis category #1*/ 
data.setValue(i, 2, loanvol[i]); /* Y-axis category #2*/ 
} 
/*********************************end of loops***************************************/ 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
    chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Prospect Population', legend: 'right'}); 
} 
</script>

出典

2009-11-09 brussels0828

I手助けするのが大好きですが、あなたのコードが不完全であると書式設定欠けていると思います;） –

ジャスティンを...ちょうどそれを再フォーマット...これで完了する必要があります... – brussels0828

おそらくそれらがJavascript変数になりたいと思うかもしれません。 PHPが実行されると、Webブラウザが解釈したコードが作成されます。だから、PHPを使ってJavaScript文字列を定義したいと思う。例：

<script type="text/javascript"> 
    var encoded_line_volume = <?php echo json_encode($LineVol) ?>; 
    var encoded_loan_volume = <?php echo json_encode($LoanVol) ?>; 
    var encoded_cluster_name = <?php echo json_encode($ClusterLine) ?>; 
</script>

これらの変数には、後続のjavascriptからアクセスできます。

出典

2009-11-09 02:34:08

おかげで、県...意志私は対応するJavaScript配列を作成するために各変数を解析する必要がありますか？ – brussels0828

Javascriptで解析しますか？いいえ、配列がPHPの通常の配列ではありません。 Jsonは、javascript変数として直接解釈するように変数をエンコードします。そのため、それらの周りに引用符はありません。ページソースを表示すると、私の意味がわかります。 –

あなたは男です、ケン...ありがとう、兄。 – brussels0828

これは、PHPからデータを動的に生成し、JSON形式の出力を正しく生成し、JavaScript（JQueryが必要）から読み込み、Google Visulization（Charts）APIに読み込む方法です。

PHP（サーバー）側：

のJavascript（クライアント）側：

var jsonData = null; 

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

var data = new google.visualization.arrayToDataTable(jsonData);

出典

2011-08-12 23:45:07

これは私のコードを他のコードと統合して動作させてくれました。 – humphrey

これはあなたを助けることができる私は最高の例の一つである：そのテストとうまく働い： index.phpという2つのページとget_json.phpというもう1つのページを作成してください。これはあなたが投稿したコードとまったく同じアイデアではなく、クエートに答えるものです。

the codes for index.php 

    <html> 
    <head> 
     <title>King Musa Graph</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 Google JSAPI --> 
     <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 jsonData = $.ajax({ 
        url: "get_json.php", 
        dataType: "json", 
        async: false 
       }).responseText; 

       var obj = jQuery.parseJSON(jsonData); 
       var data = google.visualization.arrayToDataTable(obj); 

       var options = { 
        title: 'King Musa' 
       }; 

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

     </script> 
    </head> 
    <body> 
     <div id="chart_div" style="width: 900px; height: 500px;"> 
     </div> 
    </body> 
    </html> 

codes for get_json.php 
<?php 

    $data = Array(); 
    $data [] = Array ("Name", "Value"); 
    $data [] = Array ("PHP", 78); 

    $data [] = Array ("JAVA", 1000); 
    $data [] = Array ("HTML", 129); 


    $table = json_encode($data); 
    // header('content-type: application/json'); 

    echo $table ; // this line is important it should be not disabled 

?>

出典

2013-09-06 13:47:24 humphrey

JSONを使用してPHP配列をJavascriptに渡してGoogle Chartを更新します

答えて

関連する問題