Geek Answers Handbook

Passing PHP array to Javascript via JSON to update google chart

I have three PHP arrays that I encoded using json ... additional PHP code was omitted because the arrays were working correctly .... Also, the HTML tags that call the google diagram were omitted for brevity ...

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

I would like to access these three arrays in Javascript to dynamically update my google chart.

 <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>
+6
json javascript php
source share
3 answers

You probably want them to become Javascript variables. When your php is executed, it creates code that your web browser then interprets. So you want to define javascript strings using php. For example:

 <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>

These variables are then available for subsequent javascript.

+9
source share

Here's how you can dynamically generate data from PHP, correctly generate formatted JSON output and read it using JavaScript (JQuery required) and load it into the Google Visulization API (Charts).

PHP side (server):

 function returnData() { $data = Array (); $data [] = Array ("Name", "Value"); $data [] = Array ("Apple", 5); $data [] = Array ("Banana", 3); header('content-type: application/json'); echo json_encode($data); }

Javascript side (client):

 var jsonData = null; var jsonDataResult = $.ajax({ url: dataURL, dataType: "json", async: false, success: ( function(data) { jsonData = data; }) }); var data = new google.visualization.arrayToDataTable(jsonData);
+3
source share

This is one of the best examples I have done that can help you: testing it and working well: create two pages called index.php and the other get_json.php: This is not exactly what you pointed out, but exactly like that Same idea, and it answers the question.

 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 ?>
0
source share

More articles:


All Articles