-1
I have the code s following that works well
var ctx = $( "#myChart" );
var datasets =
[ {
label: "Gcéu 1",
data: [ {
x: "2019/03/01",
y: 20
}, {
x: "2019/03/02",
y: 10
}, {
x: "2019/03/05",
y: 5
} ]
} ,
{
label: "Gcéu 2",
data: [ {
x: "2019/03/01",
y: 15
}, {
x: "2019/03/03",
y: 10
}, {
x: "2019/03/10",
y: 2
} ]
} ,
{
label: "Gcéu 3",
data: [ {
x: "2019/03/07",
y: 7
}, {
x: "2019/03/08",
y: 8
}, {
x: "2019/03/19",
y: 9
} ]
} ];
var scatterChart = new Chart( ctx, {
type: 'line',
data: {
datasets: datasets
},
options: {
title: {
display: true,
text: 'Gráfico presenças dos Gcéus'
},
scales: {
yAxes: [
{
scaleLabel: {
display: true,
labelString: 'Presenças'
}
}],
xAxes: [
{
scaleLabel: {
display: true,
labelString: 'Datas'
},
type: 'time',
time: {
unit: 'day',
displayFormats: {
'day': 'DD/MM/YYYY',
}
},
ticks: {
source: 'data'
}
} ]
}
}
} );
<canvas id="myChart"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/pt-br.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
But the variable datasets above is static and I intend to pull from the database to generate the graph as below but is giving error:
//dataRelatorio vem do PHP e a saida é como a imagem abaixo um json
var dataRelatorio = window.dadosRel;
var ctx = $(".line-chart");
var dados = "[";
for (rel in dataRelatorio) {
dados += "{ 'label': 'Gcéu " + rel + "', 'data': [";
for (var i = 0; i < Object.keys(dataRelatorio).length; i++) {
dados += "{ 'x': '" + dataRelatorio[rel][i]['data'] + "', 'y': " + dataRelatorio[rel][i]['decisoes'] + "},";
}
dados = dados.substring(0, dados.length - 1);
dados += "]},";
};
dados += "]";
dados = dados.substring(0, dados.length - 1);
console.log(dados);
dados = JSON.parse(dados);
console.log(dados);
var scatterChart = new Chart( ctx, {
type: 'line',
data: {
datasets: [dados]
},
options: {
title: {
display: true,
text: 'Gráfico crescimento dos Gcéus'
},
scales: {
yAxes: [
{
scaleLabel: {
display: true,
labelString: 'Descisões no período)'
}
}],
xAxes: [
{
scaleLabel: {
display: true,
labelString: 'Datas'
},
type: 'time',
time: {
unit: 'day',
displayFormats: {
'day': 'DD/MM/YYYY',
}
},
ticks: {
source: 'data'
}
} ]
}
}
} );
});
<canvas class="line-chart"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/pt-br.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
That is the error:
Uncaught Syntaxerror: Unexpected token ' in JSON at position 2 at JSON.parse () At Htmlbuttonelement. (admin.php?reports&acao=celulas:243) At Htmldocument.Dispatch (jquery-2.1.4.min.js:3) At Htmldocument.r.Handle (jquery-2.1.4.min. js:3)
How to correct?
ADD:
Generating the array PHP
to send to $.ajax
:
$relatorioGr[$celulasReuniao->getIdCelula()][$i]["data"] = $celulasReuniao->getData();
$relatorioGr[$celulasReuniao->getIdCelula()][$i]["ofetas"] = $celulasReuniao->getOferta();
$relatorioGr[$celulasReuniao->getIdCelula()][$i]["decisoes"] = $celulasReuniao->getDecisoes();
Ajax:
$.ajax({
url: "_scripts/_php/_buscas/relatorioCelulas.php",
type: "POST",
dataType: "json",
data: {dados},
success: function (result) {
window.dadosRel = result.data;
}
});
Javascript does not allow line breaks in strings as you have in the question. And this JSON is an Array, but it is missing
[ ]
at the beginning and end of the string. Where this string comes from?– Sergio
ah Sm, I put break line just to be legible but the code is not like this, see the additional I put in the question. You’ve reached https://repl.it/@Carlosrocha1/Bewitchedboilingbase?
– Carlos Rocha
This link is missing
[]
around the JSON. You don’t need the lineJSON.parse(dados);
and lack value for the firsty
...– Sergio
I changed the question
– Carlos Rocha
You can place the lines of code where you receive the JSON from the server?
– Sergio
receive a js array. Added at the end of the question
– Carlos Rocha
In that case
window.dadosRel
is already an object/array, you should not use theJSON.parse()
.– Sergio