Olá,
Primeiramente vou dar uma breve introdução de como funciona o meu sistema para que vocês entendam exatamente a minha dificuldade. Talvez fique um pouco grande, me desculpe.
Dentro do meu sistema, quando o usuário se loga, é feita uma consulta no meu banco de dados por meio de requisição AJAX que filtra os dados e os retorna, preenchendo certas lacunas do conteúdo presente. Como no código abaixo, vejam os ids que são alterados pelos dados:
function inicializaDashboard(){
$.ajax({
url: 'datacenter/functions/inicializaDashboard.php',
async: true,
type: 'POST',
dataType: 'JSON',
data: {rede: '9999999', codLoja: '9999999', mes: '9999999'},
success: function(data){
//console.log(data);
$("#filtro-rede").text(data[0]['rede']);
$("#filtro-loja").text(data[0]['loja']);
$("#filtro-mes").text(data[0]['mesReferencia']);
$('#cpfsEnviados').text(data[0]['cpfsEnviados']);
$("#finalizadas").text(data[0]['propostasFinalizadas']);
$("#aprovadas").text(data[0]['propostasAprovadas']);
$("#indiceAprovacao").text(data[0]['indiceAprovacao']+'%');
$("#primeirasCompras").text(data[0]['primeirasCompras']);
$("#segurosQnt").text(data[0]['seguros']);
},
error: function(data){
console.log('Ocorreu um erro durante a execução do dashboard: '+ data);
}
});
}
E assim os dados são mostrados, mas caso o usuário queira visualizar dados mais específicos, ele parte para os seletores dropdowns que atuam da mesma forma, repondo os dados em questão:
$("#botao-filtrar").click(function(){
$(".mask-loading").fadeToggle(500);
$.ajax({
url: 'datacenter/functions/filtraDashboardGeral.php',
async: true,
type: 'POST',
dataType: 'JSON',
data: {rede: $("#dropdown-parceria").val(), codLoja: $("#dropdown-loja").val(), mes: $("#dropdown-mes").val()},
success: function(data){
//console.log(data);
$("#filtro-rede").text(data[0]['rede']);
$("#filtro-loja").text(data[0]['loja']);
$("#filtro-mes").text(data[0]['mesReferencia']);
$('#cpfsEnviados').text(data[0]['cpfsEnviados']);
$("#finalizadas").text(data[0]['propostasFinalizadas']);
$("#aprovadas").text(data[0]['propostasAprovadas']);
$("#indiceAprovacao").text(data[0]['indiceAprovacao']+'%');
$("#primeirasCompras").text(data[0]['primeirasCompras']);
$("#segurosQnt").text(data[0]['seguros']);
mascararFiltros();
$('#graficoBarra').replaceWith('<canvas id="graficoBarra"></canvas>');
$('#graficoLinha').replaceWith('<canvas id="graficoLinha"></canvas>');
gerarGraficos();
$(".mask-loading").fadeToggle(500);
},
error: function(){
alert('Ocorreu um erro durante o processamento dos filtros. Tente novamente!');
$(".mask-loading").fadeToggle(500);
}
});
});
O código se assemelha muito. E até aí tudo funciona perfeitamente, minha dificuldade é, tenho este código que me gera dois gráficos do chart.js:
//======================= INICIO GRAFICO BARRAS =====================================================================
var optionsBar = {
responsive: true
};
var dataBar = {
labels: ['Outubro', 'Novembro', 'Dezembro'],
datasets: [
{
label: "CPF's Enviados",
backgroundColor: "rgba(0,51,90,0.8)",
borderColor: "rgba(0,51,90,0.9)",
borderWidth: 2,
hoverBackgroundColor: "rgba(0,51,90,0.9)",
hoverBorderColor: "rgba(0,51,90,1)",
data: [100,200,350]
},
{
label: "Propostas Finalizadas",
backgroundColor: "rgba(0,130,229,0.8)",
borderColor: "rgba(0,130,229,0.9)",
borderWidth: 2,
hoverBackgroundColor: "rgba(0,130,229,0.9)",
hoverBorderColor: "rgba(0,130,229,1)",
data: [50,65,72]
},
{
label: "Propostas Aprovadas",
backgroundColor: "rgba(43,139,74,0.8)",
borderColor: "rgba(43,139,74,0.9)",
borderWidth: 2,
hoverBackgroundColor: "rgba(43,139,74,0.9)",
hoverBorderColor: "rgba(43,139,74,1)",
data: [25,35,63]
}
]
};
//======================= INICIO GRAFICO LINHAS =====================================================================
var optionsLine = {
responsive: true
};
var dataLine = {
labels: [<?=$mesReferencia?>],
datasets: [
{
label: "Finalizadas",
fill: false,
backgroundColor: "rgba(255,108,0,0.7)",
borderColor: "rgba(255,108,0,1)",
borderWidth: 4,
data: [50,65,72]
},
{
label: "Aprovadas",
fill: false,
backgroundColor: "rgba(255,246,0,0.6)",
borderColor: "rgba(255,246,0,1)",
borderWidth: 4,
data: [25,35,63]
}
]
};
//======================= FUNÇÃO GERA GRÁFICOS =====================================================================
function gerarGraficos(){
var ctx = document.getElementById("graficoBarra").getContext("2d");
var BarChart2 = new Chart(ctx, {
type: 'bar',
data: dataBar,
options: optionsBar
});
var ctx2 = document.getElementById("graficoLinha").getContext("2d");
var LineChart = new Chart(ctx2, {
type: 'line',
data: dataLine,
options: optionsLine
});
}
window.onload = gerarGraficos;
gerarGraficos();
Gostaria de saber como posso fazer para colocar por exemplo, os valores dentro de data['0']['cpfsEnviados] dentro de seu devido local dentro do data no script do meu gráfico. Notem que no meu success eu até coloquei um código para recalcular o canvas do gráfico para tentar visualizar alguma mudança, mas nada.
Alguma ideia, sugestão, solução?
Muito obrigado!