Em todos os sistemas com gráficos que eu fiz, existia uma página que pegava os registros do banco de dados e exibia cada registro com um botão que redirecionava para sua determinada página de gráfico.
Dessa vez eu queria que esse botão não redirecionasse para outra página onde estaria o gráfico daquele registro, mas abrisse um modal com o gráfico dele.
Só que eu não sei como fazer pra gerar um gráfico dinâmico dentro de um modal pra cada registro uma vez que esse botão que abre o modal é um botão só que se repete para cada registro.
Procurei em vários lugares e não entendi bem como fazer isso. Alguém sabe como fazer ou uma fonte legal pra aprender?
Uso bootstrap para o front e highcharts para o gráfico.
Aqui vai o código da tabela pra caso alguém se interesse:
Resultados
//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="edicao-gptw.php" method="post">';
$table .= '<input type="hidden" name="ID" value="'.$r['ID'].'">';
$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>';
// Adicionando botão de edição
$table .= '<td><form action="graf-gptw.php" method="post">';
$table .= '<input type="hidden" name="ID" value="'.$r['ID'].'">';
$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-primary" data-toggle="modal" data-target="#exampleModal">
Gráfico
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<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">
Aqui entra o gráfico
</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>
include
do php para chamar uma página dentro de outra. Veja aqui mais detalhes pt.stackoverflow.com/questions/265898/…