如何动态查询数据库并在仪表板上绘制值？答案

【问题标题】：How to query to DB & plot the values on dashboard dynamically?如何动态查询数据库并在仪表板上绘制值？
【发布时间】：2016-06-26 09:04:38
【问题描述】：

我对仪表板的东西很陌生。学习 PHP 和 javascript。我正在尝试在已经可用的谷歌图表的帮助下创建一个饼图。我可以做到（因为，数据是硬编码的）。我正在尝试用动态值绘制饼图（查询数据库并在饼图中绘制值）。我正在尝试这样做，但做不到。你能帮我实现这个吗（MySQL，比如 2 列名称和分数）。

工作代码[用于静态数据]：

<html>
  <head>
    <script type="text/javascript" src="loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        **var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);**

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

我了解上面突出显示的部分负责加载静态数据。

尝试使用与 db 相关的 PHP 嵌入上面的脚本。 可能，我可能会错过以正确的方式调用它。你能帮我提供缺少的接口吗？我对所有这些技术都很陌生。

<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbName = "test";
$conn = new mysqli($servername, $username, $password, $dbName);
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$query = "SELECT * FROM student";

$result = $conn->query($query);

$jsonArray = array();

if ($result->num_rows > 0) {

  while($row = $result->fetch_assoc()) {
    $jsonArrayItem = array();
    $jsonArrayItem['label'] = $row['Name'];
    $jsonArrayItem['value'] = $row['Scores'];
    array_push($jsonArray, $jsonArrayItem);
  }
}

$conn->close();

header('Content-type: application/json');

echo json_encode($jsonArray);
?>

【问题讨论】：

标签： javascript php html mysql dashboard

【解决方案1】：

简介

好的，如果您的代码可以正常运行，我想您目前已经制作了一个 php 脚本，该脚本会以您需要的格式输出 JSON 文档。

现在您需要使用 javascript 实际加载数据并将其输入图表 API。

因此，您需要从php script 加载它，而不是在var data = google.visualization.arrayToDataTable 处提供硬编码数组。

查看以下链接，它们可以使用纯 JS 或使用 JQuery 解决此问题：

JQuery 示例

请记住，调用是异步的，因此您需要在（或由）处理 ajax 调用的侦听器中触发图表逻辑。

$.getJSON('http://localhost/myApp/myScript.php&callback', function(data) {
    var data = google.visualization.arrayToDataTable(data);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
});

【讨论】：