1

Para estilização de uma página web, costumo usar os gráficos do highcharts com informações de um banco de dados mysql via php. Para quem não é familiarizado com o highcharts, eis abaixo um código simples de exemplo.

Highcharts.chart('minhadiv', {
chart: {
    type: 'bar'
},

xAxis: {
    categories: ['Categoria 1', 'Categoria 2', 'Categoria 3'],
},
series: [{
    name: 'Informação',
    data: [1, 2, 3]

}]
});

Esse código me retorna um gráfico assim: Gráfico Highcharts

Sempre faço a conexão php com o mysql dentro do campo data, obtendo sucesso. Abaixo segue o exemplo de uma conexão sql que já utilizei anteriormente:

data: [<?php
      $mysqli = new mysqli('servidor', 'usuario', 'senha', 'banco');
      $sql = $mysqli->query("SELECT minhacoluna from minhatabela");
                     ?>
                    <?php while ($result = mysqli_fetch_array($sql)) {?>
                      <?php echo $result["minhacoluna"]?>,

                    <?php } ?>],

O problema é que agora eu precisava fazer essa conexão sql tanto no campo data quanto no campo categories, visto que as categorias podem mudar conforme meu banco de dados. Ao tentar colocar um código php como o acima que normalmente uso, não obtive resultado. Como proceder neste caso?

1 Resposta 1

0

Você pode fazer assim para mostrar um gráfico com as categorias conforme está no banco de dados.

Registros no Banco de dados:

inserir a descrição da imagem aqui

Código em php para ser alimentado o gráfico:

$mysqli = new mysqli('servidor', 'usuario', 'senha', 'banco');


// Aqui você pode fazer um select alimentando normal uma váriavel com as categorias a ser exibida
$categories = array();


$sql = $mysqli->query("SELECT nome from categorias");
while ($result = mysqli_fetch_array($sql)) {
    $categories[] = $result['nome'];
}

// Select para pegar os dados da tabela
$sql = $mysqli->query("SELECT coluna, valor from grafico");

$valores = array();

// while dos registros alimentando um array
while ($result = mysqli_fetch_array($sql)) {
    $valores[$result['coluna']][] = floatval($result['valor']);
}

// aqui irá ser colocado a váriavel que foi alimentada por array no while acima
// para deixar no padrão que o highcharts reconhece
foreach($valores as $key => $value)
{
    $series[] = array('name' => utf8_encode($key), 'data' => array_values($value));
}   

Código em js do highcharts:

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Chart title'
    },
    xAxis: {
        categories: <?=json_encode($categories); ?> // Transforma array em json para mostrar as categorias
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: <?=json_encode($series); ?> // Transforma array em json para mostrar as informações do gráfico
});

Resultado:

inserir a descrição da imagem aqui

2
  • Mas as suas categorias continuam as que inseriu manualmente... (Categoria 1, Categoria 2 e Categoria 3). Quando tentei pegar direto do banco de dados não funcionou.
    – Renata
    29/05/2018 às 10:53
  • Alterei o código para pegar as categorias do banco de dados... Caso não funcione, poste o erro para conseguirmos te ajudar precisamente..
    – Piupz
    29/05/2018 às 11:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .