{% extends "base.html" %}

{% load static %}

{% load crispy_forms_tags %}

{% block head %}

<!-- <meta http-equiv="refresh" content="3"> -->

 <script src="/static/lib/Highcharts-10.2.1/highcharts.js"></script>
 <script src="/static/lib/Highcharts-10.2.1/modules/data.js"></script>
 <script src="/static/lib/Highcharts-10.2.1/modules/exporting.js"></script>
 <script src="/static/lib/Highcharts-10.2.1/modules/export-data.js"></script>
 <script src="/static/lib/Highcharts-10.2.1/modules/accessibility.js"></script>



{% endblock head %}

{% block content %}

<div class="breadcrumbs">
    <div class="breadcrumbs-inner">
        <div class="row m-0">
            <div class="col-sm-4">
                <div class="page-header float-left">
                    <div class="page-title">
                        <h1>CIUDAD SALUD</h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="page-header float-right">
                    
                </div>
            </div>
        </div>
    </div>
</div>

 

        <div class="content">
            <div class="animated fadeIn">
                <div class="row">

                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <strong class="card-title">Sensores {{ data.f }}</strong>
                                
                            </div>
                            <div class="card-body">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div id="container-online1"></div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div id="container-online2"></div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div id="container-online3"></div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div id="container-online4"></div>
                                        </div>
                                    </div>
                                    <br>
                                </div>

                            </div>
                        </div>

                        
                    </div>



                </div>
            </div><!-- .animated -->
        </div><!-- .content -->




<script type="application/javascript">
    Highcharts.chart('container-online1', {
        chart: {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {
                    var series = this.series[0];
                    setInterval(function () {
                        $.ajax({
                            url: window.location.pathname, //window.location.pathname
                            type: 'POST',
                            data: {
                                'action': 'get_graph_online1'
                            },
                            dataType: 'json',
                        }).done(function (data) {
                            if (!data.hasOwnProperty('error')) {
                                var x = (new Date()).getTime();
                                series.addPoint([x, data.y], true, true);
                                return false;
                            }
                            message_error(data.error);
                        }).fail(function (jqXHR, textStatus, errorThrown) {
                            alert(textStatus + ': ' + errorThrown);
                        }).always(function (data) {

                        });
                    }, 3000);
                }
            }
        },
        time: {
            useUTC: false
        },
        title: {
            text: 'SENSOR T001'
        },
        accessibility: {
            announceNewData: {
                enabled: true,
                minAnnounceInterval: 15000,
                announcementFormatter: function (allSeries, newSeries, newPoint) {
                    if (newPoint) {
                        return 'Nuevo registro Agregado: ' + newPoint.y;
                    }
                    return false;
                }
            }
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: 'TEMPERATURA'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: 'SENSOR T001',
            data: (function () {
                // generate an array of random data
                var data = [],
                    time = (new Date()).getTime(),
                    i;

                for (i = -19; i <= 0; i += 1) {
                    data.push({
                        x: time + i * 3000,
                        y: Math.random()
                    });
                }
                return data;
            }())
        }]
    });
</script>


<script type="application/javascript">
    Highcharts.chart('container-online2', {
        chart: {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {
                    var series = this.series[0];
                    setInterval(function () {
                        $.ajax({
                            url: window.location.pathname, //window.location.pathname
                            type: 'POST',
                            data: {
                                'action': 'get_graph_online2'
                            },
                            dataType: 'json',
                        }).done(function (data) {
                            if (!data.hasOwnProperty('error')) {
                                var x = (new Date()).getTime();
                                series.addPoint([x, data.y], true, true);
                                return false;
                            }
                            message_error(data.error);
                        }).fail(function (jqXHR, textStatus, errorThrown) {
                            alert(textStatus + ': ' + errorThrown);
                        }).always(function (data) {

                        });
                    }, 3000);
                }
            }
        },
        time: {
            useUTC: false
        },
        title: {
            text: 'SENSOR T002'
        },
        accessibility: {
            announceNewData: {
                enabled: true,
                minAnnounceInterval: 15000,
                announcementFormatter: function (allSeries, newSeries, newPoint) {
                    if (newPoint) {
                        return 'Nuevo registro Agregado: ' + newPoint.y;
                    }
                    return false;
                }
            }
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: 'TEMPERATURA'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: 'SENSOR T002',
            data: (function () {
                // generate an array of random data
                var data = [],
                    time = (new Date()).getTime(),
                    i;

                for (i = -19; i <= 0; i += 1) {
                    data.push({
                        x: time + i * 3000,
                        y: Math.random()
                    });
                }
                return data;
            }())
        }]
    });
</script>



<script type="application/javascript">
    Highcharts.chart('container-online3', {
        chart: {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {
                    var series = this.series[0];
                    setInterval(function () {
                        $.ajax({
                            url: window.location.pathname, //window.location.pathname
                            type: 'POST',
                            data: {
                                'action': 'get_graph_online3'
                            },
                            dataType: 'json',
                        }).done(function (data) {
                            if (!data.hasOwnProperty('error')) {
                                var x = (new Date()).getTime();
                                series.addPoint([x, data.y], true, true);
                                return false;
                            }
                            message_error(data.error);
                        }).fail(function (jqXHR, textStatus, errorThrown) {
                            alert(textStatus + ': ' + errorThrown);
                        }).always(function (data) {

                        });
                    }, 3000);
                }
            }
        },
        time: {
            useUTC: false
        },
        title: {
            text: 'SENSOR T003'
        },
        accessibility: {
            announceNewData: {
                enabled: true,
                minAnnounceInterval: 15000,
                announcementFormatter: function (allSeries, newSeries, newPoint) {
                    if (newPoint) {
                        return 'Nuevo registro Agregado: ' + newPoint.y;
                    }
                    return false;
                }
            }
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: 'TEMPERATURA'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: 'SENSOR T003',
            data: (function () {
                // generate an array of random data
                var data = [],
                    time = (new Date()).getTime(),
                    i;

                for (i = -19; i <= 0; i += 1) {
                    data.push({
                        x: time + i * 3000,
                        y: Math.random()
                    });
                }
                return data;
            }())
        }]
    });
</script>



<script type="application/javascript">
    Highcharts.chart('container-online4', {
        chart: {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {
                    var series = this.series[0];
                    setInterval(function () {
                        $.ajax({
                            url: window.location.pathname, //window.location.pathname
                            type: 'POST',
                            data: {
                                'action': 'get_graph_online4'
                            },
                            dataType: 'json',
                        }).done(function (data) {
                            if (!data.hasOwnProperty('error')) {
                                var x = (new Date()).getTime();
                                series.addPoint([x, data.y], true, true);
                                return false;
                            }
                            message_error(data.error);
                        }).fail(function (jqXHR, textStatus, errorThrown) {
                            alert(textStatus + ': ' + errorThrown);
                        }).always(function (data) {

                        });
                    }, 3000);
                }
            }
        },
        time: {
            useUTC: false
        },
        title: {
            text: 'SENSOR T004'
        },
        accessibility: {
            announceNewData: {
                enabled: true,
                minAnnounceInterval: 15000,
                announcementFormatter: function (allSeries, newSeries, newPoint) {
                    if (newPoint) {
                        return 'Nuevo registro Agregado: ' + newPoint.y;
                    }
                    return false;
                }
            }
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: 'TEMPERATURA'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: 'SENSOR T004',
            data: (function () {
                // generate an array of random data
                var data = [],
                    time = (new Date()).getTime(),
                    i;

                for (i = -19; i <= 0; i += 1) {
                    data.push({
                        x: time + i * 1000,
                        y: Math.random()
                    });
                }
                return data;
            }())
        }]
    });
</script>






{% endblock content %}

{% block javascript %} 

<script type="text/javascript">
    $(document).ready(function() {
      $('#bootstrap-data-table-export').DataTable();
  } );
</script>

{% endblock javascript %}