FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › How to add two charts in a single page PHP

How to add two charts in a single page PHP

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

Tagged: 

  • June 12, 2019 at 1:21 pm #25494

    ahmedalsharbati

    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://cdn.canvasjs.com/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://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>

    <br>

    June 13, 2019 at 6:42 pm #25521

    Manoj Mohan

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

Tagged: 

You must be logged in to reply to this topic.