LMS-Estafeta/admin/reporte_distrito.php

<?php
require_once __DIR__.'/auth_guard.php'; 
include '../config.php';
session_name($CFG->sessionname);
session_start();
if(!isset($_SESSION['usersession'])){
    header("Location: ".$CFG->wwwroot);
}
function generateRandomString($length = 10) {
    $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $charactersLength = strlen($characters);
    $randomString = '';
    for ($i = 0; $i < $length; $i++) {
        $randomString .= $characters[rand(0, $charactersLength - 1)];
    }
    return $randomString;
}
?>


      <div class="col-12 text-primary mt-3 mb-3">
        <h1>Reporte por distritos</h1>
      </div>
      <!--
      <div class="col-12 text-left my-5">
        <a target="_blank" href="reporteExportCategoria_visitados.php?key=<?php echo generateRandomString(); ?>" class="p-3 btn-primary text-white btn-descarga">Descargar Reporte</a>
      </div>
      -->


      <div class="col-lg-12 col-md-12 col-12">
        <table class="table table-striped table-bordered" id="estafetatable4">
          <thead></thead>
          <tfoot></tfoot>
        </table>
      </div>

      <div class="col-lg-12 col-md-12 col-12 mt-5 mb-5"><hr class="border border-danger"></div>

      <div class="col-lg-12 col-md-12 col-12">
        <!--<h3>Grafica por Distritos</h3> -->
        <div id="chart-Distritos"></div>
      </div>


      <script type="text/javascript">

        extractData();

        function extractData(){
          $(".layer-load").show();
          var dataSet = [];
          
          $.ajax({
              url: 'reporte_getDistrito.php'
            })
          .done(function (data) {
            var _data = JSON.parse(data);
            TableDistrito(_data.columns[0],_data.data);
            //GraficaDistritos(_data.distritos,_data.Graphic);
            GraficaDistritos2(_data.distritos,_data.Graphic);
          })
          .fail(function () {

          })
          .always(function () {
            
          });

        }

        function TableDistrito(columns,data){
            //$.each(_data.data, function (index, val) {
                //dataSet[index] = [val['fecha'],val['estado_empleado'],val['numempl'],val['user'],val['apellidos'],val['posicion'],val['sociedad'],val['division'],val['unidad_organizativa'],val['ceco'],val['nomdistrito'],val['nomcentro'],val['supervisor'],val['nomcat'],val['nomcurso'],val['subtema'],val['estado']];
            //});

            $('#estafetatable4 tbody').empty();

            $('#estafetatable4').DataTable({
                dom: "Bfrtip",
                buttons: [
                //'pageLength',
                  {
                    extend: 'excel',
                    exportOptions: {
                        columns: ':visible'
                    },
                    autoFilter: true,
                    title: 'Reporte por Distritos - Estafeta',
                    sheetName: 'Reporte por Distritos',
                    text: 'Exportar a Excel'
                  },
                  'colvis'
                ],
                "language": {
                  "url": "../json/Spanish.json"
                },
                'order': false,
                // [
                //  [0, 'asc']
                //],
                "responsive": true,
                data: data,
                columns: columns,
                initComplete: function () {
                    this.api().columns().every( function () {
                      var title = this.header();
                      //replace spaces with dashes
                      title = $(title).html().replace(/[\W]/g, '-');
                        var column = this;
                        if($(column.header()).text() == 'Distrito'){
                          var select = $('<br><select id="' + title + '" class="select2" ></select>')
                              .appendTo( $(column.header()).after())
                              .on('change', function () {
                              //Get the "text" property from each selected data 
                              //regex escape the value and store in array
                              var data = $.map( $(this).select2('data'), function( value, key ) {
                                return value.text ? '^' + $.fn.dataTable.util.escapeRegex(value.text) + '$' : null;
                                         });
                              
                              //if no data selected use ""
                              if (data.length === 0) {
                                data = [""];
                              }
                              
                              //join array into string with regex or (|)
                              var val = data.join('|');
                              
                              //search for the option(s) selected
                              column
                                    .search( val ? val : '', true, false )
                                    .draw();
                              });


                          column.data().unique().sort().each( function ( d, j ) {
                              select.append( '<option value="'+d+'">'+d+'</option>' )
                          });
                          //use column title as selector and placeholder
                          $('#' + title).select2({
                            multiple: true,
                            closeOnSelect: false,
                            placeholder: "Selecciona los " + title
                          });
                          $('.select2').val(null).trigger('change');
                        }
                    });
                    $(".myselect").select2();
                }
            });

            $("#estafetatable4").show();
            $(".layer-load").hide();

        }


        function GraficaDistritos(columns,data){

          Highcharts.chart('chart-Distritos', {
            chart: {
                type: 'column'
            },
              exporting: {
                  width: 500,
                  allowHTML: true,
                  enabled: true,
                  chartOptions: { // specific options for the exported image
                      plotOptions: {
                          series: {
                              dataLabels: {
                                  enabled: true
                              }
                          }
                      }
                  },
                  fallbackToExportServer: false
              },
            title: {
                text: 'Reporte por Distritos'
            },
            xAxis: {
                categories: columns,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Número de personas'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.0f} personas</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: data
          });
        }


        function GraficaDistritos2(columns,data){
          var f = new Date();
          
          Highcharts.chart('chart-Distritos', {

              chart: {
                  type: 'column'
              },
              exporting: {
                  width: 500,
                  allowHTML: true,
                  enabled: true,
                  chartOptions: { // specific options for the exported image
                      plotOptions: {
                          series: {
                              dataLabels: {
                                  enabled: true
                              }
                          }
                      }
                  },
                  fallbackToExportServer: false
              },

              title: {
                  text: 'Estafeta'
              },
              subtitle: {
                  text: 'Reporte por Distritos '+f.getDate() + "/" + (f.getMonth() +1) + "/" + f.getFullYear()
              },

              xAxis: {
                  categories: columns
              },

              yAxis: {
                  allowDecimals: false,
                  min: 0,
                  title: {
                      text: 'Número de personas'
                  }
              },

              tooltip: {
                  formatter: function () {
                      return '<b>' + this.x + '</b><br/>' +
                          this.series.name + ': ' + this.y + '<br/>' +
                          'Total: ' + this.point.stackTotal;
                  }
              },
              credits: {
                enabled: false
              },
              plotOptions: {
                  column: {
                      stacking: 'normal'
                  }
              },
              series: data

          });
        }


      </script>