1
On all the graphic systems I did, there was a page that took the database records 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 chart of that record would be, but to open a modal with his chart.
Except that I do not know how to generate a dynamic graph inside a modal for each record once this button that opens the modal is a button only that repeats for each record.
I looked in several places and didn’t quite understand how to do it. Does anyone know how to do or a cool source to learn?
Use bootstrap for the front and highcharts for the chart.
Here’s the code for the table in case anyone’s interested:
Results
//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>
When you click the button Edit or Graph, he should open the modal displaying the new page is this?
– WebCraft
The edit page redirects to another page, but this already works. The graph is different, it should open a modal with the graph inside. I’ll put another image.
– Mariana Bayonetta
You can use the
includephp to call one page inside another. See here more details https://answall.com/questions/265898/abram-pagina-html-no-modal/265913#265913– hugocsl
Aaaah, true, but I can open this page inside the modal using include? I tried to put a include there inside the modal but it didn’t work.
– Mariana Bayonetta
@Marianaferreira certainly! Look at this link of the answer, there is a Snipper with two Btns calling different modals each with a include inside. But for you to test it has to be on a local server like Xamp or Wamp, because you have to run PHP.
– hugocsl
So this is nice but the problem is that by doing this, every graph button I click will open the same graph and I need for each record to open the corresponding graph. I just can’t think of how I’m gonna do it.
– Mariana Bayonetta
Mariana, did you see that in the @hugoscl example, it makes two different modals? Very detailed.
– Wellington Telles Cunha
@Wellingtontellescunha exact! There I did exactly that, 2 btns where each one opens its modal retrospective with its respective include in. I’m not saying that this is the best way in the world, probably for large systems should not be, but depending on the case helps... It was worth the force!
– hugocsl
Yes, I saw it and I thought it was cool, but in this case it’s a button only that will be placed on the record side each time it restarts while so I have to be able to make a dynamic graph based on the record id.
– Mariana Bayonetta
Unfortunately some dynamic things I had to go to Javascript even not liking the idea.... there have to use ajax and so on goes...
– Wellington Telles Cunha
Um... And to know how to do it even using ajax I should ask a new question or just edit this same?
– Mariana Bayonetta
I think if you edit and it’s open for Javascript... add in the information and include in the search, that there are more java and javascript programmers than we
– Wellington Telles Cunha
It’s possible, of course. The modal is nothing more than an HTML hidden in the footer or header of your page, which is shown through a show / hide event via javascript or CSS. This does not stop someone putting dynamic data inside the body.
– Ivan Ferrer
– Ivan Ferrer
I’ll leave this question to talk about the modal and I’ll open a new one to talk about the graph.
– Mariana Bayonetta