将从mysql数据库检索的数据转换为图表

时间:2014-07-09 16:38:39

标签: php html mysql ajax

由于某种原因,我的图表不会加载。用户输入日期,php发送查询到mysql,收到数据并显示一个表,在该表下面我想要使用谷歌API显示图表。有人可以帮忙,这是我的代码。

<!doctype html>
<html>
<head>
<!-- links to scripit for jquery drop down calendar -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src= "//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- links to CSS style sheets -->
<link href="styles/main.css" rel="stylesheet" type="text/css">
<link href="styles/date.css" rel="stylesheet" type="text/css">
<link href="styles/date2.css" rel="stylesheet" type="text/css">



<meta charset="utf-8">


<title>Cartridge Details</title>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use     within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/short-stack:n4:default;abel:n4:default;annie-use-    your-telescope:n4:default.js" type="text/javascript"></script>
</head>



<!-- php connection to database to query table for Cartridge Details -->
<?php
$username = "root";
$password = "*******";
$hostname = "localhost"; 
$my_db = "print_consump";

//connection to the database
$dbhandle = mysqli_connect($hostname, $username, $password, $my_db) 
  or die("Unable to connect to MySQL");
  echo "cond";

?>

<body>
<div class="divH">
    <header id="heading1">Cartridge Details</heade>
</div>

<div class="LinkedPages">
<form method="post" action="cartridgedetails.php" name="frm1">
  <div>
    Date:<input type="text" name="YEAR" value="Enter Year (i.e '2013')">
         <input type="submit" value="submit">
  </div>
</form>
<span></span>

<?php

//formula for toner usage total pages/35000 = #toner used for month

    if(isset($_POST["YEAR"])) { 
        $year = $_POST['YEAR'];

        $result = mysqli_query($dbhandle,"SELECT `Servers`, `Total Pages` / 35000 FROM     summaryofserver WHERE 
        RIGHT(Servers,4) = '$year'");

            $data = array(array('Server, Month, Year', 'Number of Toner Cartridges Used'));
while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row[0] . "</td>";
    echo "<td>" . $row[1] . "</td>";
    echo "</tr>";
    $data[] = array($row[0], $row[1]);
        }

    }



?>
<script>
    function drawChart () {
    var data = google.visualization.arrayToDataTable(<?php echo json_encode($data,     JSON_NUMERIC_CHECK); ?>);
    // draw a ColumnChart
    // you can change this to whatever chart type you need
    var chart = new google.visualization.ColumnChart(document.querySelector('#myChart'));
    chart.draw(data, {
        // chart options, eg:
        height: 400,
        width: 600
    });
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
</script>

<div id="myChart"></div>

</div>




</body>
</html>

0 个答案:

没有答案