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

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>