{% extends "base.html" %}
{% load static %}

{% block content %}
<style>
    @media screen and (max-width: 600px) {
    }
    .card{
        /*display:inline-block;*/
    }
    .card .card-image img{
        height: 200px;
    }
    .card{
        height: 80px;
    }
</style>

    <div class="container">
        <br/>
        <div class="row">
            <center><H3>Datos de "Teléfono"</H3></center>  
            <button class="btn btn-small blue"><i class="material-icons">local_printshop</i></button>
            <button class="btn btn-small blue"><i class="material-icons">picture_as_pdf</i></button>
            <button class="btn btn-small blue"><i class="material-icons">save_alt</i></button>
            <table class="highlight centered">
                <thead>
                <tr>
                    <th>Fecha</th>
                    <th>Ph</th>
                    <th>Conductividad</th>
                    <th>Temperatura</th>
                     
                </tr>
                </thead>

                <tbody>
                <tr>
                    <td>10-01-19</td>
                    <td>6.8</td>
                    <td>2.8</td>
                    <td>23°</td>
                </tr>
                <tr>
                    <td>25-01-19</td>
                    <td>6.9</td>
                    <td>3.4</td>
                    <td>24°</td>
                </tr>
                <tr>
                    <td>12-02-19</td>
                    <td>5.8</td>
                    <td>2.2</td>
                    <td>23.2°</td>
                </tr>
                </tbody>
            </table>

            <br> <br> <br>
            <div class="col m4">
                <canvas id="myChartp"  ></canvas>
            </div>
            <div class="col m4">
                 <canvas id="myChartc" style="width:200px" ></canvas>
            </div>
            <div class="col m4">
                 <canvas id="myChartt" style="width:200px" ></canvas>
            </div>
           
        </div>    
    </div>
{% endblock content %}


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

<script type="text/javascript">

	$(document).ready(function(){
		$('.materialboxed').materialbox();
	});

    var ctx = document.getElementById('myChartp').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: ['10-01-19', '25-01-19', '12-02-19'],
            datasets: [{
                label: 'Ph',
                backgroundColor: 'blue',
                borderColor: 'blue',
                data: [6.8, 6.9, 5.8 ],
                fill:false,
            },
            ]
        },

        // Configuration options go here
        options: {
            scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Fecha'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Valores'
						}
					}]
				}
        }
    });

    var ctx = document.getElementById('myChartc').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: ['10-01-19', '25-01-19', '12-02-19'],
            datasets: [{
                label: 'Conductividad',
                backgroundColor: 'red',
                borderColor: 'red',
                data: [2.8, 3.4, 2.2 ],
                fill:false,
            },
            ]
        },

        // Configuration options go here
       options: {
            scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Fecha'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Valores'
						}
					}]
				}
        }
    });
    var ctx = document.getElementById('myChartt').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'line',

            // The data for our dataset
            data: {
                labels: ['10-01-19', '25-01-19', '12-02-19'],
                datasets: [{
                    label: 'Temperatura',
                    backgroundColor: 'green',
                    borderColor: 'green',
                    data: [23, 24, 23.2 ],
                    fill:false,
                },
                ]
            },

            // Configuration options go here
            options: {
            scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Fecha'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Valores'
						}
					}]
				}
        }
    });
</script>

{% endblock js %}