0

/** 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
Add a Comment