I'm doing a chart and I'm using Chart.js, PHP and jQuery. I was able to run with the correct information, but after a while it stops working and displays the following error:
Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>)
My index.php:
<!doctype html>
<html lang="pt-br">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Idade</title>
</head>
<body >
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="graficoIdade"></canvas>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script><scriptsrc="js/graficoIdade.js"></script>
</body>
</html>
My JS:
$(document).ready(function(){
$.post({
url:"graficos/gerarGraficoIdade.php",
method: "POST",
cache: false,
success: function(idades){
console.log(idades)
var nome = [];
var idade = [];
$.each(JSON.parse(idades), function(idx, obj){
nome.push([obj.nome]);
idade.push(obj.idade);
});
var ctx = document.getElementById("graficoIdade").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: nome,
datasets: [{
label: 'Idades',
data: idade,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
}
});
},
error: function() {
}
})
});
My PHP:
<?php
$conn = mysqli_connect(minhaconexao);
if (!$conn) {
die("Connection failed: " . $conn->error);
}
$idades = array();
$query = "meu select";
$result = mysqli_query($conn, $query);
while($idade = mysqli_fetch_assoc($result)){
array_push($idades, $idade);
}
mysqli_close($conn);
echo json_encode($idades);
Awesome because it works normally and simply out of nowhere it stops working.