Solo può caricare uno Zingchart

Question

Ho un problema che posso caricare solo uno zingchart nel mio web anche se ho codici per 2 grafici.
Il codice genererà solo l'ultimo grafico, in questo caso, il grafico a torta e ignorerà il grafico a barre.
Qui di seguito sono i miei codici

<?php 
//getDBConnect function 
require 'dbconnect.php'; 

//Get ID from form 
$id = $_GET['staffid']; 

//connect to database 
$con = getDBConnect(); 

if(!mysqli_connect_errno($con)){ 
$sqlQueryStr = 
     "SELECT a.ai_Name, r.duration " . 
     "FROM report AS r, academicinstitution AS a " . 
     "WHERE r.ai_Id = a.ai_Id "; 

$result = mysqli_query($con,$sqlQueryStr); 

mysqli_close($con); 
} else { 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
} 

//Get data into array 
$emparray = array(); 
while ($row = mysqli_fetch_assoc($result)) { 
    $emparray[] = $row; 
} 

//Group array by ai_Name 
$grouparray = array(); 
    foreach($emparray as $item) 
    { 
     if(!isset($grouparray[$item["ai_Name"]])) 
     $grouparray[$item["ai_Name"]] = 0; 

     $grouparray[$item["ai_Name"]] += $item["duration"]; 
    } 
?> 
<script> 
var dataBar=[ 
<?php 
    foreach($grouparray as $keys => $value){ 
     echo $value. ","; 
    } 
?>]; 

window.onload=function(){ 
    zingchart.render({ 
     id:'chartBar', 
     height:400, 
     width:600, 
     data:{ 
      "graphset":[ 
      { 
       "type":"bar", 
       "title":{"text":"BarChart"}, 
       "series":[ 
        { 
         "values":dataBar 
        } 
       ] 
      } 
      ] 
     } 
    }); 
}; 
</script> 

<script> 
    var dataPie=[ 
     <?php 
      foreach($grouparray as $keys => $value){ 
       echo '{'; 
       echo '"text":"'.$keys.'","values":['.$value.']'; 
       echo '},'; 
      } 
     ?>]; 

    window.onload=function(){ 
     zingchart.render({ 
      id:'chartPie', 
      height:400, 
      width:600, 
      data:{ 
       "graphset":[ 
       { 
        "type":"pie", 
        "title":{"text":"PieChart"}, 
        "series":dataPie 
       } 
       ] 
      } 
     }); 
    }; 
</script> 

<div id="chartBar"></div> 
<div id="chartPie"></div> 

Cosa devo fare?

Answer 1

Il problema qui è che sono state assegnate due funzioni all'evento window.onload. JavaScript consente di chiamare una funzione solo quando l'evento viene attivato. Se assegni più funzioni ad esso, l'ultima assegnazione sovrascriverà quelle precedenti. Ecco perché il grafico a torta è il rendering ma non il grafico a barre.

La soluzione consiste nel mettere entrambe le chiamate di rendering all'interno della richiamata .

Ecco che cosa assomiglia:

<script> 
var dataBar=[ 
<?php 
    foreach($grouparray as $keys => $value){ 
     echo $value. ","; 
    } 
?>]; 

var dataPie=[ 
<?php 
    foreach($grouparray as $keys => $value){ 
     echo '{'; 
     echo '"text":"'.$keys.'","values":['.$value.']'; 
     echo '},'; 
    } 
?>]; 

window.onload=function(){ 
    zingchart.render({ 
     id:'chartBar', 
     height:400, 
     width:600, 
     data:{ 
      "graphset":[ 
      { 
       "type":"bar", 
       "title":{"text":"BarChart"}, 
       "series":[ 
        { 
         "values":dataBar 
        } 
       ] 
      } 
      ] 
     } 
    }); 

    zingchart.render({ 
     id:'chartPie', 
     height:400, 
     width:600, 
     data:{ 
      "graphset":[ 
      { 
       "type":"pie", 
       "title":{"text":"PieChart"}, 
       "series":dataPie 
      } 
      ] 
     } 
    }); 
} 
</script> 

Sono sulla squadra ZingChart. Holler se hai altre domande.