/** Patient Blood Pressure Tracker **/
add_shortcode( 'bp-tracker', 'bp_tracker' );
function bp_tracker( $atts ) {
ob_start();
$custompatient = '';
if( false !== get_query_var( 'custompatient', false ) ){
$custompatient = get_query_var( 'custompatient' );
}
if($custompatient!=''){
global $wpdb;
$post_id = $wpdb->get_var( $wpdb->prepare( "SELECT ID FROM $wpdb->posts WHERE post_name = %s AND post_type='patients'", $custompatient ));
} ?>
<div class="bp-tracker-form">
<?php echo do_shortcode('[gravityforms id="2" field_values="patient_id='.$post_id.'" ajax="false"]'); ?>
</div>
<?php
$args = array(
'p' => $post_id, // ID of a page, post, or custom type
'post_type' => 'patients'
);
$query = new WP_Query($args);
if ( $query->have_posts() ) { ?>
<?php while ( $query->have_posts() ) : $query->the_post(); global $post; ?>
<?php if( have_rows('bp_ratings') ):
$count = 1;
//this is for the graph
$dateGraph = array();
$bpGraphHigh = array();
$bpGraphLow = array();
$counttotal = count(get_field('bp_ratings'));
?>
<div class="patient-bp-tracker">
<table>
<tr><th>Date</th><th>Time</th><th>Blood Pressure</th><th>Delete Data</th></tr>
<?php while( have_rows('bp_ratings') ): the_row();
// vars
$date = get_sub_field('date');
array_push($dateGraph,$date);
$time = get_sub_field('time');
$blood_pressure = get_sub_field('blood_pressure');
$blood_pressure_with_unit = $blood_pressure.' mmHg';
$blood_pressure_high_low = preg_split("/\//", $blood_pressure);
array_push($bpGraphHigh,$blood_pressure_high_low[0]);
array_push($bpGraphLow,$blood_pressure_high_low[1]);
$date_now = date("Y-m-d");
$date2 = $date;
//if($date_now>$date2){
$values_pressure[] = array(
'date' => date("Y,m,d", strtotime($date. ' - 1 month')),
'high' => $blood_pressure_high_low[0],
'low' => $blood_pressure_high_low[1],
);
//echo $count.'-'. date("Y,m,d", strtotime($date. ' - 1 month')).'<br>';
//}
?>
<tr><td><?php echo $date; ?></td><td><?php echo $time; ?></td><td><?php echo $blood_pressure_with_unit; ?></td><td><a class="delete" href="<?php echo admin_url('admin-ajax.php'); ?>?action=delete_data&row=<?php echo $count; ?>&patient_id=<?php echo $post_id; ?>">Delete</a></td></tr>
<?php $count++; endwhile; ?>
</table>
</div>
<div id="update-nav">
<div id="range-selector">
<input type="button" id="1m" class="period ui-button" value="1m" />
<input type="button" id="3m" class="period ui-button" value="3m"/>
<input type="button" id="6m" class="period ui-button" value="6m"/>
<input type="button" id="1y" class="period ui-button" value="1y"/>
<input type="button" id="all" class="period ui-button" value="All"/>
</div>
</div>
<br/>
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
<!--Chart JS-->
<div class="box_msg">
<span>Systolic</span> <span>Diastolic</span>
</div>
<!--Chart JS-->
<?php endif; ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
var dps = [];
var chart = new CanvasJS.Chart("chartContainer",
{
animationEnabled: true,
legend:{
cursor: "pointer",
fontSize: 16,
itemclick: toggleDataSeries
},
toolTip:{
shared: true
},
data: [
{
name: "Diastolic",
type: "spline",
showInLegend: true,
dataPoints: [
<?php
foreach ($values_pressure as $value_pressure) {?>
{ x: new Date(<?php echo $value_pressure['date'];?>), y: <?php echo $value_pressure['low'];?> },
<?php } ?>
],
},{
name: "Systolic",
type: "spline",
showInLegend: true,
dataPoints: [
<?php
foreach ($values_pressure as $value_pressure) {?>
{ x: new Date(<?php echo $value_pressure['date'];?>), y: <?php echo $value_pressure['high'];?> },
<?php } ?>
]
},
]
});
chart.render();
var axisXMin = chart.axisX[0].get("minimum");
var axisXMax = chart.axisX[0].get("maximum");
function randomData(startX, numberOfY){
var xValue, yValue = 0;
for (var i = 0; i < 400; i += 1) {
xValue = new Date(startX.getTime() + (i 24 60 60 1000));
yValue += (Math.random() * 10 - 5) << 0;
dps.push({
x: xValue,
y: yValue
});
}
return dps;
}
function toggleDataSeries(e){
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else{
e.dataSeries.visible = true;
}
chart.render();
}
jQuery( function($) {
$("#fromDate").val(CanvasJS.formatDate(axisXMin, "DD MMM YYYY"));
$("#toDate").val(CanvasJS.formatDate(axisXMax, "DD MMM YYYY"));
$("#fromDate").datepicker({dateFormat: "d M yy"});
$("#toDate").datepicker({dateFormat: "d M yy"});
});
jQuery("#date-selector").change( function($) {
var minValue = $( "#fromDate" ).val();
var maxValue = $ ( "#toDate" ).val();
if(new Date(minValue).getTime() < new Date(maxValue).getTime()){
chart.axisX[0].set("minimum", new Date(minValue));
chart.axisX[0].set("maximum", new Date(maxValue));
}
});
jQuery(".period").click( function() {
var period = this.id;
var minValue;
minValue = new Date(axisXMax);
switch(period){
case "1m":
minValue.setMonth(minValue.getMonth() - 1);
break;
case "3m":
minValue.setMonth(minValue.getMonth() - 3);
break;
case "6m":
minValue.setMonth(minValue.getMonth() - 6);
break;
case "1y":
minValue.setYear(minValue.getFullYear() - 1);
break;
default:
minValue = axisXMin;
}
chart.axisX[0].set("minimum", new Date(minValue));
chart.axisX[0].set("maximum", new Date(axisXMax));
});
</script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [<?php echo '"'.implode('","', $dateGraph).'"' ?>],
datasets: [{
label: 'High',
data: [<?php echo '"'.implode('","', $bpGraphHigh).'"' ?>], // Specify the data values array
fill: false,
borderColor: '#EF333E', // Add custom color border (Line)
backgroundColor: '#EF333E', // Add custom color background (Points and Fill)
borderWidth: 5 // Specify bar border width
},
{
label: 'Low',
data: [<?php echo '"'.implode('","', $bpGraphLow).'"' ?>], // Specify the data values array
fill: false,
borderColor: '#2196f3', // Add custom color border (Line)
backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
borderWidth: 5 // Specify bar border width
}]
},
options: {
spanGaps: true,
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height
plugins: {
legend: {
position: 'bottom',
align: 'start'
}
},
scales: {
x: {
max: <?php if($counttotal>=29){?> 29 <?php }else{ echo $counttotal;}?>
}
}
}
});
</script>
<style>
.patient-bp-graph {
margin-top: 60px;
}
</style>
<?php $pbp = ob_get_clean();
return $pbp;
}
}
Jagdish Sarma Asked question September 17, 2021
Write your answer.