On all systems with graphics I did, there was a page that took the records from the database and displayed each record with a button that redirected to its particular chart page.
This time I wanted this button not to redirect to another page where the graph of that record would be, but open a modal with the graph of it.
I do not know how to generate a dynamic graph within a modal for each record since this button that opens the modal is a single button that repeats for each record.
I searched several places and did not quite understand how to do this. Does anyone know how to make or a cool source to learn?
Use bootstrap for the front and highcharts for the chart.
Here'sthetablecodeforanyoneinterested:
Results
//Pegandoosnomesdoscampos$num_fields=mysqli_num_fields($qry);//Obtémonúmerodecamposdoresultadofor($i=0;$i<$num_fields;$i++){//Pegaonomedoscampos$fields[]=mysqli_fetch_field_direct($qry,$i)->name;}//Montandoocabeçalhodatabela$table='<tableclass="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>