{% block chart %}

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>


<div class="website-monitor container-fluid shadow-sm p-2 mb-5 bg-white rounded">
    <h4>{{ monitoring_name }} <span class="badge badge-success">Online</span></h4>
    <h6>{{ website_url  }}</h6>
    <p></p>
    <a>Response Time (ms) - UTC</a>
    <p></p>
    <div class="chart-container responsetime" style="position: relative; height:140px; width:835px">
        <canvas id="responsetime-chart" height="140px" width="835px"></canvas>
    </div>
    <p></p>
    <a>Uptime</a>
    <p></p>
    <div class="chart-container uptime" style="position: relative; height:140px; width:835px">
        <canvas id="uptime-chart" height="140px" width="835px"></canvas>
    </div>
</div>


<!-- JS for Chart generation -->

<!-- Response Time Script -->
<script>
    var data = {{ data_responsetime }};//Response Time Data 
    //[0, 0, 0, 0, 0, 0, 0, 239, 337, 327, 323, 260, 286, 240, 280, 358, 302, 226, 242, 259, 314, 360, 297, 260] 

    var ctx = document.getElementById('responsetime-chart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',
    
        // The data for our dataset
        data: {
            labels: [
            '00:00', 
            '01:00', 
            '02:00', 
            '03:00', 
            '04:00', 
            '05:00', 
            '06:00', 
            '07:00', 
            '08:00', 
            '09:00', 
            '10:00', 
            '11:00', 
            '12:00', 
            '13:00', 
            '14:00', 
            '15:00', 
            '16:00', 
            '17:00', 
            '18:00', 
            '19:00', 
            '20:00', 
            '21:00', 
            '22:00', 
            '23:00', 
            '24:00'
            ],
            datasets: [{
                //label: 'My First dataset',
                //borderColor: 'rgb(0, 0, 0)',
                backgroundColor: 'rgb(255, 255, 255)',
                borderColor: 'rgb(255, 99, 132)',
                data: data
            }]
        },
    
        // Configuration options go here
        options: {
          tooltips: {
            enabled: true,
            backgroundColor: 'rgba(255, 100, 1)'
          },
          scales: {
            yAxes: [{
              gridLines: {
                display: false,
              },
              ticks: {
                display: true,
                beginAtZero: true,
                stepSize: 100
              }
            }],
            xAxes: [{
              gridLines: {
                display: false,
              },
              ticks: {
                display: true,
                stepSize: 1
              }
            }]
          },
          legend: {
            display: false
          },
          title: {
            display: false
          }
        }
    });
</script>


<!-- Uptime Script -->
<script>
    var data = {{ data_uptime }}; //Uptime Data  
    //[0, 0, 0, 0, 0, 0, 0, 239, 337, 327, 323, 260, 286, 240, 280, 358, 302, 226, 242, 259, 314, 360, 297, 260] 

    console.log(data)

    var ctx = document.getElementById('uptime-chart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',
    
        // The data for our dataset
        data: {
            labels: ['00:00', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '00:00'],
            datasets: [{
                //label: 'My First dataset',
                borderColor: 'rgb(0, 0, 0)',
                //borderColor: 'rgb(255, 99, 132)',
                data: data
            }]
        },
    
        // Configuration options go here
        options: {
          tooltips: {
            enabled: true,
            backgroundColor: 'rgba(255, 100, 1)'
          },
          scales: {
            yAxes: [{
              gridLines: {
                display: false,
              },
              ticks: {
                display: true,
                beginAtZero: true,
                stepSize: 100
              }
            }],
            xAxes: [{
              gridLines: {
                display: false,
              },
              ticks: {
                display: true,
                stepSize: 1
              }
            }]
          },
          legend: {
            display: false
          },
          title: {
            display: false
          }
        }
    });
</script>

{% endblock %}