chart.html

{% extends '_base.html' %}
{% load crispy_forms_tags %}

    {% block javascript %}
    <!--Chart js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    {% endblock javascript %}

{% block title %}Carbon Readings{% endblock title %}


{% block content %}

<h1>Carbon Daily Data</h1>

<form action="" method="get" class="form-inline mt-2 mt-md-0" id="dateForm">
{{ form|crispy }}
<label for="readingDateFormSelect">Reading Date</label>
<select class="form-control" name="q" id="dateSelect">
    {% for each_date in date  %}
    <option value={{ each_date.reading_date|date:"Y,M,d" }} {% if each_date.reading_date|date:"Y,M,d"  == selected_date|date:"Y,M,d"  %}selected="selected"{% endif %}>
        {{ each_date.reading_date|date:"M d, Y" }}
    </option>
    {% endfor %}
</select>
<button class="btn btn-success ml-2" type="submit">Submit</button>
</form>


<div class="container">
    <canvas id="DailyChart" width="100" height="50"></canvas>
</div>
{% endblock content %} 



{% block scripts %}


<script>
var ctx = document.getElementById('DailyChart').getContext('2d');
var DailyChart = new Chart(ctx, {
    type: 'line',
        data: {
            labels:[{% for item in carbon  %}'{{ item.reading_time }}',{% endfor %}],
            datasets: [{
                label: 'Carbon Data for {{ selected_date|date:"Y,M,d" }}',
                data: [{% for item in carbon %} {{item.reading}},{% endfor %}],
                backgroundColor: 'rgb(80,199,199)',
                borderColor: 'rgb(80,199,199)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    stacked: false,
                    ticks: {
                        beginAtZero: false
                    }
                }]
            }
        }
    });
</script>
{% endblock scripts %}