I have a dashboard which uses google charts to display 2 pie charts, and a column chart, based on tickets raised by a user. Yesterday they were working fine, but this morning they are no longer loading.
After a bit of investigation, I found the issue is to do with my column chart, when I check the console I get the following error:
Uncaught SyntaxError: Invalid or unexpected token.
Digging a little deeper the error comes on line 192 of my code where I echo the 'reason' into the chart. 'reason' is a column name in my SQL table.
$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>
Here is a screenshot of the error in my console.
echo "['".$row["reason"]."', ".$row["Total"]."],";doecho json_encode([$row['reason'], $row['Total']]).',';-- this will make sure your generated JS code is valid with any input. To improve performance (if you feel like it matters), you can prepare complete data structure first, and then do singlejson_encodecall. - alx