SitioWebSolerPalau/sustentabilidad.php

<?php
    require_once 'shared/conexionBD.php';

    mysqli_query($conexion, "SET NAMES utf8"); 

    $hoy = date("d/m/y");  
    $mes = date("m");
    $totalElec = 0;
    $arrMeses = array("01" => "Enero",
        "02" => "Febrero",
        "03" => "Marzo",
        "04" => "Abril",
        "05" => "Mayo",
        "06" => "Junio",
        "07" => "Julio",
        "08" => "Agosto",
        "09" => "Septiembre",
        "10" => "Octubre",
        "11" => "Noviembre",
        "12" => "Diciembre");

    // Obtenemos los datos de la gráfica de Electricidad hasta el mes anterior al actual
    /*$qryGraficas = "SELECT DATE_FORMAT(STR_TO_DATE(IDSU,'%Y-%m'),'%Y-%m') AS FECHA, SUM(VADI) AHORRO
                    FROM ITT_ASW_SUDE 
                    WHERE TIPO='E' 
                        AND DATE_FORMAT(STR_TO_DATE(IDSU,'%Y-%m'),'%Y-%m') < DATE_FORMAT(SYSDATE(), '%Y-%m')
                    GROUP BY TIPO, DATE_FORMAT(STR_TO_DATE(IDSU,'%Y-%m'),'%Y-%m')
                    ORDER BY DATE_FORMAT(STR_TO_DATE(IDSU,'%Y-%m'),'%Y-%m') DESC
                    LIMIT 12";

    $qryGraf = mysqli_query($conexion, $qryGraficas);
    $datosElec = array();
    while ($column = mysqli_fetch_assoc($qryGraf)) {
        $datosElec[] = $column;
        $totalElec = $totalElec + $column['AHORRO'];
    }*/

    $qryTest = "SELECT * FROM ITT_ASW_SUDE WHERE TIPO = 'E' ORDER BY IDSU DESC";
    $gstTest = mysqli_query($conexion, $qryTest);
    $arrTest = array();
    while ($test = mysqli_fetch_assoc($gstTest)) {
        $vadi = array_key_exists($test['IDSU'], $arrTest) ? floatval($arrTest[$test['IDSU']]['AHORRO']) : 0;
        $arrTest[$test['IDSU']] = [
            "FECHA" => $test['IDSU'],
            "AHORRO" => $vadi + floatval($test['VADI']),
        ];
    }

    $arrElec = array();
    $cont = 0;
    foreach($arrTest as $key=>$val){
        $arrDate = explode("-", $key);
        $currentMonth = date("m");
        $currentYear = date("Y");

        if($currentYear == $arrDate[0] && $currentMonth == $arrDate[1]) continue;
        if($currentYear == $arrDate[0] && intval($currentMonth) < intval($arrDate[1])) continue;
        if($cont < 12){
            $arrElec[] = $val;
            $totalElec = $totalElec + floatval($val['AHORRO']);
        }

        $cont++;
    }
    
    $datosElec = array_reverse($arrElec);

    $actualMonth = date("Y-m");
    $currentDay = date("d");
    $currentDay = intval($currentDay);
    $actualKW = 0;
    $qryActMonth = "SELECT * FROM ITT_ASW_SUDE WHERE TIPO = 'E' AND IDSU = '$actualMonth' ORDER BY DIAN ASC";
    $gstActMonth = mysqli_query($conexion, $qryActMonth);

    while ($actMonth = mysqli_fetch_assoc($gstActMonth)) {
        $dia = intval($actMonth['DIAN']);
        if($dia <= $currentDay){
            $actualKW += floatval($actMonth['VADI']);
        }
    }
    $totalElec = $totalElec + $actualKW;
    $datosElec[] = ["FECHA" => $actualMonth, "AHORRO" => $actualKW ];
    
    // Obtenemos los datos de la gráfica de Electricidad del mes actual hasta el día actual
    /*$qryDiaElec = "SELECT DATE_FORMAT(STR_TO_DATE(IDSU,'%Y-%m'),'%Y-%m') AS FECHA, SUM(VADI) AHORRO
                    FROM ITT_ASW_SUDE 
                    WHERE TIPO='E' AND DATE_FORMAT(STR_TO_DATE(IDSU,'%Y-%m'),'%Y-%m') = DATE_FORMAT(SYSDATE(), '%Y-%m') 
                        AND DIAN <= DATE_FORMAT(SYSDATE(), '%d')
                    GROUP BY TIPO, DATE_FORMAT(STR_TO_DATE(IDSU,'%Y-%m'),'%Y-%m')";

    $qryGrafElD = mysqli_query($conexion, $qryDiaElec);
    $datosElecD = array();
    while ($column = mysqli_fetch_assoc($qryGrafElD)) {
        $datosElec[] = $column;
        $totalElec = $totalElec + $column['AHORRO'];
        $ahorroKW=$column['AHORRO'];
    }*/
    $datosElecJson = json_encode($datosElec);

    // <--------------Operación para tala de árboles y emisiones de CO2------------------------->

    $milesEle = $totalElec/1000;
    $co2 = $milesEle*458;
    $arboles = $milesEle*19;

    $emisiones = $ahorroKW*0.458;

    // Obtenemos los datos de la gráfica de Agua hasta el mes anterior al actual
    $qryGraficaA = "SELECT DATE_FORMAT(STR_TO_DATE(IDSU,'%Y-%m'),'%Y-%m') AS FECHA, SUM(VADI) AHORRO
                    FROM ITT_ASW_SUDE 
                    WHERE TIPO='A' 
                        AND DATE_FORMAT(STR_TO_DATE(IDSU,'%Y-%m'),'%Y-%m') < DATE_FORMAT(SYSDATE(), '%Y-%m')
                    GROUP BY TIPO, DATE_FORMAT(STR_TO_DATE(IDSU,'%Y-%m'),'%Y-%m')
                    ORDER BY DATE_FORMAT(STR_TO_DATE(IDSU,'%Y-%m'),'%Y-%m') DESC
                    LIMIT 12";

    $qryGrafA = mysqli_query($conexion, $qryGraficaA);
    $datosAgua = array();
    $totalAgua = 0;
    while ($column = mysqli_fetch_assoc($qryGrafA)) {
        $datosAgua[] = $column;
        $totalAgua = $totalAgua + $column['AHORRO'];
    }
    
    $datosAgua = array_reverse($datosAgua);
    
    // Obtenemos los datos de la gráfica de Agua del mes actual hasta el día actual
    $qryDiaAguaD = "SELECT DATE_FORMAT(STR_TO_DATE(IDSU,'%Y-%m'),'%Y-%m') AS FECHA, SUM(VADI) AHORRO
                    FROM ITT_ASW_SUDE 
                    WHERE TIPO='A' AND DATE_FORMAT(STR_TO_DATE(IDSU,'%Y-%m'),'%Y-%m') = DATE_FORMAT(SYSDATE(), '%Y-%m') 
                        AND DIAN <= DATE_FORMAT(SYSDATE(), '%d')
                    GROUP BY TIPO, DATE_FORMAT(STR_TO_DATE(IDSU,'%Y-%m'),'%Y-%m')";

    $qryGrafAgD = mysqli_query($conexion, $qryDiaAguaD);
    $datosAguaD = array();
    while ($column = mysqli_fetch_assoc($qryGrafAgD)) {
        $datosAgua[] = $column;
        $totalAgua = $totalAgua + $column['AHORRO'];
    }

    $datosAguaJson = json_encode($datosAgua);

    // <--------------Operación para la equivalencia de PET------------------------->
    $botellas = $totalAgua/3.43;
    $botellas = number_format($botellas, 2, '.', ',');

    //Obtenemos todas las imágenes
    $qryImagenesSus = "SELECT IDIM, URLI, TIPO FROM `ITT_ASW_SUIM` ";
    $qryImgSus = mysqli_query($conexion, $qryImagenesSus);
    $arrImgSus = array();
    while ($columnImgs = mysqli_fetch_assoc($qryImgSus)) {
        $arrImgSus[] = $columnImgs;
    }
?>
<!DOCTYPE html>
<!--[if IE 8 ]>    <html xml:lang="es" lang="es" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html xml:lang="es" lang="es" class="no-js ie9"> <![endif]-->
<html xml:lang="es" lang="es">
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <head>
        <!-- Global site tag (gtag.js) - Google Analytics -->

        <!--Producción-->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-125019062-2"></script>

        <!--Producción-->
        <script>

            window.dataLayer = window.dataLayer || [];

            function gtag(){dataLayer.push(arguments);}

            gtag('js', new Date());

            gtag('config', 'UA-125019062-2');

        </script>

        <!-- End Global site tag (gtag.js) - Google Analytics -->
        <!-- [if IE]> -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta http-equiv="cleartype" content="on"/>
        <!-- <![endif] -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
        <title>Sustentabilidad – S&amp;P</title>
        <meta name="description" content="Todo lo que debes saber de la producción, distribución y logística de S&amp;P, sistemas de ventilación residenciales, comerciales e industriales."/>
        <meta name="keywords" content="Magento, Varien, E-commerce"/>
        <meta name="robots" content="INDEX,FOLLOW"/>

        <link rel="icon" href="https://statics.solerpalau.com/skin/frontend/solerpalau/default/favicon.ico" type="image/x-icon"/>
        <link rel="shortcut icon" href="https://statics.solerpalau.com/skin/frontend/solerpalau/default/favicon.ico" type="image/x-icon"/>

        <link rel="apple-touch-icon" sizes="57x57"
        href="../../../statics.solerpalau.com/skin/frontend/solerpalau/default/images/favicons/apple-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="60x60"
        href="../../../statics.solerpalau.com/skin/frontend/solerpalau/default/images/favicons/apple-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="72x72"
        href="../../../statics.solerpalau.com/skin/frontend/solerpalau/default/images/favicons/apple-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="76x76"
        href="../../../statics.solerpalau.com/skin/frontend/solerpalau/default/images/favicons/apple-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="114x114"
        href="../../../statics.solerpalau.com/skin/frontend/solerpalau/default/images/favicons/apple-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="120x120"
        href="../../../statics.solerpalau.com/skin/frontend/solerpalau/default/images/favicons/apple-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="144x144"
        href="../../../statics.solerpalau.com/skin/frontend/solerpalau/default/images/favicons/apple-icon-144x144.png">
        <link rel="apple-touch-icon" sizes="152x152"
        href="../../../statics.solerpalau.com/skin/frontend/solerpalau/default/images/favicons/apple-icon-152x152.png">
        <link rel="apple-touch-icon" sizes="180x180"
        href="../../../statics.solerpalau.com/skin/frontend/solerpalau/default/images/favicons/apple-icon-180x180.png">
        <link rel="icon" type="image/png" sizes="192x192"
        href="../../../statics.solerpalau.com/skin/frontend/solerpalau/default/images/favicons/android-icon-192x192.png">
        <link rel="icon" type="image/png" sizes="32x32"
        href="../../../statics.solerpalau.com/skin/frontend/solerpalau/default/images/favicons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="96x96"
        href="../../../statics.solerpalau.com/skin/frontend/solerpalau/default/images/favicons/favicon-96x96.png">
        <link rel="icon" type="image/png" sizes="16x16"
        href="../../../statics.solerpalau.com/skin/frontend/solerpalau/default/images/favicons/favicon-16x16.png">
        <meta name="msapplication-TileColor" content="#ffffff">
        <meta name="msapplication-TileImage"
        content="../../../statics.solerpalau.com/skin/frontend/solerpalau/default/images/favicons/ms-icon-144x144.png">
        <meta name="theme-color" content="#ffffff">
        
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
        <script type="text/javascript">
          var $j = jQuery.noConflict();
        </script>

        <script type="text/javascript" src="js/events.js"></script>

        <link rel="stylesheet" href="css/style-sustentability.css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700&display=swap" rel="stylesheet">

        <link rel="stylesheet" type="text/css" href="css/style-css01.css" media="all" />

        <link rel=“preload” href=%e2%80%9c/skin/frontend/solerpalau/default/fonts/icomoone8bc.html?y8wbvh%e2%80%9d as=“font”>
    </head>
    <body class=" cms-page-view cms-produccion-distribucion-logistica level-2 customer-logged-out">
    <?php include 'header.php' ?>
    <script type="text/javascript">
        //<![CDATA[
        if (typeof HIB.menu == 'object' && typeof HIB.menu.init == 'function') {
            HIB.menu.init();
        }
        //]]>
    </script>

        <section class="custom-container main-padding">
            <div class="title">
                <h1 class="big-green">Soler y palau</h1>
                <h2 class="medium-green">por un mundo sustentable</h2>
            </div>
            <p class="text-sustentability">En S&P estamos comprometidos con un mundo más sustentable; 
                por lo anterior, a través de nuestras diversas acciones internas como el
                ahorro de agua, energía eléctrica y reciclaje buscamos reducir el
                impacto ambiental y mejorar la calidad de vida.
            </p>
            <div class="light-content flex-box">
                <div class="graph">
                    <h3 class="small-green">LUZ AHORRADA EN LOS ÚLTIMOS <?php echo count($datosElec); ?> MESES</h3>
                    <div class="light-content-inside">
                        <h3 class="small-green vertical">AHORRO</h3>
                        <div id="columnchart_values" class="light-graph"></div>
                    </div>
                    <h3 class="small-green">MESES</h3>
                    <p>Actualizado al <?php echo($hoy);?></p>
                </div>
                <div class="light-slide">
                    <!--Slider starts-->
                    <div class="slider-content display-container"><center>
                       <?php
                            if(!empty($arrImgSus)){
                                foreach($arrImgSus as $imagenes){
                                    if($imagenes['TIPO']=='E'){
                                        $id = $imagenes['IDIM'];
                                        $url = $imagenes['URLI'];
                                ?>
                                <div class="item-slider-one">
                                    <h3 class="small-green img-title">Esto equivale a:</h3>
                                    <img class="img-little-slider" src="<?php echo($url); ?>" alt="IMG001">
                                    <p class="img-footer"><?php echo(number_format($co2, 2, '.', ','));?> kg de CO2 que equivale a participar en el corte de casi <?php echo(number_format($arboles, 2, '.', ','));?> arboles.</p>
                                </div>
                        <?php
                                    }
                                }
                            }
                       ?>
                    </center></div>
                    <!--Slider ends-->
                </div>
            </div>
            <div class="light-content flex-box">
                <div class="graph">
                    <h3 class="small-green">AGUA AHORRADA EN LOS ÚLTIMOS <?php echo count($datosAgua); ?> MESES</h3>
                    <div class="light-content-inside">
                        <h3 class="small-green vertical">AHORRO</h3>
                        <div id="columnchart_agua" class="light-graph"></div>
                    </div>
                    <h3 class="small-green">MESES</h3>
                    <p>Actualizado al <?php echo($hoy);?></p>
                </div>
                <div class="light-slide">
                    <!--Slider starts-->
                    <div  class="slider-content display-container"><center>
                    <?php
                            if(!empty($arrImgSus)){
                                foreach($arrImgSus as $imagenes){
                                    if($imagenes['TIPO']=='A'){
                                        $id = $imagenes['IDIM'];
                                        $url = $imagenes['URLI'];
                                ?>
                                <div class="item-slider-two">
                                    <h3 class="small-green img-title">Esto equivale a:</h3>
                                    <img class="img-little-slider" src="<?php echo($url); ?>" alt="IMG001">
                                    <p class="img-footer"><?php echo($botellas); ?> botellas de PET de 1.5L.</p>
                                </div>
                        <?php
                                    }
                                }
                            }
                       ?>
                    </center></div>
                    <!--Slider ends-->
                </div>

            </div>
        </section>
        <div class="separator"></div>
        <hr class="padding-floor">
        
        <section class="floor">
            <div class="custom-container flex-box">
                <div class="floor-slider-container">
                    <div class="floor-content floor-display-container" >
                    <?php
                            if(!empty($arrImgSus)){
                                $countSlider = 0;
                                foreach($arrImgSus as $imagenes){
                                    if($imagenes['TIPO']=='S'){
                                        $id = $imagenes['IDIM'];
                                        $url = $imagenes['URLI'];
                                        $countSlider++;
                                ?>
                                <img class="item-slider-three" width="100%" src="<?php echo($url); ?>" alt="Sustentabilidad S&P">
                        <?php
                                    }
                                }
                            }
                       ?>
                        <div class="center floor-container floor-section floor-large floor-bottommiddle" style="width:100%">
                            <div class="left left-hover img-footer" onclick="plusDivsSliderThree(-1)">&#10094;</div>
                            <div class="right right-hover img-footer" onclick="plusDivsSliderThree(+1)">&#10095;</div>
                        </div>
                    </div>
                    <div class="badge-container"><center>
                        <?php
                            for ($i = 1; $i <= $countSlider; $i++) {
                                ?>
                                <span class="badge demo border hover-white" onclick="currentDivSliderThree(<?php echo($i); ?>)"></span>
                            <?php
                            }
                        ?>
                    </center></div>
                </div>
                <div class="floor-text-container">
                    <h2 class="floor-title">A través de</h2>
                    <h3 class="floor-subtitle">nuestras acciones de cuidado al medio ambiente</h3>
                    <p class="floor-text">Durante el mes de <?php echo($arrMeses[$mes]); ?> se han reducido <?php echo(number_format($emisiones, 2, '.', ',')); ?> emisiones de C02.</p>
                    
                    <?php
                            if(!empty($arrImgSus)){
                                foreach($arrImgSus as $imagenes){
                                    if($imagenes['IDIM']==1000){
                                        $url = $imagenes['URLI'];
                                ?>
                                <p class="floor-text"><?php echo($url); ?></p>
                        <?php
                                    }
                                }
                            }
                       ?>
                    </p>
                </div>
            </div>
        </section>
        <?php include 'footer.php' ?>
    </body>
    <script>
        var slideIndex = 1;
        var ind = 1;
        showDivsSliderOne(slideIndex);

        var slideIndexTwo = 1;
        var indTwo = 1;
        showDivsSliderTwo(slideIndexTwo);

        var slideIndexThree = 1;
        showDivsSliderThree(slideIndexThree);

        function plusDivsSliderOne(n){
            ind = n;
            showDivsSliderOne(slideIndex += n);
        }

        function plusDivsSliderTwo(n){
            indTwo = n;
            showDivsSliderTwo(slideIndexTwo += n);
        }

        function plusDivsSliderThree(n) {
            showDivsSliderThree(slideIndexThree += n);
        }

        function currentDivSliderThree(n) {
            showDivsSliderThree(slideIndexThree = n);
        }

        function showDivsSliderOne(n){
            var i;
            var x = document.getElementsByClassName("item-slider-one");
            if (n > x.length) {slideIndex = 1}
            if (n < 1) {slideIndex = x.length};
            for (i = 0; i < x.length; i++){
                x[i].style.display = "none";
            }
            x[slideIndex-1].style.display = "block";
            if(ind > 0){
                x[slideIndex-1].classList.add("slideRight");
                x[slideIndex-1].classList.remove("slideLeft");
            }
            if(ind < 0){
                x[slideIndex-1].classList.add("slideLeft");
                x[slideIndex-1].classList.remove("slideRight");
            }

        }

        function showDivsSliderTwo(n){
            var i;
            var x = document.getElementsByClassName("item-slider-two");
            if (n > x.length) {slideIndexTwo = 1}
            if (n < 1) {slideIndexTwo = x.length};
            for (i = 0; i < x.length; i++){
                x[i].style.display = "none";
            }
            x[slideIndexTwo-1].style.display = "block";
            if(indTwo > 0){
                x[slideIndexTwo-1].classList.add("slideRight");
                x[slideIndexTwo-1].classList.remove("slideLeft");
            }
            if(indTwo < 0){
                x[slideIndexTwo-1].classList.add("slideLeft");
                x[slideIndexTwo-1].classList.remove("slideRight");
            }
        }
        
        function showDivsSliderThree(n) {
            var i;
            var x = document.getElementsByClassName("item-slider-three");
            var dots = document.getElementsByClassName("demo");
            if (n > x.length) {slideIndexThree = 1}
            if (n < 1) {slideIndexThree = x.length}
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";  
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" badge-background", "");
                dots[i].classList.add("badge-hover");
            }
            x[slideIndexThree-1].style.display = "block";  
            dots[slideIndexThree-1].className += " badge-background";
            dots[slideIndexThree-1].classList.remove("badge-hover");
        }
    </script>
    
</html>

<script type="text/javascript">
    var arrayMeses = new Array(); 
    arrayMeses['01'] = 'Enero';
    arrayMeses['02'] = 'Febrero';
    arrayMeses['03'] = 'Marzo';
    arrayMeses['04'] = 'Abril';
    arrayMeses['05'] = 'Mayo';
    arrayMeses['06'] = 'Junio';
    arrayMeses['07'] = 'Julio';
    arrayMeses['08'] = 'Agosto';
    arrayMeses['09'] = 'Septiembre';
    arrayMeses['10'] = 'Octubre';
    arrayMeses['11'] = 'Noviembre';
    arrayMeses['12'] = 'Diciembre';

    var array  = JSON.parse('<?php echo($datosElecJson); ?>');
      
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
     
    var data = new google.visualization.DataTable();

    data.addColumn('string','Fecha');
    data.addColumn('number','kW/hr');
    data.addColumn({role: "style"});
    data.addColumn({role: "annotation"});    

    for (var i = 0; i < array.length; i++) {
        mes = array[i].FECHA;
        nombreMes=mes.split('-');
        nombreMes = arrayMeses[nombreMes[1]];
        ahorro = parseFloat(array[i].AHORRO);
        annotation = "⚡";
        data.addRow([nombreMes, ahorro,'stroke-color: #e5b92c; stroke-width: 2; fill-color: #ffd233',annotation]);
    } 
    // ffd233
    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
                    {   
                        calc: "stringify",
                        sourceColumn: 3,
                        type: "string",
                        role: "annotation" 
                    },
                    2]);

    var options = {
            title: "Se han ahorrado en total <?php echo(number_format($totalElec, 2, '.', ',')); ?> kW/hr",
            subtitle: 'Based on a scale of 1 to 10',
            colors: ['#ffd233'],
            width: '100%',
            height: '100%',
            bar: {groupWidth: "50%"},
            legend: {
                color: '#ffd233',
                textStyle: {
                    fontName: 'Montserrat,sans-serif',
                }
            },
            annotations: {
                alwaysOutside: true
            },
            vAxis: {
                minValue: 0
            },
            hAxis: {
                slantedTextAngle: 90
            }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
        chart.draw(view, options);

        function resizeHandler () {
            chart.draw(view, options);
            
        }
        if (window.addEventListener) {
            window.addEventListener('resize', resizeHandler, false);
        }
        else if (window.attachEvent) {
            window.attachEvent('onresize', resizeHandler);
        }
    }

    // SEGUNDA GRÁFICA
    var arrayAgua  = JSON.parse('<?php echo($datosAguaJson); ?>');
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChartA);

    function drawChartA() {
     
        var dataA = new google.visualization.DataTable();

        dataA.addColumn('string','Fecha');
        dataA.addColumn('number','Litros');
        dataA.addColumn({role: "style"});
        dataA.addColumn({role: "annotation"});  

        for (var i = 0; i < arrayAgua.length; i++) {
            mesA = arrayAgua[i].FECHA;
            nombreMesA=mesA.split('-');
            nombreMesA = arrayMeses[nombreMesA[1]];
            ahorroA = parseFloat(arrayAgua[i].AHORRO);
            annotation = "💧";
            dataA.addRow([nombreMesA, ahorroA,'stroke-color: #61adc1; stroke-width: 2; fill-color: #6cd1fd',annotation]);
        } 

        var viewA = new google.visualization.DataView(dataA);
        viewA.setColumns([0, 1,
                        { calc: "stringify",
                        sourceColumn: 3,
                        type: "string",
                        role: "annotation" },
                        2]);

        var optionsA = {
            title: "Se han ahorrado en total <?php echo(number_format($totalAgua, 2, '.', ',')); ?> litros",
            // subtitle: "Acualizado al",
            colors: ['#6cd1fd'],
            width: '100%',
            bar: {groupWidth: "50%"},
            legend: { 
                textStyle: {
                    fontName: 'Montserrat,sans-serif',
                }
            },
            annotations: {
                alwaysOutside: true
            },
            vAxis: {
                minValue: 0
            },
            hAxis: {
                slantedTextAngle: 90
            }


        };

        var chartA = new google.visualization.ColumnChart(document.getElementById("columnchart_agua"));
        chartA.draw(viewA, optionsA);

        function resizeHandler () {
            chartA.draw(viewA, optionsA);
        }

        if (window.addEventListener) {
            window.addEventListener('resize', resizeHandler, false);
        }
        else if (window.attachEvent) {
            window.attachEvent('onresize', resizeHandler);
        }
    }
</script>