我有一个仪表板,该仪表板使用google图表显示2个饼图和一个柱状图,基于用户提出的票证。昨天它们工作正常,但是今天早上它们不再加载。
经过一番调查,我发现问题与我的柱形图有关,当我检查控制台时,出现以下错误:
未捕获的SyntaxError:无效或意外的令牌。
深入挖掘错误会在代码的第192行出现,我在图表中回显了“原因”。 “原因”是我的SQL表中的列名。
$connect = odbc_connect("Description=PCD_SQL_SERVER;DRIVER=SQL
Server;SERVER=gbsuk0pcdspdsql","smtrfaUser","Summitdesk789");
$query1 = "SELECT category, count(*) as Total FROM [SMT_RFA].[dbo].
[smtJobTracker] GROUP BY category";
$query2 = "SELECT status, count(*) as Total FROM [SMT_RFA].[dbo].
[smtJobTracker] GROUP BY status";
$query3 = "SELECT reason, count(*) as Total FROM [SMT_RFA].[dbo].
[smtJobTracker] GROUP BY reason";
$result1 = odbc_exec($connect, $query1);
$result2 = odbc_exec($connect, $query2);
$result3 = odbc_exec($connect, $query3);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>SMT Track & Trace System</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/line-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--- Used for Model Search (AJAX / Javascript) --->
<script src="js/formOne.js"></script>
<script src="js/formTwo.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<!-- jQuery jQuery Ajax Autocomplete Plugin For Input Fields -->
<script src="js/jquery.autocomplete.min.js"></script>
<style type="text/css">
@import url(//fonts.googleapis.com/css?family=Lato);
.logo
{
position: fixed;
top: calc(100% - 65px);
left: calc(100% - 135px);
z-index: 10;
}
.containerWell{
background-color: black;
width: 100%;
text-align: right;
font-size: 18px;
font-weight: bold;
padding-right: 10px;
color: white;
}
body
{
background: #E8E8E8;
font-family: Lato,'Open Sans', sans-serif;
text-align: center;
}
.card-body
{
padding-left: 150px;
}
</style>
</head>
<body class="">
<img src="img/MIS logo7-small2-gs.png" class="logo" style="height:40px;">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-3">
<a class="navbar-brand" href="#"><img src="img/sony-logo.png" class="my-2
my-lg-0" style="width:200px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarColor02" aria-controls="navbarColor03" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<div class="collapse navbar-collapse" id="navb">
<ul class="navbar-nav mr-auto">
</ul>
<span class="navbar-brand"><h2 class="font-weight-bold" style="margin-
bottom: 0;text-shadow: 2px 2px black;"> SMT Internal RFA</h2></span>
</div>
</div>
</nav> <!-- navbar -->
<div class="containerWell">
<ul class="nav navbar-nav navbar-right">
Signed in as <?php echo $_SESSION['smtRequestForAction']
['user_name'];?><li> <a href=# onClick="pop()" id="logout"> Help </a> | <a
href="../../index.php" id="home"> Home </a>| <a href="../logout.php"
id="logout"> Logout</a></li>
</ul>
</div>
<br>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChartCategory);
google.charts.setOnLoadCallback(drawChartStatus);
google.charts.setOnLoadCallback(drawChartReason);
function drawChartCategory() {
var data = google.visualization.arrayToDataTable([
['Category', 'Total'],
<?php
while($row = odbc_fetch_array($result1))
{
echo "['".$row["category"]."', ".$row["Total"]."],";
}
?>
]);
var options = {
title: 'All tickets by Category',
width: 900,
height: 500,
backgroundColor: '#E8E8E8',
pieSliceText: 'value',
is3D: true
};
var chart = new
google.visualization.PieChart(document.getElementById('piechartCategory'));
chart.draw(data, options);
}
function drawChartStatus() {
var data = google.visualization.arrayToDataTable([
['Status', 'Total'],
<?php
while($row = odbc_fetch_array($result2))
{
echo "['".$row["status"]."', ".$row["Total"]."],";
}
?>
]);
var options = {
title: 'All tickets by Status',
width: 900,
height: 500,
backgroundColor: '#E8E8E8',
pieHole: 0.27,
animation: {
duration: 2000,
easing: 'in',
startup: true
}
};
var chart = new
google.visualization.PieChart(document.getElementById('piechartStatus'));
chart.draw(data, options);
}
function drawChartReason() {
var data = google.visualization.arrayToDataTable([
['Reason', 'Total'],
<?php
while($row = odbc_fetch_array($result3))
{
echo "['".$row["reason"]."', ".$row["Total"]."],";
}
?>
]);
var options = {
title: 'All tickets by Reason',
width: 900,
height: 500,
backgroundColor: '#E8E8E8'
};
var chart = new
google.visualization.ColumnChart(document.getElementById('columnchartReason')) ;
chart.draw(data, options);
}
</script>
<div class="container" id="containerChart" style="float:left;">
<div class="pieCharts" id="pieCharts" style="width:1500px;">
<div id="piechartCategory" style="width:50%; top:0px; float:left;">
</div>
<div id="piechartStatus" style="width:50%; top:0px; float:left;"></div>
</div>
<div class="pieCharts" id="pieCharts" style="width:1500px">
<div id="columnchartReason" style="width:50%; height:50%; top:0px;
display:inline-block;"></div>
</div>
</div>
</body>
</html>
这是控制台中错误的屏幕截图。
答案 0 :(得分:0)
您可以使用str_replace()
清除数据库记录产生的多余行,并且由于引用了this question,因此MySQL计数查询结果正在返回字符串,因此可以使用intval()来将$row['Total']
格式化为整数:
<?php
while($row = odbc_fetch_array($result1))
{
echo "['" . str_replace(array("\n", "\r"), '', $row["category"]) . "', " . intval($row["Total"]) . "],";
}
?>