Only can load one Zingchart

Question

i have a problem that i can only load 1 zingchart in my web even though i have codes for 2 charts.
The code will just generate the latest chart, in this case, the pie chart and ignore the bar chart.
Below are my codes

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

What should i do?

Answer 1

The issue here is that you've assigned two functions to the window.onload event. JavaScript only allows one function to be called when that event fires. If you assign multiple functions to it, the latest assignment will overwrite any previous ones. That's why your pie chart is rendering but not your bar chart.

The solution is to put both render calls inside the window.onload callback.

Here's what that looks like:

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

I'm on the ZingChart team. Holler if you have any more questions.