Untitled

<html lang="en">
    <head>


    </head>
    <script src="js1/jquery.js" type="text/javascript"></script>


    <script type="application/javascript" src="js1/awesomechart.js"> </script>

<br>
<table width="610" border="0"><tr><td>

            <div class="container">

                <div class="row-fluid">

                    <div class="span12">

                        <div class="hero-unit-table">


                            <div class="charts_container">
                                <div class="chart_container">
                                     <div class="alert alert-info" style='color: rgba(0, 0, 0, 1);
    text-shadow: 0 1px 0 brown;
	font-size: 20px;
	font-family:"trebuchet ms", arial, "liberation sans"'>&nbsp;&nbsp;&nbsp;&nbsp;Product Statistic</div>
                                    <canvas id="chartCanvas1" width="1100" height="400">
                                        Your web-browser does not support the HTML 5 canvas element.
                                    </canvas>

                                </div>
                            </div>


<div class="container">

                <div class="row-fluid">

                    <div class="span12">

                        <div class="hero-unit-table">


                            <div class="charts_container">
                                <div class="chart_container">
                                     <div class="alert alert-info" style='color: rgba(0, 0, 0, 1);
    text-shadow: 0 1px 0 brown;
	font-size: 20px;
	font-family:"trebuchet ms", arial, "liberation sans"'></div>
                                    <canvas id="chartCanvas1" width="1100" height="40">
                                        Your web-browser does not support the HTML 5 canvas element.
                                    </canvas>

                                </div>
                            </div>


        </div>


                            <script type="application/javascript">

                                var chart1 = new AwesomeChart('chartCanvas1');


                                chart1.data = [
                                <?php
                                $query = mysql_query("select * from transactions") or die(mysql_error());
                                while ($row = mysql_fetch_array($query)) {
								$product_array = $row["product_id_array"];
								$product_id_string = rtrim($product_array, ",");
								$id_str_array = explode(",", $product_id_string);
								foreach ($id_str_array as $key => $value) {
								$id_quantity_pair = explode("-", $value); // Uses Hyphen(-) as delimiter to separate product ID from its quantity
								$product_id = $id_quantity_pair[0]; // Get the product ID
								$product_quantity = $id_quantity_pair[1]; // Get the quantity
                                    }?>
                                    <?php echo $product_quantity . ','; ?>
                                <?php }; ?>
                                ];

                                chart1.labels = [
                                <?php
                                $query = mysql_query("select * from transactions") or die(mysql_error());
                                while ($row = mysql_fetch_array($query)) {
								$date = $row['payment_date'];
								$product_array = $row["product_id_array"];
								$product_id_string = rtrim($product_array, ",");
								$id_str_array = explode(",", $product_id_string);
								foreach ($id_str_array as $key => $value) {
								$id_quantity_pair = explode("-", $value); // Uses Hyphen(-) as delimiter to separate product ID from its quantity
								$product_id = $id_quantity_pair[0]; // Get the product ID
								$product_quantity = $id_quantity_pair[1]; // Get the quantity
								$sql = mysql_query("SELECT pname FROM products WHERE id='$product_id' ");
								while($row = mysql_fetch_array($sql)){
								$product_name = $row["pname"];
								}
								}                                    ?>
                                    <?php echo "'" . $product_name . ' ' . $date . "'" . ','; ?>
                                <?php }; ?>
                                ];
                                chart1.colors = ['red', 'blue', 'green', 'yellow', 'violet', 'brown'];
                                chart1.randomColors = true;
                                chart1.animate = true;
                                chart1.animationFrames = 30;
                                chart1.draw();


                            </script>


                        </div>

                    </div>
                </div>
</td>
</tr>
</table>
</body>
</html>