MySQL データをさまざまなユーザーに動的に表示する最初のダッシュボード サイトの作成に取り組んでいます。いくつかのコンテキストでは、私は Webmatrix PHP スターター サイトを使用しており、Google Charts API によって読み取られるようにデータを .json 形式にクエリする方法を理解するのに苦労しています。.ajax を使用して Google Chart に渡す配列をハードコーディングすることに成功しましたが、SQL クエリから配列を構築する際に問題が発生しています。
私は一週間中解決策を探しましたが、まだ見つかりません。
私の現在のコードは以下で、「テーブルには列がありません」というエラーが返されます。
-クエリと .json への解析 (未解決)
<?php
// -----> Query MySQL and parse into JSON below. <------
// write your SQL query here (you may use parameters from $_GET or $_POST if you need them)
require_once ("Includes/session.php");
require_once ("Includes/simplecms-config.php");
require_once ("Includes/connectDB.php");
include("Includes/header.php");
$recId = null;
$projid = null;
$hours = null;
$recId = $_GET['id'];
$projid = $_GET['projid'];
$hours = $_GET['hours'];
$query = "SELECT projid, hours FROM hours WHERE id = ?";
$statement = $databaseConnection->prepare($query);
$statement->bind_param('d', $recId);
$statement->execute();
$statement->store_result();
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'projid', 'type' => 'string'),
array('label' => 'hours', 'type' => 'number')
);
/* Extract the information from $result */
foreach($result as $r) {
$temp = array();
// The following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['projid']);
// Values of the each slice
$temp[] = array('v' => (int) $r['hours']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
-.ajax を読み込んでグラフを描画 (解決済み)
<?php
include("Includes/header.php");
include("Includes/charts/piecharthours.php");
include("Includes/charts/linechart.php");
?>
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', { 'packages': ['corechart'] });
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getDatahours.php",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, { width: 400, height: 240 });
setInterval(drawChart, 500);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width: 500px; height: 500px;"></div>
</body>
</html>
-コンソール出力
Uncaught Error: Invalid JSON string: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dashboard</title>
<link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="/Styles/Sitemenu.css" rel="stylesheet" type="text/css" />
<link href="/Styles/site2.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div class="outer-wrapper">
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<a href="/index.php" class="uclogo">UC Logo</a>
<a href="/index.php">UC</a></p>
</div>
<div class="float-right">
<section id="login">
<ul id="login">
<li><a href="/logoff.php">Sign out</a></li>
<li><a href="/addpage.php">Add</a></li>
<li><a href="/selectpagetoedit.php">Edit</a></li>
<li><a href="/deletepage.php">Delete</a></li>
</ul>
<div class="welcomeMessage">Welcome, <strong>ID</strong></div>
</section>
</div>
<div class="clear-fix"></div>
</div>
<section class="navigation" data-role="navbar">
<nav>
<ul id="menu">
<li><a href="/index.php">Dashboard</a></li>
<li><a href="/projects.php">Projects</a>
<ul>
<li><a href="/page.php?pageid=1">P4</a></li>
<li><a href="/page.php?pageid=2">P1</a></li>
<li><a href="/page.php?pageid=3">P2</a></li>
<li><a href="/page.php?pageid=4">P3</a></li>
</ul>
<li><a href="/resources.php">Resources</a></li>
<li><a href="/reporting.php">Reporting</a></li>
<li><a href="/help.php">Help</a></li>
</ul>
</nav>
</section>
</header> format+en,default,corechart.I.js:60
Uncaught Error: Container is not defined example.php:6
Uncaught Error: Invalid JSON string: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dashboard</title>
<link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="/Styles/Sitemenu.css" rel="stylesheet" type="text/css" />
<link href="/Styles/site2.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div class="outer-wrapper">
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<a href="/index.php" class="uclogo">UC Logo</a>
<a href="/index.php">UC</a></p>
</div>
<div class="float-right">
<section id="login">
<ul id="login">
<li><a href="/logoff.php">Sign out</a></li>
<li><a href="/addpage.php">Add</a></li>
<li><a href="/selectpagetoedit.php">Edit</a></li>
<li><a href="/deletepage.php">Delete</a></li>
</ul>
<div class="welcomeMessage">Welcome, <strong>ID</strong></div>
</section>
</div>
<div class="clear-fix"></div>
</div>
<section class="navigation" data-role="navbar">
<nav>
<ul id="menu">
<li><a href="/index.php">Dashboard</a></li>
<li><a href="/projects.php">Projects</a>
<ul>
<li><a href="/page.php?pageid=1">P4</a></li>
<li><a href="/page.php?pageid=2">P1</a></li>
<li><a href="/page.php?pageid=3">P2</a></li>
<li><a href="/page.php?pageid=4">P3</a></li>
</ul>
<li><a href="/resources.php">Resources</a></li>
<li><a href="/reporting.php">Reporting</a></li>
<li><a href="/help.php">Help</a></li>
</ul>
</nav>
</section>
</header>