[[static_dashboard_header.html]]

<script type="application/javascript">
  function barchart() {
    // Set new default font family and font color to mimic Bootstrap's default styling
    Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
    Chart.defaults.global.defaultFontColor = '#292b2c';

    // Bar Chart Example
    var ctx = document.getElementById("myBarChart");
    var myLineChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["January", "February", "March", "April", "May", "June"],
        datasets: [{
          label: "Revenue",
          backgroundColor: "rgba(2,117,216,1)",
          borderColor: "rgba(2,117,216,1)",
          data: [4215, 5312, 6251, 7841, 9821, 14984],
        }],
      },
      options: {
        scales: {
          xAxes: [{
            time: {
              unit: 'month'
            },
            gridLines: {
              display: false
            },
            ticks: {
              maxTicksLimit: 6
            }
          }],
          yAxes: [{
            ticks: {
              min: 0,
              max: 15000,
              maxTicksLimit: 5
            },
            gridLines: {
              display: true
            }
          }],
        },
        legend: {
          display: false
        }
      }
    });
  }
</script>

<script>
  function piechart(){
    //pie
    var ctxP = document.getElementById("pieChart").getContext('2d');
    var myPieChart = new Chart(ctxP, {
      type: 'pie',
      data: {
        labels: ["Diabetes Club", "Seniors Club", "Kids Club"],
        datasets: [{
          data: [300, 50, 100],
          backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C"],
          hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870"]
        }]
      },
      options: {
        responsive: true
      }
    });
  }

  function piechartOne(){
    //pie
    var ctxP = document.getElementById("pieChartOne").getContext('2d');
    var myPieChart = new Chart(ctxP, {
      type: 'pie',
      data: {
        labels: ["0-18", "19-30", "30-50", "51-70", "70-100" ],
        datasets: [{
          data: [5, 6, 8, 10, 12],
          backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
          hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
        }]
      },
      options: {
        responsive: true
      }
    });
  }

  function piechartTwo(){
    //pie
    var ctxP = document.getElementById("pieChartTwo").getContext('2d');
    var myPieChart = new Chart(ctxP, {
      type: 'pie',
      data: {
        labels: ["Asian", "Black", "Hispanic", "Caucasian" ],
        datasets: [{
          data: [5, 6, 8, 10],
          backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1"],
          hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5"]
        }]
      },
      options: {
        responsive: true
      }
    });
  }

  function piechartThree(){
    //pie
    var ctxP = document.getElementById("pieChartThree").getContext('2d');
    var myPieChart = new Chart(ctxP, {
      type: 'pie',
      data: {
        labels: ["Male", "Female"],
        datasets: [{
          data: [5, 6],
          backgroundColor: ["#F7464A", "#46BFBD"],
          hoverBackgroundColor: ["#FF5A5E", "#5AD3D1"]
        }]
      },
      options: {
        responsive: true
      }
    });
  }
  function areachart() {
    // Set new default font family and font color to mimic Bootstrap's default styling
    Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
    Chart.defaults.global.defaultFontColor = '#292b2c';

    // Area Chart Example
    var ctx = document.getElementById("myAreaChart");
    var myLineChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ["Mar 1", "Mar 2", "Mar 3", "Mar 4", "Mar 5", "Mar 6", "Mar 7", "Mar 8", "Mar 9", "Mar 10", "Mar 11", "Mar 12", "Mar 13"],
        datasets: [{
          label: "# of Rx's",
          lineTension: 0.3,
          backgroundColor: "rgba(2,117,216,0.2)",
          borderColor: "rgba(2,117,216,1)",
          pointRadius: 5,
          pointBackgroundColor: "rgba(2,117,216,1)",
          pointBorderColor: "rgba(255,255,255,0.8)",
          pointHoverRadius: 5,
          pointHoverBackgroundColor: "rgba(2,117,216,1)",
          pointHitRadius: 50,
          pointBorderWidth: 2,
          data: [10000, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 24159, 32651, 31984, 38451],
        }],
      },
      options: {
        scales: {
          xAxes: [{
            time: {
              unit: 'date'
            },
            gridLines: {
              display: false
            },
            ticks: {
              maxTicksLimit: 7
            }
          }],
          yAxes: [{
            ticks: {
              min: 0,
              max: 40000,
              maxTicksLimit: 5
            },
            gridLines: {
              color: "rgba(0, 0, 0, .125)",
            }
          }],
        },
        legend: {
          display: false
        }
      }
    });
  }

</script>
<div id="layoutSidenav_content">
  <main>
    <div class="container-fluid px-4">
      <h1 class="mt-4">Rx's By Patients</h1>
      <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item active"> Date: $today </li>
      </ol>


      <!-- header -->
      <div class="card mb-4">
        <div class="card-header">
          <h3> Date Range of # of Rx's Filled</h3>
        </div>
        <label>Start Date</label>
        <input type="date" class="form-group" >

        <label>End Date</label>
        <input type="date" class="form-group"><br><br>
        <button>UPDATE DATE RANGE</button>
        <br><br>
      </div>

      <div class="row">

        <div class="row">
          <div class="card mb-4">
            <div class="card-header">
              <i class="fas fa-chart-area me-1"></i>
              Age Demographics
            </div>
            <div class="card-body"><canvas id="pieChartOne" width="100%" height="40"></canvas></div>
          </div>
</div>
        <div class="row">
          <div class="col-xl-3 col-md-6">
            <div class="card bg-success text-white mb-4">
              <div class="card-body">Average: 18 yrs</div>
              <div class="card-footer d-flex align-items-center justify-content-between">
                <div class="small text-white"><i class="fas fa-angle-right"></i></div>
              </div>
            </div>
          </div>

          <div class="col-xl-3 col-md-6">
            <div class="card bg-primary text-white mb-4">
              <div class="card-body">Median Age : 10 yrs</div>
              <div class="card-footer d-flex align-items-center justify-content-between">
                <div class="small text-white"><i class="fas fa-angle-right"></i></div>
              </div>
            </div>
          </div>

          <div class="col-xl-3 col-md-6">
            <div class="card bg-success text-white mb-4">
              <div class="card-body">Max: 100yrs Min 2yrs</div>
              <div class="card-footer d-flex align-items-center justify-content-between">
                <div class="small text-white"><i class="fas fa-angle-right"></i></div>
              </div>
            </div>
          </div>


        </div>



        <div class="row">
          <div class="card mb-4">
            <div class="card-header">
              <i class="fas fa-chart-area me-1"></i>
              Patient Group Demographics
            </div>
            <div class="card-body"><canvas id="pieChart" width="100%" height="40"></canvas></div>
          </div>
        </div>



        <div class="row">
          <div class="card mb-4">
            <div class="card-header">
              <i class="fas fa-chart-area me-1"></i>
              Race/Ethnicity Demographics
            </div>
            <div class="card-body"><canvas id="pieChartTwo" width="100%" height="40"></canvas></div>
          </div>
        </div>

        <div class="row">
          <div class="card mb-4">
            <div class="card-header">
              <i class="fas fa-chart-area me-1"></i>
              Gender Demographics
            </div>
            <div class="card-body"><canvas id="pieChartThree" width="100%" height="40"></canvas></div>
          </div>
        </div>





      </div>









      <!-- footer -->









    </div>
  </main>
  <footer class="py-4 bg-light mt-auto">
    <div class="container-fluid px-4">
      <div class="d-flex align-items-center justify-content-between small">
        <div class="text-muted">Copyright &copy; Amjay Software 2022</div>
        <div>
          <!-- <a href="#">Privacy Policy</a>
           &middot;
           <a href="#">Terms &amp; Conditions</a>-->
        </div>
      </div>
    </div>
  </footer>
</div>
</div>
<script>
  // barchart();
  //areachart();
  piechart();
  piechartOne();
  piechartThree();
  piechartTwo();
</script>
</body>
</html>