Graph that feeds on database data

Question

Graph that feeds on database data

Asked 6 years ago

Viewed 74 times

0

I have a system that shows a table that prints each record with a button on the side responsible for opening a modal.

I would like inside this modal to have a graph that compares the data of the record equivalent to the button clicked.

The problem is that, as you can see in the code, I only have a button with a modal that repeats to each line while there is registration, IE, I will also need a single graph that adapts depending on the record of the button clicked.

I believe I’ve already caught the ID from the button clicked, sent pro php and made the graph, the problem is that I do not even know how to put the graph inside the modal, who will say know how the modal will understand which is the ID of the record clicked and show the graph of that record.

But the problem is that some things from php are quite different from the python and I don’t master the php enough to do this.

In addition to that still have to put the graph in the modal and I have no idea how to do it.

Someone can show me how to do these things and if it works?

    <!-- 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>

As you can see, the ID is taken from the button clicked and then the graph is generated from that ID. The modal comes only after the graph generation.

1

If I were you I would do this: the ID part on the button is right. But I would do an AJAX on the server and search for the data you want to plot on the graph. This way it would be dynamic and you would separate HTML, JS and PHP. Each one doing its part.

– Diego Souza

2018/06/11 at 12:34
So the problem is I don’t know anything about ajax, and I don’t know where to start. My biggest doubt is that I already took the id of the button clicked and generated a graph for it, but how I will put it in the modal and it will show the graph of that button?

– Mariana Bayonetta

2018/06/11 at 12:38
Because, like, I just got the id on the button so I could generate the graph. But how to make the modal recognize which button it is and show the graph according to the id of that button, I have no idea how to do.

– Mariana Bayonetta

2018/06/11 at 12:39
1

Usually when I do something like, I click the button, put his ID in a field like Hidden. type="hidden" id="id-grafico". In the button click function you do this. Hence in the function that loads the graph, you take the value of this field Hidden.

– Diego Souza

2018/06/11 at 16:19
You managed to do something?

– Diego Souza

2018/06/12 at 11:35
No. I do not know how to proceed, I did what I could do and it resulted in what is there in the code. :/

– Mariana Bayonetta

2018/06/12 at 11:35
Let’s go continue this discussion in chat.

– Diego Souza

2018/06/12 at 11:37

Show 2 more comments

1 answer

Browser other questions tagged php javascript ajax highcharts graphic

You are not signed in. Login or sign up in order to post.

by Mariana Bayonetta • **869** points · Answer 1 · 2018-06-29T11:38:49+00:00

I solved the problem by making an Ajax page for the graphics page:

<?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
?>