Przekazywanie tablicy PHP do Javascript przez JSON, aby zaktualizować Google Chart

Mam trzy tablice PHP, które zakodowałem jsonem ... dodatkowy kod PHP został pominięty, ponieważ tablice działają poprawnie ... Dodatkowo, znaczniki HTML, które nazywamy wykres google zostały pominięte dla zwięzłości ...Przekazywanie tablicy PHP do Javascript przez JSON, aby zaktualizować Google Chart

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

Chciałbym uzyskać dostęp do tych trzech tablic w JavaScript, aby zaktualizować tabelę Google dynamicznie.

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

Źródło

2009-11-09 brussels0828

Chciałbym pomóc, ale kod jest niekompletny i nie ma formatowania;) –

Justin ... tylko sformatowany go ... powinno być kompletne teraz ... – brussels0828

Prawdopodobnie chcesz, aby stały się one zmiennymi JavaScript. Kiedy php zostanie uruchomiony, tworzy kod, który przegląda twoja przeglądarka internetowa. Więc chcesz zdefiniować łańcuchy javascript za pomocą php. Na przykład:

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

Następnie zmienne te są dostępne dla późniejszych javascript.

Źródło

2009-11-09 02:34:08

dzięki Ken będzie ... Potrzebuję parsować każdą zmienną, aby utworzyć odpowiednie tablice javascript? – brussels0828

Parsować w JavaScript? Nie, nie jeśli tablica jest normalną tablicą w PHP. Json koduje zmienną tak, że interpretuje ją bezpośrednio jako zmienną javascript - dlatego nie ma wokół niej żadnych cytatów. Jeśli wyświetlisz źródło strony, zobaczysz, co mam na myśli. –

jesteś mężczyzną, Ken ... Dzięki, bracie. – brussels0828

W ten sposób można generować dane dynamicznie z PHP, generować poprawnie sformatowane wyjście JSON i odczytać je z JavaScript (wymagane JQuery) i załadować do interfejsu API Google Visulization (Charts).

PHP (serwer) Side:

Javascript (Klient) z boku:

var jsonData = null; 

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

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

Źródło

2011-08-12 23:45:07

To działa Zintegrowałem twoje kody z innymi kodami i to działało 4 mnie dzięki bardzo dużo – humphrey

Jest to jeden z najlepszych przykładów zrobiłem, które mogą pomóc: jego przetestowany i działa ładnie: Utwórz dwie strony o nazwie index.php i drugą o nazwie get_json.php: To nie są dokładnie te kody, które wysłałeś, ale dokładnie ten sam pomysł i odpowiada na kwerendę.

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 

?>

Źródło

2013-09-06 13:47:24 humphrey

Przekazywanie tablicy PHP do Javascript przez JSON, aby zaktualizować Google Chart

Odpowiedz

Powiązane problemy