Question

我是发展世界的新手。我正在尝试使用谷歌图表创建仪表板。我正在使用SQL查询来做到这一点，我已经设法按照一个例子来创建一个效果很好的图表，但现在我必须以类似的方式创建多个图表。谷歌图表确实显示了如何做到这一点，但它没有使用SQL查询，我需要使用MySQL查询数据，所以请有人协助我如何做到这一点，我真的很感激。

非常感谢你！

以下是代码：

<?php
$connect = mysqli_connect("localhost", "root", "", "test");
$query = "SELECT 'Health Members' AS 'Member Type', COUNT(policy_no) AS 'Total'
FROM health
WHERE health.`status` > 600
UNION
SELECT 'Health Spouses' AS 'Member Type', COUNT(policy) AS 'Total'
FROM health_dependents
WHERE active = 1
AND dc <> 99
AND dc = 01
UNION
SELECT 'Health Dependents' AS 'Member Type', COUNT(policy) AS 'Total'
FROM health_dependents
WHERE active = 1
AND dc <> 99
AND dc <> 01
AND dc <> 00
UNION
SELECT 'Dental Members' AS 'Member Type', COUNT(policy_no) AS 'Total'
FROM dental
WHERE dental.`status` > 600
UNION
SELECT 'Dental Spouses' AS 'Member Type', COUNT(policy) AS 'Total'
FROM dental_dependents
WHERE active = 1
AND dc <> 99
AND dc = 01
UNION
SELECT 'Dental Dependents' AS 'Member Type', COUNT(policy) AS 'Total'
FROM dental_dependents
WHERE active = 1
AND dc <> 99
AND dc <> 01
AND dc <> 00
UNION
SELECT 'Rescue Members' AS 'Member Type', COUNT(policy_no) AS 'Total'
FROM rescue
WHERE rescue.`status` > 600
UNION
SELECT 'Rescue Spouses' AS 'Member Type', COUNT(policy) AS 'Total'
FROM rescue_dependents
WHERE active = 1
AND dc <> 99
AND dc = 01
UNION
SELECT 'Rescue Dependents' AS 'Member Type', COUNT(policy) AS 'Total'
FROM rescue_dependents
WHERE active = 1
AND dc <> 99
AND dc <> 01
AND dc <> 00
UNION
SELECT 'Umsizilife Members' AS 'Member Type', COUNT(policy_no) AS 'Total'
FROM umsizilife
WHERE umsizilife.`status` > 600
UNION
SELECT 'Umsizilife Spouses' AS 'Member Type', COUNT(policy) AS 'Total'
FROM umsizilife_dependents
WHERE active = 1
AND dc <> 99
AND dc = 01
UNION
SELECT 'Umsizilife Dependents' AS 'Member Type', COUNT(policy) AS 'Total'
FROM umsizilife_dependents
WHERE active = 1
AND dc <> 99
AND dc <> 01
AND dc <> 00";  
$result = mysqli_query($connect , $query);  
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Active Members Dashboard</title>

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Styles -->
    <link href="_css/styles.css" rel="stylesheet">
    <!-- date picker -->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <!-- data tables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

<div class="container">
    <div class="page-content">
    <!-- inside wrapper -->

        <!-- page header -->
        <?php require_once("/elements/top.php") ?>

        <!-- BUILD PAGE HERE -->
        <table class="columns">
            <tr>
                <td><div id="AllProducts" style="width: 800px; height: 400px;"></div></td>
                <td><div></div></td>
            </tr>
        </table> 

    </div>
</div>  

</body>

    <!-- inside wrapper -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>    
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <!-- data tables -->
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>

    <script type="text/javascript">  
        google.charts.load('current', {'packages':['corechart']});  
        google.charts.setOnLoadCallback(drawChart);  
        function drawChart()  
           {  
                var data = google.visualization.arrayToDataTable([  
                          ['Member Type', 'Total'],  
                          <?php  
                          while($row = mysqli_fetch_array($result))  
                          {  
                               echo "['".$row["Member Type"]."', ".$row["Total"]."],";  
                          }  
                          ?>  
                     ]);  
                var options = {  
                      pieHole: 0.4,
                      chartArea:{left:0,top:50,width:"800%",height:"400%"} 
                     };  
                var chart = new google.visualization.PieChart(document.getElementById('AllProducts'));  
                chart.draw(data, options);  
           }  
    </script> 
</html>

包含多个SQL查询的多个Google Charts

0 个答案: