PHP e Gráficos Google Charts

Gráficos dinâmicos com PHP e Google Charts

Voltar

Regra de negócios

O exemplo a seguir listará a distribuição de carteiras de ações que um cliente investidor possui em seu perfil, de acordo com objetivo percentual definido respectivamente às mesmas. De acordo com a base de dados, cada carteira de ações possui ações vinculadas, e essas possuem quantidades de saldo, e um valor de cotação atual. O gráfico a seguir mostrará a distribuição do patrimônio atual que o cliente investidor possui, com relação à cada carteira de ações de seu perfil. Confira toda a Regra de Negócios e funcionamento no Github do projeto.

Google Charts Github do Projeto

Código PHP


1- Importar, no <head>, API Google Charts:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

2- Desenvolver <script> do gráfico:
<script type="text/javascript">
    google.charts.load("current", {packages: ["corechart"]} );
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        let data = google.visualization.arrayToDataTable([
            ['Objetivo', 'Part. Atual'],
            <?php
                //Consulta e cálculos na base de dados
                $r = $db->prepare("SELECT * FROM carteira WHERE cpfCliente=?");
                $r->execute(array($_SESSION['cpf']));
                $linhas = $r->fetchAll(PDO::FETCH_ASSOC);
                foreach ($linhas as $l) {
                    $patrAtualizado = 0;
                    $r = $db->prepare("SELECT * FROM carteira_acao WHERE idCarteira=?");
                    $r->execute(array($l['id']));
                    $linhas2 = $r->fetchAll(PDO::FETCH_ASSOC);
                    foreach ($linhas2 as $l2) {
                        $r = $db->prepare("SELECT * FROM acao WHERE ativo=?");
                        $r->execute(array($l2['ativoAcao']));
                        $linhas3 = $r->fetchAll(PDO::FETCH_ASSOC);
                        foreach ($linhas3 as $l3) {
                            $valorAcao = $l3['cotacaoAtual'] * $l2['qtdAcao'];
                            $patrAtualizado += $valorAcao;
                        }
                    }
                    if ($totalCarteiras == 0) {$partAtual = 0;}
                    else {$partAtual = ($patrAtualizado * 100) / $totalCarteiras;}

                    //Linha do gráfico
                    echo "['" . $l['objetivo'] . "', " . $partAtual . "],";
                }
            ?>
        ]);
        let options = {title: 'Participação Atual em Carteiras', pieHole: 0.4};
        let chart = new google.visualization.PieChart(document.getElementById('graficoDonutUBSocial'));
        chart.draw(data, options);
    }
</script>

3- Mostrar gráfico:
<div id="graficoDonutUBSocial" style="width: 700px; height: 500px; margin: auto;"></div>

Exemplo visual

Código do gráfico: Acesse