Whats wrong with my code? Json read with php in html

I want to create a gauge indicator for my page. Im using the google chart API for that. I generate a json file and read it with php. Then i call the json data in my html with the php to change the value of the indicator but it doesn't change. I don't have problem with the php because the php throws me the data i need, the problem is running the html code. I think that the problem is the php url, im using Xampp with apache to generate the local host and open it in the browser, but im not sure.

I tried to change the url and port of php but still without change.

This is the HTML code:

google.charts.load('current', {
  'packages': ['gauge']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['BIEN', 0],
    ['ALERTA', 0],
    ['MAL', 0]
  ]);
  var options = {
    width: 700,
    height: 400,
    redFrom: 0,
    redTo: 20,
    yellowFrom: 20,
    yellowTo: 60,
    greenFrom: 60,
    greenTo: 100,
    minorTicks: 5
  };

  var chart = new google.visualization.Gauge(document.getElementById('Medidores'));

  chart.draw(data, options);

  setInterval(function() {
    var JSON = $.ajax({
      url: "http://localhost:80/PhpProject1/index.php?q=",
      dataType: 'json',
      async: false
    }).responseText;
    var Respuesta = jQuery.parseJSON(JSON);

    data.setValue(0, 1, Respuesta[0].bien);
    data.setValue(1, 1, Respuesta[0].alerta);
    data.setValue(2, 1, Respuesta[0].mal);
    chart.draw(data, options);
  }, 1300);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="Medidores"></div>

And the correct output from the php i need to read is this:

[{"mal":"12.00"}]