Grafico Bootstrap+PHP

[Diego-SLP 0]

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");

 

[manolegal 12]

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

[lordzyrium 0]

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
                    }
                }
            }
        });