2

Estou preenchendo um ColumnChart com os dados trazidos do mysql, só que gostaria de colocar as colunas de cores diferentes, mais sem sucesso. Mostra as mesma cor nas duas colunas, como podem ver na imagem abaixo.

Já tentei: stackoverflow - Gerar cores diferentes Google Chart

inserir a descrição da imagem aqui

</body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.load("visualization", "1", {
        packages: ["corechart"]
    });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([

            ['Status', 'Total'],
            <?php 
            $solicitacoes = "SELECT * FROM view_count_solicitacoes";
            $result = mysqli_query($connProcessos, $solicitacoes);
            while($row = mysqli_fetch_assoc($result)) {

                echo "['".$row['status_nome']."',".$row['total']."],";
            }
            ?>
            ]);

        var options = {
            legend: {position: 'none'},
            series: {
                0: { color: '#e2431e' },
                1: { color: '#43459d' },
            }
        };
        var chart = new google.visualization.ColumnChart(document.getElementById("solicitacoes"));
        chart.draw(data, options);

        google.visualization.events.addListener(chart, 'select', function() {
            var row = chart.getSelection()[0].row;
            console.log(row);
            window.open('view-solicitacoes.php?id=' + row);
        });
    }
</script>
</html>
1
  • Consegue atualizar a pergunta e coloca essa parte da forma que o navegador gera, por exemplo aperta Ctrl + u e ache essa parte e atualiza a pergunta com ela. fica mais fácil de entender o que seu php está imprimindo.
    – Bulfaitelo
    Commented 6/03/2019 às 14:43

1 Resposta 1

2
+25

Dando uma pesquisa na documentação, encontrei algo que pode te ajudar.

Você também pode passar a cor da coluna dentro do método arrayToDataTable. Veja o exemplo abaixo, lendo os comentários:

var data = google.visualization.arrayToDataTable([
  // Note abaixo que defino um terceiro elemento dentro do array. Esse elemento
  // é essencial para que a biblioteca de gráficos entenda que queremos aplicar
  // um plano de fundo nas colunas que serão geradas no gráfico.
  ['Status', 'Total', { role: 'style' }],
  <?php 
    $solicitacoes = 'SELECT * FROM view_count_solicitacoes';
    $result = mysqli_query($connProcessos, $solicitacoes);

    while ($row = mysqli_fetch_assoc($result)) {
      // Note abaixo que criamos um array em JSON através do método json_encode.
      // O último valor desse array representa a cor da coluna. No exemplo,
      // assumi que você tem como recuperar esse valor do banco de dados. Caso
      // contrário, basta gerar um código hexadecimal aleatório dentro desse
      // bloco while.
      $array = json_encode([$row['status_nome'], $row['total'], $row['color']]);

      // Concatenamos o array gerado um uma vírgula:
      echo $array . ",";
    }
  ?>
])

Note que, conforme citei no comentário do código, estou capturando a cor por $row['color'], assumindo que você tem uma coluna na tabela view_count_solicitacoes especificando uma cor. Se você não desejar seguir essa abordagem, poderá simplesmente definir uma cor hexadecimal fixa dentro do bloco while, trocando $row['color'] pelo código da cor, como "#3399cc".

Para saber mais sobre como estilizar o seu gráfico, consulte a seção "colorindo colunas" da documentação referente ao gráfico de colunas.

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 .