[[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: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
                datasets: [{
                    data: [300, 50, 100, 40, 120],
                    backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
                    hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
                }]
            },
            options: {
                responsive: true
            }
        });
    }

    function piechartOne(){
        //pie
        var ctxP = document.getElementById("pieChartOne").getContext('2d');
        var myPieChart = new Chart(ctxP, {
            type: 'pie',
            data: {
                labels: ["0h-8h", "9h-16h", "17h-23h" ],
                datasets: [{
                    data: [5, 6, 8],
                    backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
                    hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
                }]
            },
            options: {
                responsive: true
            }
        });
    }
    function scatterchart() {
        // 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("myScatterPlot");
        var myLineChart = new Chart(ctx, {
            type: 'scatter',
            data: {
                datasets: [{
                    label: 'Scatter Dataset',
                    data: [{
                        x: 1,
                        y: 0
                    }, {
                        x: 1,
                        y: 10
                    }, {
                        x: 3,
                        y: 5
                    }, {
                        x: 6,
                        y: 5.5
                    }],
                    backgroundColor: 'rgb(255, 99, 132)'
                }],
            },
            options: {
                scales: {
                    x: {
                        type: 'linear',
                        position: 'bottom'
                    }
                }
            }
        });
    }

</script>
<div id="layoutSidenav_content">
    <main>
        <div class="container-fluid px-4">
            <h1 class="mt-4">Rx's By Price</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 Price 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="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-chart-area me-1"></i>
                        Prices of Rx's Filled
                    </div>
                    <div class="card-body"><canvas id="myScatterPlot" width="100%" height="40"></canvas></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: Each rx 5 dollars</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 # of Rx's : 10 dollars</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">Average Markup: 2 dollars</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>

                    <!-- mean , sum, max/min, median -->
                    <!-- For price: total, markup, average price per rx,  -->

                    <div class="col-xl-3 col-md-6">
                        <div class="card bg-primary text-white mb-4">
                            <div class="card-body">Sum of sales: 10000 dollars</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>









            <!-- footer -->










            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-table me-1"></i>
                    Rx Raw Data From Date Range
                </div>
                <div class="card-body">
                    <table id="datatablesSimple">
                        <thead>
                        <tr>
                            <th>Date</th>
                            <th>Price of Rx</th>
                        </tr>
                        </thead>
                        <tfoot>
                        <tr>
                            <th>Date</th>
                            <th>Price of Rx</th>
                        </tr>
                        </tfoot>
                        <tbody>

                        <tr>
                            <td>2012/12/18</td>
                            <td>313 dollars</td>
                        </tr>
                        <tr>
                            <td>2010/03/17</td>
                            <td>385 dollars</td>
                        </tr>
                        <tr>
                            <td>2012/11/27</td>
                            <td>198 dollars</td>
                        </tr>
                        <tr>
                            <td>2010/06/09</td>
                            <td>725 dollars</td>
                        </tr>

                        <tr>

                            <td>2008/11/13</td>
                            <td>183 dollars</td>
                        </tr>
                        <tr>
                            <td>2011/06/27</td>
                            <td>183 dollars</td>
                        </tr>
                        <tr>
                            <td>2011/01/25</td>
                            <td>112 dollars</td>
                        </tr>
                        </tbody>
                    </table>
                    <button style="color:white; background-color:blue;">EXPORT</button>

                </div>
            </div>

        </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();
    scatterchart();
    //piechart();
    //piechartOne();
</script>
</body>
</html>