{% extends 'dashboard/dashboard_index.html' %}
{% load staticfiles %}
{% block title %}
	Dashboard - Profile
{% endblock %}
{% block headerfiles %}
        
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
        <script type="{% static 'js/jquery-ui.js' %}"></script> 
        <link rel="stylesheet" type="text/css" href="{% static 'css/jquery.datetimepicker.css' %}"/>
        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
        <script type="text/javascript" src = "{% static 'js/dygraph-combined.js' %}"></script>
{% endblock %}
{% block main %}
    <div class = "row">
        <div class = "span12">
            <h2>SBHS MID: {{ mid }} <small>Profile for past {{ delta_T }} instances</small></h2>
            <h3>Heat</h3>
            <div id="heat" style="width:800px; height: 80px"></div>
            <h3>Fan</h3>
            <div id="fan" style="width:800px; height: 80px"></div>
            <h3>Temperature</h3>
            <div id="temp" style="width:800px; height: 80px"></div>
        </div>
    </div>
    <script>
(function(){
    var h = new Dygraph(
        document.getElementById("heat"),
        "{{ heat }}",
        {
            valueRange: [0,100]
        }
    );
    var f = new Dygraph(
        document.getElementById("fan"),
        "{{ fan }}",
        {
            valueRange: [0,100]
        }
    );
    var t = new Dygraph(
        document.getElementById("temp"),
        "{{ temp }}"
    );
})();
    </script>
{% endblock %}