I have a link in a datatable that opens a bootstrap modal. In the modal I have a morris.js graph. I'm having troubles figuring out how to filter the dataset according to what link the user clicked on.
How do I read in the value of the where they click (e.g. Cluster1 or Cluster2 in this example). Pass that variable to the data pull script (e.g. cluster_pulse.php) and then into the SQL query within that script?
Thanks!!
Snip of the table:
<tr class="odd">
<td class="sorting_1">
<a href="#" data-toggle="modal" data-target="#clusterpulse">Cluster1</a></td>...
<a href="#" data-toggle="modal" data-target="#clusterpulse">Cluster2</a></td>...
The modal:
<div class="modal fade" id="clusterpulse" tabindex="-1" role="dialog"
aria-labelledby="clusterpulse" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Cluster Pulse</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-long-arrow-right"></i>Cluster Pulse</h3>
</div>
<div class="panel-body">
<div id="morris-chart-cluster-pulse"></div>
</div>
</div>
</div>
</div>
</div>
</div>
The js:
<script>
$('#clusterpulse').on('shown.bs.modal', function () {
$(function () {
$( "#morris-chart-cluster-pulse" ).empty();
// Create a Bar Chart with Morris
var chart = Morris.Line({
element: 'morris-chart-cluster-pulse',
d: [
{ d: '0', VSI: 0 }
],
xkey: 'd',
ykeys: ['test'],
labels: ['test'],
gridIntegers: true,
ymax: '1',
ymin: '0',
xLabelFormat: function(d) { return (d.getMonth()+1)+'/'+d.getDate();},
xLabels: "week"
});
// Fire off an AJAX request to load the data
$.ajax({
type: "GET",
dataType: 'json',
url: "../scripts/cluster_pulse.php", // This is the URL to the API
})
.done(function (data) {
// When the response to the AJAX request comes back render the chart with new data
chart.setData(data);
})
.fail(function () {
// If there is no communication between the server, show an error
alert("error occured");
});
});
});
Data pull script:
<?php
include("connect.php");
if( $conn === false ) {
echo "Could not connect.
";
die( print_r( sqlsrv_errors(), true));
}
/* Set up and execute the query. */
$sql = "SELECT d,test FROM <database> WHERE CLUSTER_NAME = '%$value%'
";
$stmt = sqlsrv_query( $conn, $sql);
do {
while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
$json[] = $row;
}
} while ( sqlsrv_next_result($stmt) );
foreach($json as &$each) {
// reassign "d" key to just the date (formatted), discard the rest
$each['d'] = date('Y-m-d', strtotime($each['d']));
}
echo json_encode($json);
?>