When adding 2nd chart.. first chart is disappearing (canvas charts)

Question

I need to display 2 graphs one is bar .. other is pie in php.so m using canvas charts.But when m adding 2nd chart 1st chart automatically disappears .

   $dataPoints = array(
        array("y" => $total_announcement, "label" => "Total Announcement" ),
        array("y" => $active_announcement, "label" => "Active" ),
        array("y" => $pending_announcement, "label" => "Pending " ),
        array("y" => $other_announcement, "label" => "Others" )
    );
    <script>
    window.onload = function() {

    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        theme: "light2",
        title:{
            text: ""
        },
        axisY: {
            title: "Number Of Announcement"
        },
        data: [{
            type: "column",
            yValueFormatString: "#,##0.## ",
            dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
        }]
    });
    chart.render();

    }
    </script>
    <div id="chartContainer" style="height: 370px; width: 100%;"></div>

This was My first Chart which was working fine.

$dataPoints2 = array( 
    array("label"=>"Industrial", "y"=>51.7),
    array("label"=>"Transportation", "y"=>26.6),
    array("label"=>"Residential", "y"=>13.9),
    array("label"=>"Commercial", "y"=>7.8)
)
<script>
window.onload = function() {


var chart2 = new CanvasJS.Chart("chartContainer2", {
    theme: "light2",
    animationEnabled: true,
    title: {
        text: "World Energy Consumption by Sector - 2012"
    },
    data: [{
        type: "pie",
        indexLabel: "{y}",
        yValueFormatString: "#,##0.00\"%\"",
        indexLabelPlacement: "inside",
        indexLabelFontColor: "#36454F",
        indexLabelFontSize: 18,
        indexLabelFontWeight: "bolder",
        showInLegend: true,
        legendText: "{label}",
        dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
    }]
});
chart2.render();

}
</script>
<div id="chartContainer2" style="height: 370px; width: 100%;"></div>

And This was my 2nd chart. As soon as m adding the second one.. first chart disappears. Both of them are working fine but only one is displayed that is the second one.

Answer 1

This is a bit of a guess because I can't run your code, but is it something to do with calling window.onload twice?

Could you combine your code to the following

$dataPoints = array(
        array("y" => $total_announcement, "label" => "Total Announcement" ),
        array("y" => $active_announcement, "label" => "Active" ),
        array("y" => $pending_announcement, "label" => "Pending " ),
        array("y" => $other_announcement, "label" => "Others" )
    );    

$dataPoints2 = array( 
    array("label"=>"Industrial", "y"=>51.7),
    array("label"=>"Transportation", "y"=>26.6),
    array("label"=>"Residential", "y"=>13.9),
    array("label"=>"Commercial", "y"=>7.8)
)
<script>
window.onload = function() {

var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        theme: "light2",
        title:{
            text: ""
        },
        axisY: {
            title: "Number Of Announcement"
        },
        data: [{
            type: "column",
            yValueFormatString: "#,##0.## ",
            dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
        }]
    });    


var chart2 = new CanvasJS.Chart("chartContainer2", {
    theme: "light2",
    animationEnabled: true,
    title: {
        text: "World Energy Consumption by Sector - 2012"
    },
    data: [{
        type: "pie",
        indexLabel: "{y}",
        yValueFormatString: "#,##0.00\"%\"",
        indexLabelPlacement: "inside",
        indexLabelFontColor: "#36454F",
        indexLabelFontSize: 18,
        indexLabelFontWeight: "bolder",
        showInLegend: true,
        legendText: "{label}",
        dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
    }]
});

chart.render();
chart2.render();

}
</script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<div id="chartContainer2" style="height: 370px; width: 100%;"></div>