how to render multiple jqplot's pie charts in single page - php

Question

I am using JQplots for rendering the piecharts.I have 2 piecharts.Individually they are working fine. But when I want them in a single page, they are overlapping on one another. Please let me know how can I show them one beside the other? Thanks in advance.
chart 1 code:
<!-- for jqplot graphs -->
<script src="../../assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="../../js/jqplot.js"></script>
<script type="text/javascript" src="../../assets/plugins/jqplot.pieRenderer.min.js"></script>
<link rel="stylesheet"href="../../css/graphs.css" type="text/css">
<!-- end of jqplot graphs js -->
<?php
/* Your Database Name */
$dbname = 'finalCMS';
/* Your Database User Name and Passowrd */
$username = 'root';
$password = 'password';
try {
/* Establish the database connection */
$conn = new PDO("mysql:host=localhost;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$result = $conn->query("SELECT ComplianceStatus,count FROM indexonboard WHERE zone='SEA' and country='SG'");
$rows = array();
foreach($result as $r) {
$rows[] = array( $r['ComplianceStatus'],(int)$r['count']);
}
// convert data into JSON format
$jsonTable = json_encode($rows);
print_r($jsonTable);
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
//mysql_close($conn);
$conn=null;
?>
<script>
function drawchart(){
//function drawchart()
var data1 =<?php echo $jsonTable;?>;
alert(data1);
var plot1 = jQuery.jqplot ('chartsg', [data1],
{
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true
}
},
legend: { show:true, location: 'e' }
}
);
}
drawchart();
</script>
<div id="chartsg"></div>
The code for chart 2:
<!-- for jqplot graphs -->
<script src="../../assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="../../js/jqplot.js"></script>
<script type="text/javascript" src="../../assets/plugins/jqplot.pieRenderer.min.js"></script>
<link rel="stylesheet"href="../../css/graphs.css" type="text/css">
<!-- end of jqplot graphs js -->
<?php
/* Your Database Name */
$dbname = 'finalCMS';
/* Your Database User Name and Passowrd */
$username = 'root';
$password = 'password';
try {
/* Establish the database connection */
$conn = new PDO("mysql:host=localhost;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$result = $conn->query("SELECT Compliancestatus,value FROM COUNT_VALUE WHERE Zone='PZ' and country='AU' and `Compliancestatus` is not null
");
$rows = array();
foreach($result as $r) {
$rows[] = array( $r['Compliancestatus'],(int)$r['value']);
}
// convert data into JSON format
$jsonTable = json_encode($rows);
print_r($jsonTable);
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
//mysql_close($conn);
$conn=null;
?>
<script>
$(document).ready(function(){
//var data1=[
// ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],
// ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
// ];
var data1 =<?php echo $jsonTable;?>;
alert(data1);
var plot1 = jQuery.jqplot ('chart1', [data1],
{
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true
}
},
legend: { show:true, location: 'e' }
}
);
});
</script>
<div id="chart1"></div>
query("SELECT ComplianceStatus,count FROM indexonboard WHERE zone='SEA' and country='SG'");

Answer 1

use different holders for both and fixed the width and height
<div id="piechartHolder" >
<div style="width:50%">
<span id="Chart1Title">Chart1</span>
<div id="chart1" style="width:100%">
</div>
<div style="width:50%">
<span id="Chart2Title">Chart2</span>
<div id="chart2" style="width:100%">
</div>
</div>

Answer 2

Try specifying div sizes, it should help
<div id="chart" style="height:300px; width:600px;"></div>