Passaggio di array PHP in Javascript tramite JSON per aggiornare Google Chart

Ho tre array PHP che ho codificato con json ... Il codice PHP aggiuntivo è stato omesso perché gli array funzionano correttamente .... Inoltre, i tag HTML che chiamare il grafico di Google sono stati omessi per brevità ...Passaggio di array PHP in Javascript tramite JSON per aggiornare Google Chart

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

Vorrei accedere a queste tre matrici in Javascript per aggiornare la mia tabella di Google in modo dinamico.

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

fonte

2009-11-09 brussels0828

Mi piacerebbe dare una mano, ma il codice è incompleto e manca la formattazione;) –

Justin ... solo riformattato ... dovrebbe essere completa ora ... – brussels0828

Probabilmente vorrai che diventino variabili Javascript. Quando il tuo php viene eseguito, crea un codice che il tuo browser web interpreta. Quindi vuoi definire stringhe javascript usando php. Ad esempio:

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

Quindi tali variabili sono accessibili al successivo javascript.

fonte

2009-11-09 02:34:08

grazie, ken ... sarà Devo analizzare ogni variabile per creare array javascript corrispondenti? – brussels0828

Parse in Javascript? No, non se la matrice è una matrice normale in PHP. Json codifica la variabile in modo che interpreti direttamente come una variabile javascript - ecco perché non ci sono virgolette attorno a loro. Se si visualizza il sorgente della pagina, vedrete cosa intendo. –

tu sei l'uomo, Ken ... Grazie, fratello. – brussels0828

Ecco come è possibile generare dati dinamicamente da PHP, generare correttamente un output formattato JSON e leggerlo da JavaScript (richiesto JQuery) e caricarlo sull'API di Google Visulization (Charts).

PHP (Server) laterale:

Javascript (Client) laterale:

var jsonData = null; 

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

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

fonte

2011-08-12 23:45:07

Questo funziona ho integrato i tuoi codici con altri codici e ha funzionato 4 me grazie mille Man – humphrey

Questo è uno dei migliori esempi che ho fatto, che possono aiutare: il suo provato e funzionando bene: Crea due pagine una chiamata index.php e un'altra chiamata get_json.php: Questo non è esattamente il codice che hai pubblicato ma esattamente la stessa idea e risponde alla domanda.

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 

?>

fonte

2013-09-06 13:47:24 humphrey

Passaggio di array PHP in Javascript tramite JSON per aggiornare Google Chart

risposta

Problemi correlati