<!-- <div class="row page-titles mx-0">
    <div class="col p-md-0">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Dashboard</a></li>
            <li class="breadcrumb-item active"><a href="javascript:void(0)">Home</a></li>
        </ol>
    </div>
</div> -->
<!-- row -->
<style>
.input_chick{
    border-radius: 16px;
}

</style>
<!-- <?php //var_dump($chick_info) ?> -->
<br><br><br>

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Chicken Information</h4>
                <div class="basic-form">
                    <form>
                        <div class="form-group ">
                            <label class="">Name : </label>
                            <div class="">
                                <input type="text" class="form-control input-rounded input_chick" value="<?php echo $chick_info[0]->ck_name ?>" readonly>
                            </div>
                            <label class="mt-2">Age : </label>
                            <div class="">
                                <input type="text" class="form-control input-rounded input_chick" value="<?php echo $chick_info[0]->ck_age ?>" readonly>
                            </div>
                            <label class="mt-2">Status : </label>
                            <div class="">
                                <input type="text" class="form-control input-rounded input_chick" value="<?php echo $chick_info[0]->bhv_name ?>" readonly>
                            </div>
                            <label class="mt-2">Temperature : </label>
                            <div class="">
                                <input type="text" class="form-control input-rounded input_chick" value="<?php echo $chick_info[0]->mov_temperature." °C" ?>" readonly>
                            </div>
                            <label class="mt-2">Disease : </label>
                            <div class="">
                                <input type="text" class="form-control input-rounded input_chick" value="<?php echo $chick_info[0]->tm_detail ?>" readonly>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.chartBox{
    /* width:200px; 
    height: 100px; */
}
</style>
<div class="chartBox"></div>
<div class="card">

<canvas id="myChart" style="height:40vh; width:80vw"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- //luxon library = date and time -->
<script src="https://cdn.jsdelivr.net/npm/luxon@2.3.0/build/global/luxon.min.js"></script>
<!-- //adaptor luxon chartjs -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.1.0/dist/chartjs-adapter-luxon.min.js"></script>
<!-- //plugin js library -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0/dist/chartjs-plugin-streaming.min.js"></script>
<script>
    //setup block
    const data = {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                // data: [12, 19, 3, 5, 2, 3],
                data: [],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]

    };

    //config block
    const config = {
        type: 'line',
        data,
        options: {
            scales: {
                x: {
                    type: 'realtime',
                    delat:3000,
                    realtime: {
                        onRefresh: chart => {
                            chart.data.datasets.forEach(dataset => {
                                dataset.data.push({
                                    x: Date.now(),
                                    y: Math.random() * 10
                                })
                            })
                        }
                    }
                },
                y: {
                    beginAtZero: true
                }
            }
        }
    };

    //render init block
    const myChart = new Chart(
        document.getElementById('myChart'),
        config

    );
</script>


    
<!-- #/ container -->