केवल एक ज़िंगचार्ट

Question

लोड कर सकता है मुझे एक समस्या है कि मैं केवल अपने वेब में 1 ज़िंगचार्ट लोड कर सकता हूं, भले ही मेरे पास 2 चार्ट के लिए कोड हों।
कोड इस मामले में, नवीनतम चार्ट उत्पन्न करेगा, पाई चार्ट और बार चार्ट को अनदेखा करेगा।
नीचे मेरी कोड

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

मैं क्या करना चाहिए रहे हैं?

Answer 1

यहां मुद्दा यह है कि आपने दो कार्यों को window.onload ईवेंट में असाइन किया है। जावास्क्रिप्ट केवल उस घटना को बुलाए जाने पर एक फ़ंक्शन को कॉल करने की अनुमति देता है। यदि आप इसे एकाधिक फ़ंक्शन असाइन करते हैं, तो नवीनतम असाइनमेंट किसी भी पिछले को ओवरराइट करेगा। यही कारण है कि आपका पाई चार्ट प्रतिपादन कर रहा है लेकिन आपका बार चार्ट नहीं है।

समाधान window.onload कॉलबैक के अंदर दोनों रेंडर कॉल डालना है।

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

मैं ZingChart टीम पर हूँ:

यहां उसका लग रहा है की तरह है। यदि आपके कोई और प्रश्न हैं तो होलर।