Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia,
Tenho um exemplo de gráfico e gostaria de saber como eu passo valores vindo do banco para as variaveis do grafico (elas estao inseridas manualmente no arquivo) e eu gostaria de forma dinamica via PHP pegando do meu banco MySQL.
já pesquisei mas o que fiz não consegui puxar os valores, ate tentei colocar em session mas ai trouxe somente o ultimo valor e nao todos.
var $visitorsChart = $('#movimentacao')
var visitorsChart = new Chart($visitorsChart, {
data : {
labels : ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
datasets: [{
type : 'line',
data : [100, 120, 170, 167, 180, 177, 160],
backgroundColor : 'transparent',
borderColor : '#007bff',
pointBorderColor : '#007bff',
pointBackgroundColor: '#007bff',
fill : false
// pointHoverBackgroundColor: '#007bff',
// pointHoverBorderColor : '#007bff'
},
{
type : 'line',
data : [60, 80, 70, 67, 80, 77, 100],
backgroundColor : 'tansparent',
borderColor : '#ced4da',
pointBorderColor : '#ced4da',
pointBackgroundColor: '#ced4da',
fill : false
// pointHoverBackgroundColor: '#ced4da',
// pointHoverBorderColor : '#ced4da'
}]
},
meu PHP esta assim:
$busca = mysqli_query($con,"SELECT EXTRACT(MONTH FROM DATA) mes, SUM(quantidade) AS qtd FROM dosagem_usina WHERE operacao='saida' GROUP BY mes");Use com Ajax veja um exemplo que desenvolvi em meu sistema, podendo ser melhorado com tempo:
Essa consulta do banco de dados me retorna apenas uma linha com os valores descrito abaixo.
**********************************************************************
N_ANO N_CURSO | N_ETAPA N_DICIPLINA N_USUARIO *
2 5 14 19 4
**********************************************************************
var objdadosAdmin = function objdadosAdmin() {
var query = JSON.stringify({"query": "SELECT * FROM grafic_admin;"});
//chamada para receita do ano
var res = $.ajax({
type: 'POST',
url: "../views/webservice/list_json.php",
data: {"x": query},
dataType: 'html',
context: document.body,
global: false,
async: false,
success: function (data) {
return data;
}
}).responseText;
return JSON.parse(res);
};
var mainChart = new Chart($('#main-chart'),
{
type: 'bar',
data: {
labels: [
'Ano Letivo',
'Curso',
'Etapa',
'Diciplina',
'Usuário'
],
datasets: [
{
backgroundColor: hexToRgba(getStyle('--info'), 10),
borderColor: getStyle('--red'),
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [
objdadosAdmin()[0].N_ANO,
objdadosAdmin()[0].N_CURSO,
objdadosAdmin()[0].N_ETAPA,
objdadosAdmin()[0].N_DICIPLINA,
objdadosAdmin()[0].N_USUARIO
],
backgroundColor: [
getStyle('--red'),
getStyle('--blue'),
getStyle('--yellow'),
getStyle('--green'),
getStyle('--pink')
],
hoverBackgroundColor: [
getStyle('--red'),
getStyle('--blue'),
getStyle('--yellow'),
getStyle('--green'),
getStyle('--pink')
]
},
]
},
options: {
maintainAspectRatio: false,
legend: {
display: false,
position: 'left'
},
title: {
display: true,
text: 'Administração'
},
elements: {
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3
}
}
}
});
Bom dia.
Você deve fazer while da consulta e salvar os dados em variáveis. Depois listar as variáveis desejadas.
Talvez este vídeo possa te ajudar: vídeo