Uncaught SyntaxError: Invalid or unexpected token when using google chart

Question

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;">&nbsp; 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.

Answer 1

You could clean the extra line produced by the database record using str_replace() , and since referring to this question , that MySQL count query result is returning a string, you could use intval() to format the $row['Total'] as integer :

  <?php
  while($row = odbc_fetch_array($result1))
  {
       echo "['" . str_replace(array("\n", "\r"), '', $row["category"]) . "', " . intval($row["Total"]) . "],";
  }
  ?>

Uncaught SyntaxError: Invalid or unexpected token when using google chart

Question

1 answers

solution1
0 ACCPTED 2019-06-18 10:00:29

Uncaught SyntaxError: Invalid or unexpected token when using google chart

Question

1 answers

solution1 0 ACCPTED 2019-06-18 10:00:29

solution1
0 ACCPTED 2019-06-18 10:00:29