0

Tenho um sistema que mostra uma tabela que imprime cada registro com um botão ao lado responsável por abrir um modal.

Gostaria que dentro desse modal tivesse um gráfico que compara os dados do registro equivalente ao botão clicado.

O problema é que, como vocês poderão ver no código, eu só tenho um botão com um modal que se repete a cada linha enquanto houver registro, ou seja, também vou precisar de um só gráfico que se adapte dependendo do registro do botão clicado.

Eu acredito que já tenha pego o ID do botão clicado, mandado pro php e feito o gráfico, o problema é que eu não sei nem como colocar o gráfico dentro do modal, quem dirá saber como o modal vai entender qual é o ID do registro clicado e mostrar o gráfico daquele registro.

Mas o problema é que algumas coisas do php são bem diferentes do python e eu não domino o php suficiente pra fazer isso.

Além disso ainda tem que colocar o gráfico no modal e eu não tenho a menor ideia de como fazer isso.

Alguém pode me mostrar como fazer essas coisas e se isso dá certo?

    <!-- Main -->
    <div class="content-lg container">
        <div class="row margin-b-20">
            <div class="col-sm-6">
                <h2>Resultados</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 sm-margin-b-50">

                <script type="text/javascript">
                    //Pegar o ID do botão clicado 
                    function abreModal (idR)
                    {
                        $.post("/Teste_Obeya/ajax.php", 
                        { id : idR }, function(content){
                            $(".modal-body").html(content); 
                        }, 'html');
                    }
                </script>


                        <?php

                        require 'conn.php';

                        //Conexão e consulta ao Mysql
                        $qry = mysqli_query($lnk, "select * from qualite");

                        //Pegando os nomes dos campos
                        $num_fields = mysqli_num_fields($qry);//Obtém o número de campos do resultado

                        for($i = 0;$i<$num_fields; $i++){//Pega o nome dos campos
                            $fields[] = mysqli_fetch_field_direct($qry,$i)->name;
                        }

                        //Montando o cabeçalho da tabela
                        $table = '<table class="table table-hover table-inverse"> <tr style="">';

                        for($i = 0;$i < $num_fields; $i++){
                            $table .= '<th>'.$fields[$i].'</th>';
                        }

                        //Montando o corpo da tabela
                        $table .= '<tbody >';
                        while($r = mysqli_fetch_array($qry)){
                            $table .= '<tr>';
                            for($i = 0;$i < $num_fields; $i++){
                                $table .= '<td>'.$r[$fields[$i]].'</td>';
                            }

                            // Adicionando botão de edição

                            $table .= '<td><form action="qualite-edicao.php" method="post">'; 
                            $table .= '<input type="hidden" name="ID" value="'.$r['ID'].'">';
                            $table .= '<input type="hidden" name="KPI" value="'.$r['KPI'].'">';
                            $table .= '<input type="hidden" name="PILOTE" value="'.$r['PILOTE'].'">';
                            $table .= '<input type="hidden" name="JAN PREV" value="'.$r['JAN_PREV'].'">';
                            $table .= '<input type="hidden" name="JAN REAL" value="'.$r['JAN_REAL'].'">';
                            $table .= '<input type="hidden" name="FEV PREV" value="'.$r['FEV_PREV'].'">';
                            $table .= '<input type="hidden" name="FEV REAL" value="'.$r['FEV_REAL'].'">';
                            $table .= '<input type="hidden" name="MAR PREV" value="'.$r['MAR_PREV'].'">';
                            $table .= '<input type="hidden" name="MAR REAL" value="'.$r['MAR_REAL'].'">';
                            $table .= '<input type="hidden" name="ABR PREV" value="'.$r['ABR_PREV'].'">';
                            $table .= '<input type="hidden" name="ABR REAL" value="'.$r['ABR_REAL'].'">';
                            $table .= '<input type="hidden" name="MAI PREV" value="'.$r['MAI_PREV'].'">';
                            $table .= '<input type="hidden" name="MAI REAL" value="'.$r['MAI_REAL'].'">';
                            $table .= '<input type="hidden" name="JUN PREV" value="'.$r['JUN_PREV'].'">';
                            $table .= '<input type="hidden" name="JUN REAL" value="'.$r['JUN_REAL'].'">';
                            $table .= '<input type="hidden" name="JUL PREV" value="'.$r['JUL_PREV'].'">';
                            $table .= '<input type="hidden" name="JUL REAL" value="'.$r['JUL_REAL'].'">';
                            $table .= '<input type="hidden" name="AGO PREV" value="'.$r['AGO_PREV'].'">';
                            $table .= '<input type="hidden" name="AGO REAL" value="'.$r['AGO_REAL'].'">';
                            $table .= '<input type="hidden" name="SET PREV" value="'.$r['SET_PREV'].'">';
                            $table .= '<input type="hidden" name="SET REAL" value="'.$r['SET_REAL'].'">';
                            $table .= '<input type="hidden" name="OUT PREV" value="'.$r['OUT_PREV'].'">';
                            $table .= '<input type="hidden" name="OUT REAL" value="'.$r['OUT_REAL'].'">';
                            $table .= '<input type="hidden" name="NOV PREV" value="'.$r['NOV_PREV'].'">';
                            $table .= '<input type="hidden" name="NOV REAL" value="'.$r['NOV_REAL'].'">';
                            $table .= '<input type="hidden" name="DEZ PREV" value="'.$r['DEZ_PREV'].'">';
                            $table .= '<input type="hidden" name="DEZ REAL" value="'.$r['DEZ_REAL'].'">';
                            $table .= '<button class="btn btn-primary"><i class="fa fa-calendar-o" aria-hidden="true"></i></i> Editar </i></button>'; //
                            $table .= '</form></td>';



                            //MODAL COM O GRÁFICO
                            $table .= '<td><form action="graf-qualite.php" method="post">'; 
                            $table .= '<input type="hidden" name="ID" value="'.$r['ID'].'">';
                            $table .= '<input type="hidden" name="KPI" value="'.$r['KPI'].'">';
                            $table .= '<input type="hidden" name="PILOTE" value="'.$r['PILOTE'].'">';
                            $table .= '<input type="hidden" name="JAN PREV" value="'.$r['JAN PREV'].'">';
                            $table .= '<input type="hidden" name="JAN REAL" value="'.$r['JAN REAL'].'">';
                            $table .= '<input type="hidden" name="FEV PREV" value="'.$r['FEV PREV'].'">';
                            $table .= '<input type="hidden" name="FEV REAL" value="'.$r['FEV REAL'].'">';
                            $table .= '<input type="hidden" name="MAR PREV" value="'.$r['MAR PREV'].'">';
                            $table .= '<input type="hidden" name="MAR REAL" value="'.$r['MAR REAL'].'">';
                            $table .= '<input type="hidden" name="ABR PREV" value="'.$r['ABR PREV'].'">';
                            $table .= '<input type="hidden" name="ABR REAL" value="'.$r['ABR REAL'].'">';
                            $table .= '<input type="hidden" name="MAI PREV" value="'.$r['MAI PREV'].'">';
                            $table .= '<input type="hidden" name="MAI REAL" value="'.$r['MAI REAL'].'">';
                            $table .= '<input type="hidden" name="JUN PREV" value="'.$r['JUN PREV'].'">';
                            $table .= '<input type="hidden" name="JUN REAL" value="'.$r['JUN REAL'].'">';
                            $table .= '<input type="hidden" name="JUL PREV" value="'.$r['JUL PREV'].'">';
                            $table .= '<input type="hidden" name="JUL REAL" value="'.$r['JUL REAL'].'">';
                            $table .= '<input type="hidden" name="AGO PREV" value="'.$r['AGO PREV'].'">';
                            $table .= '<input type="hidden" name="AGO REAL" value="'.$r['AGO REAL'].'">';
                            $table .= '<input type="hidden" name="SET PREV" value="'.$r['SET PREV'].'">';
                            $table .= '<input type="hidden" name="SET REAL" value="'.$r['SET REAL'].'">';
                            $table .= '<input type="hidden" name="OUT PREV" value="'.$r['OUT PREV'].'">';
                            $table .= '<input type="hidden" name="OUT REAL" value="'.$r['OUT REAL'].'">';
                            $table .= '<input type="hidden" name="NOV PREV" value="'.$r['NOV PREV'].'">';
                            $table .= '<input type="hidden" name="NOV REAL" value="'.$r['NOV REAL'].'">';
                            $table .= '<input type="hidden" name="DEZ PREV" value="'.$r['DEZ PREV'].'">';
                            $table .= '<input type="hidden" name="DEZ REAL" value="'.$r['DEZ REAL'].'">';
                            $table .= '<!-- Button -->
                                        <button type="button" class="btn btn-danger button" data-toggle="modal" data-target="#exampleModal" name="button" onclick="abreModal(' . $r['ID'] .');">
                                          Gráfico
                                        </button>

                                        <!-- Modal -->

                                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" onload="click("button");">
                                          <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                              <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Gráfico</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                  <span aria-hidden="true">&times;</span>
                                                </button>
                                                </div>
                                                <div class="modal-body">


                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                </div>
                                            </div>
                                          </div>
                                        </div>'; //
                            $table .= '</form></td>';

                        }

                        //Finalizando a tabela
                        $table .= '</tbody></table>';


                        //Imprimindo a tabela
                        echo '<div class="table-table" style="overflow-x:auto;">';
                        echo $table;
                ?>

                </div>
            </div>
            <div class="col-sm-4 col-sm-offset-1">
                <!--<img class="img-responsive" src="img/640x380/01.jpg" alt="Our Office">-->
            </div>
        </div>
    </div>

Como podem ver, o ID é pego do botão clicado e depois o gráfico é gerado a partir daquele ID. O modal vem só depois da geração do gráfico.

inserir a descrição da imagem aqui

7
  • 1
    Se eu fosse você faria assim: a parte do ID no botão está certa. Mas eu faria um AJAX no servidor e buscava os dados que você quer plotar no gráfico. Dessa forma seria dinâmico e você separaria HTML, JS e PHP. Cada um fazendo sua parte. 11/06/2018 às 12:34
  • Então, o problema é que eu não entendo nada de ajax, nem sei por onde começar. A minha maior dúvida é que eu já peguei o id do botão clicado e gerei um gráfico pra ele, mas como eu vou colocar ele no modal e ele vai mostrar o gráfico daquele botão? 11/06/2018 às 12:38
  • Porque tipo, eu só peguei o id do botão pra conseguir gerar o gráfico. Mas como fazer o modal reconhecer qual botão que é e mostrar o gráfico de acordo com o id daquele botão, eu não faço a menor ideia de como fazer. 11/06/2018 às 12:39
  • 1
    Geralmente quando eu faço algo do tipo, eu clico no botão, coloco o ID dele em um campo tipo hidden. type="hidden" id="id-grafico". Na função de clique do botão você faz isso. Daí na função que carrega o gráfico, você pega o valor desse campo hidden. 11/06/2018 às 16:19
  • Você conseguiu fazer algo? 12/06/2018 às 11:35

1 Resposta 1

0

Resolvi o problema fazendo uma página Ajax para a página de gráficos:

<?php 
error_reporting(E_ALL);
ini_set('display_errors', 1);

include("conn.php");

    if(isset($_POST['id']))
    {

        $id = $_POST['id'];

        $PREV = mysqli_query($lnk, "Select JAN_PREV, FEV_PREV, MAR_PREV, ABR_PREV, MAI_PREV, JUN_PREV, JUL_PREV, AGO_PREV, SET_PREV, OUT_PREV, NOV_PREV, DEZ_PREV from qualite where ID = ". $id . "");
        $REAL = mysqli_query($lnk, "Select JAN_REAL, FEV_REAL, MAR_REAL, ABR_REAL, MAI_REAL, JUN_REAL, JUL_REAL, AGO_REAL, SET_REAL, OUT_REAL, NOV_REAL, DEZ_REAL from qualite where ID = ". $id ."");


        $resultPREV = mysqli_fetch_assoc($PREV);

        $resultREAL = mysqli_fetch_assoc($REAL);

            $ListaP = $resultPREV; 
            $ListaR = $resultREAL; 
            $ListaPTotal = array();
            $ListaRTotal = array();

            foreach ($ListaP as $i => $value) {
                array_push($ListaPTotal, $value);
            }

            foreach ($ListaR as $i => $value) {
                array_push($ListaRTotal, $value);
            }


    }   

    $html2 = "
     <div id='container-tt' style='min-width: 310px; height: 400px; margin: 0 auto'></div>

        <script type='text/javascript'>
    Highcharts.chart('container-tt', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'OBEYA DOPM 2018'
    },
    xAxis: {
        categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {

        }
    },
    tooltip: {

        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Previsto',
        data: [" . join(", ", $ListaPTotal) . "]

    }, {
        name: 'Realizado',
        data: [" .  join(", ", $ListaRTotal) . "]

    }]
});
        </script>
        </div>";

    echo $html2;

    //erro no php
?>

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 .