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">×</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.
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.