Home forums Using CanvasJS How to add two charts in a single page PHP

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Manoj Mohan 5 days, 18 hours ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #25494

    Basically i am trying to add two canvasJS charts on a single page. However, when i include them both in the mainpage the first one doesnt show and the second overrides it.

    <?php include("top_airlines.php"); ?>
    <?php include("genderrange.php"); ?>
    
    '
    
    <;?php 
    
    $dataPoints1 = array( 
    	array("label"=>"Male", "y"=>5),
    	array("label"=>"Female", "y"=>1),
    );
    
            
            
            
           ?> 
    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    window.onload = function() {
     
     
    var chart = new CanvasJS.Chart("chartContainer1", {
    	animationEnabled: true,
    	title: {
    		text: "Gender Ratio of Applicants"
    	},
    	subtitles: [{
    //		text: "November 2017"
    	}],
    	data: [{
    		type: "pie",
    		yValueFormatString: "#,##0.00\"\"",
    		indexLabel: "{label} ({y})",
    		dataPoints: <?php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK); ?>
    	}]
    });
    chart.render();
     
    }
    </script>
    </head>
    <body>
    <div id="chartContainer1" style="height: 300px; width: 100%;"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </body>
    </html>   
    
    
    
    

    <?php

    $malecount=5;
    $femalecount=1;
    $dataPoints2 = array(
    array(“label”=>”Male”, “y”=>$malecount),
    array(“label”=>”Female”, “y”=>$femalecount),
    );

    ?>

    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    window.onload = function() {

    var chart2 = new CanvasJS.Chart(“chartContainer2”, {
    animationEnabled: true,
    title: {
    text: “Gender Ratio of Applicants”
    },
    subtitles: [{
    // text: “November 2017”
    }],
    data: [{
    type: “pie”,
    yValueFormatString: “#,##0.00\”\””,
    indexLabel: “{label} ({y})”,
    dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
    }]
    });
    chart2.render();

    }
    </script>
    </head>
    <body>
    <div id=”chartContainer2″ style=”height: 300px; width: 100%;”></div>
    <script src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>
    </body>
    </html>

    <br>
    `

    #25521

    @ahmedalsharbati,

    It seems like you are trying to merge multiple html tags that has multiple window.onload – which might cause issue. Please take a look at this tutorial for merging two files in PHP.

    Also, please refer this stackoverflow thread for more information about multiple window.onload in a single page.

    —-
    Manoj Mohan
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.