Chart not displaying from JSON data

Question

UPDATED: I am tying to use ChartJS to display a chart on a web page using data from a Microsoft SQL Server database. I have got the data to output onto a page in JSON format, however I am unable to transfer the JSON data onto my chart. When trying to do so, the chart does not display at all but returns a blank white page.

I have tried creating the graph by adding data directly to it, that works and displays the graph with the data. The problem I am facing is when trying the load the graph using data from JSON, it does not display the graph at all. The JSON data does not display in my browser console either. The JSON data however, does show when loading data.php file onto a webpage (for testing). See screenshot below of this:

https://i.sstatic.net/DMULR.jpg

I have just removed the following line of code

else { // if connected successfully
echo "Connected successfully";
}

which was being added to JSON. After removing that line, I now get errors in my browser console when trying to load the graph. See screenshot here:

https://i.sstatic.net/IPmwU.jpg

I have replaced the JQuery script to the latest version however same problem. Any suggestions please?

Below is data.php

<?php
  header('Content-Type: application/json');
  $serverName = "******"; 
  $connectionInfo = array(
    "Database" => "****", // database name
    "UID" => "****", // username
    "PWD" => "****"  // password
  );

  $conn = sqlsrv_connect($serverName, $connectionInfo);


  //if not connected successfully
  if (!$conn)  {
    die("Connection error: " . mysqli_connect_error());
  } else { // if connected successfully
    echo "Connected successfully";
  }


  $sql = "SELECT Name, TestID FROM Testtable"; //create select statement
  $result = sqlsrv_query($conn, $sql); // execute select query from database
  $data = array(); 

  while ($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
    $data[] = $row; //add results to data array
  }

  sqlsrv_free_stmt($result); //free result entry
  sqlsrv_close($conn); // close connection
  echo json_encode($data); //encode data to JSON
?>

Below is app.js

$(document).ready(function(){
   $.ajax({
     url: "http://localhost/chartjs/data.php",
     method: "GET",
     success: function(data) {
        data = JSON.parse(data);
        console.log(data);
        var name = [];
        var testid = [];

        for(var i in data) {
           name.push("Name " + data[i].Name);
           testid.push(data[i].TestID);
           console.log(data);
        }

        var chartdata = {
          labels: name,
          datasets : [{
             label: 'Name and TestIDs',
             backgroundColor: 'rgba(200, 200, 200, 0.75)',
             borderColor: 'rgba(200, 200, 200, 0.75)',
             hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
             hoverBorderColor: 'rgba(200, 200, 200, 1)',
             data: testid
          }]
        };

        var ctx = $("#mycanvas");

        var barGraph = new Chart(ctx, {
           type: 'bar',
           data: chartdata
        });
     },
     error: function(data) {
        console.log(data);
     }
  });
});

I require the JSON data to be outputted to my chart and chart to be displayed.

Currently, the chart is not displaying.

JSON data is not being outputted to my browser console also.

Answer 1

The issue has been resolved by removing the following line of code from app.php:

data = JSON.parse(data);