 
function chartEjemplo(id_formulario, id_usuario, accion, id_proceso, id_perfil, controlador){

    // Parámetros obtenidos del formulario
    let parametros = new FormData($('#'+id_formulario)[0]);
    parametros.append('peticion', 'ajax');
    parametros.append('accion', accion);
    parametros.append('id_usuario', id_usuario);
    parametros.append('id_proceso_actual', id_proceso);
    parametros.append('id_perfil', id_perfil);

    // Leyendo parámetros
    parametros.forEach(function(value, key){
        console.log("key: "+key+", value: "+value);
    });
    // informe_meta_resultado

    var periodos   = [];
    var metas      = [];
    var resultados = []; 

    $.ajax({
        url: controlador,
        type: 'POST',
        data: parametros,
        cache: false,
        processData: false,
        contentType: false,
        dataType: 'json',
    }).done(function(respuesta){
      
      console.log(respuesta);

      $('#charts').html('');
      
      if(respuesta.datos != null){

        for(var x=0; x < respuesta.datos.length; x++){

          var html = '<h4 style="margin-top: 30px;">'+respuesta.datos[x][0]['nombre']+'</h4><canvas id="chart'+x+'" width="400" height="150"></canvas>';

          var periodos = [];
          var metas = [];
          var resultados = [];

          for (var y=0; y < respuesta.datos[x].length; y++){
            
            periodos.push(respuesta.datos[x][y]['periodo']);
            metas.push(respuesta.datos[x][y]['meta']);
            resultados.push(respuesta.datos[x][y]['resultado']);
            
          }

          $('#charts').append(html);
          console.log("********************** Tamaño *******************");
          console.log(respuesta.datos.length);
          console.log("********************** Periodos *******************");
          console.log(periodos);
          console.log("********************** metas *******************");
          console.log(metas);
          console.log("********************** Periodos *******************");
          console.log(resultados);

          if(x == 0){

            var ctx = document.getElementById('chart'+x);
            var myChart = new Chart(ctx, {
              type: 'bar',
              data: {
                labels: periodos,
                datasets: [{
                  label: 'Metas',
                  data: metas,
                  backgroundColor: "#007BFF"
                }, {
                  label: 'Resultados',
                  data: resultados,
                  backgroundColor: "#CED4DA"
                }]
              }
            });

          }else if(x == 1){

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

                  // The data for our dataset
                  data: {
                      labels: periodos,
                      datasets: [{
                          label: 'Metas',
                          fillColor           : 'rgba(0, 99, 132)',
                          strokeColor         : 'rgba(0, 99, 132)',
                          pointColor          : 'rgba(0, 99, 132)',
                          pointStrokeColor    : 'rgba(0, 99, 132)',
                          pointHighlightFill  : '#fff',
                          pointHighlightStroke: 'rgba(255, 99, 132)',
                          backgroundColor     : '#D2D6DE',
                          data                : metas,

                       },
                       {
                           label: 'Resultados',
                            fillColor           : 'rgba(60,141,188,0.9)',
                            strokeColor         : 'rgba(60,141,188,0.8)',
                            pointColor          : '#3b8bba',
                            pointStrokeColor    : 'rgba(60,141,188,1)',
                            pointHighlightFill  : '#fff',
                            pointHighlightStroke: 'rgba(60,141,188,1)',
                            backgroundColor: '#4B94BF',
                            data                : resultados,
                       }]

                  },

                  // Configuration options go here
                  options: {}
              });

          }else if(x%2 == 0){

            var ctx = document.getElementById('chart'+x);
            var myChart = new Chart(ctx, {
              type: 'bar',
              data: {
                labels: periodos,
                datasets: [{
                  label: 'Metas',
                  data: metas,
                  backgroundColor: "#007BFF"
                }, {
                  label: 'Resultados',
                  data: resultados,
                  backgroundColor: "#CED4DA"
                }]
              }
            });

          }else{

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

                  // The data for our dataset
                  data: {
                      labels: periodos,
                      datasets: [{
                          label: 'Metas',
                          fillColor           : 'rgba(0, 99, 132)',
                          strokeColor         : 'rgba(0, 99, 132)',
                          pointColor          : 'rgba(0, 99, 132)',
                          pointStrokeColor    : 'rgba(0, 99, 132)',
                          pointHighlightFill  : '#fff',
                          pointHighlightStroke: 'rgba(255, 99, 132)',
                          backgroundColor     : '#D2D6DE',
                          data                : metas,

                       },
                       {
                           label: 'Resultados',
                            fillColor           : 'rgba(60,141,188,0.9)',
                            strokeColor         : 'rgba(60,141,188,0.8)',
                            pointColor          : '#3b8bba',
                            pointStrokeColor    : 'rgba(60,141,188,1)',
                            pointHighlightFill  : '#fff',
                            pointHighlightStroke: 'rgba(60,141,188,1)',
                            backgroundColor: '#4B94BF',
                            data                : resultados,
                       }]

                  },

                  // Configuration options go here
                  options: {}
              });

          }


        }

      }else{

        $('#charts').html('<p>No se encontraron resultados.</p>'); 
      
      }

      
      // console.log(html);
      
      // console.log("********************** Tamaño *******************");
      // console.log(respuesta.datos.length);
      // console.log("********************** Periodos *******************");
      // console.log(periodos);
      // console.log("********************** metas *******************");
      // console.log(metas);
      // console.log("********************** Periodos *******************");
      // console.log(resultados);

    //   var ctx = document.getElementById('chart1');
    //   var myChart = new Chart(ctx, {
    //       type: 'bar',
    //       data: {
    //         labels: periodos,
    //         datasets: [{
    //           label: 'Metas',
    //           data: metas,
    //           backgroundColor: "#00C0EF"
    //         }, {
    //           label: 'Resultados',
    //           data: resultados,
    //           backgroundColor: "#008D4C"
    //         }]
    //       }
    //     });


    });
 


    //   var mes = ['a','b','c','d','e','a','b','c','d','e','a','b','c','d','e','a','b','c','d','e','a','b','c','d','e','a','b','c','d','e'];
    //   var cantidad_informatica =     [5,3,1,2,4,5,3,1,2,4,5,3,1,2,4,5,3,1,2,4,5,3,1,2,4,5,3,1,2,4];
    //   var cantidad_infraestructura = [1,5,3,4,2,1,5,3,4,2,1,5,3,4,2,1,5,3,4,2,1,5,3,4,2,1,5,3,4,2];

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

    //             // The data for our dataset
    //             data: {
    //                 labels: mes,
    //                 datasets: [{
    //                     label: 'Informática',
    //                     fillColor           : 'rgba(0, 99, 132)',
    //                     strokeColor         : 'rgba(0, 99, 132)',
    //                     pointColor          : 'rgba(0, 99, 132)',
    //                     pointStrokeColor    : 'rgba(0, 99, 132)',
    //                     pointHighlightFill  : '#fff',
    //                     pointHighlightStroke: 'rgba(255, 99, 132)',
    //                     backgroundColor     : '#4D908D',
    //                     data                : cantidad_informatica,

    //                  }]
    //                  // ,
    //                  // {
    //                  //     label: 'Infraestructura',
    //                  //      fillColor           : 'rgba(60,141,188,0.9)',
    //                  //      strokeColor         : 'rgba(60,141,188,0.8)',
    //                  //      pointColor          : '#3b8bba',
    //                  //      pointStrokeColor    : 'rgba(60,141,188,1)',
    //                  //      pointHighlightFill  : '#fff',
    //                  //      pointHighlightStroke: 'rgba(60,141,188,1)',
    //                  //      backgroundColor: '#90BE6D',
    //                  //      data                : cantidad_infraestructura,
    //                  // }]

    //             },

    //             // Configuration options go here
    //             options: {}
    //         });


    // var ctx_z = document.getElementById("myChartxz").getContext('2d');
    // var myChart = new Chart(ctx_z, {
    //   type: 'pie',
    //   data: {
    //     labels: ["M", "T", "W", "T", "F", "S", "S"],
    //     datasets: [{
    //       backgroundColor: [
    //         "#2ecc71",
    //         "#3498db",
    //         "#95a5a6",
    //         "#9b59b6",
    //         "#f1c40f",
    //         "#e74c3c",
    //         "#34495e"
    //       ],
    //       data: [12, 19, 3, 17, 28, 24, 7]
    //     }]
    //   }
    // });

    // var ctx_z = document.getElementById("myChartxzy").getContext('2d');
    // var myChart = new Chart(ctx_z, {
    //   type: 'doughnut',
    //   data: {
    //     labels: ["M", "T", "W", "T", "F", "S", "S"],
    //     datasets: [{
    //       backgroundColor: [
    //         "#2ecc71",
    //         "#3498db",
    //         "#95a5a6",
    //         "#9b59b6",
    //         "#f1c40f",
    //         "#e74c3c",
    //         "#34495e"
    //       ],
    //       data: [12, 19, 3, 17, 28, 24, 7]
    //     }]
    //   }
    // });              
    
  }
// Consulta usuario
function cargarDatosProceso(id_proceso, accion, controlador){

    $.ajax({
        url: controlador,
        type: 'POST',
        data: "id_proceso="+id_proceso+"&accion="+accion+"&peticion=ajax",
        dataType: 'json',
        success:function(respuesta){
	
        	// console.log(respuesta);
        	// console.log(respuesta['id']);

        	$('#admin_id_macro_proceso').val(respuesta['id_macro_proceso']).trigger('change.select2');
        	$('#admin_objetivo').val(respuesta['objetivo']);
        	$('#admin_estado_proceso').val(respuesta['estado']).trigger('change.select2');
        	$('#admin_id_responsable_proceso').val(respuesta['id_responsable']).trigger('change.select2');
          $('#icono').val(respuesta['icono']);

        }
    });

}

// Edita proceso
function editaProceso(id_formulario, id_usuario, accion, controlador){

    // Parámetros obtenidos del formulario
    let parametros = new FormData($('#'+id_formulario)[0]);
    parametros.append('peticion', 'ajax');
    parametros.append('accion', accion);
    parametros.append('id_usuario', id_usuario);

    // Leyendo parámetros
    parametros.forEach(function(value, key){
        console.log("key: "+key+", value: "+value);
    });

    $.ajax({
        url: controlador,
        type: 'POST',
        data: parametros,
        cache: false,
        processData: false,
        contentType: false,
        dataType: 'json',
    }).done(function(respuesta){

        // console.log(respuesta);

        if(respuesta.hasOwnProperty('success')){

            Swal.fire({
              icon: 'success',
              title: 'Proceso exitoso',
              html: respuesta.success,
              confirmButtonText: 'Aceptar',
              confirmButtonColor: '#28A745',
              showConfirmButton: true,
              // footer: '<a href>Why do I have this issue?</a>'

            })
            
            // document.getElementById(id_formulario).reset();

            $('#proceso').val(0).trigger('change.select2');
            $('#admin_id_macro_proceso').val(0).trigger('change.select2');
            $('#admin_objetivo').val('');
            $('#admin_estado_proceso').val(10).trigger('change.select2');
            $('#admin_id_responsable_proceso').val(0).trigger('change.select2');

        }else{

            Swal.fire({
              icon: 'error',
              // title: 'Error',
              html: respuesta.error,
              confirmButtonText: 'Aceptar',
              confirmButtonColor: '#28A745',
              showConfirmButton: true,
              // footer: '<a href>Why do I have this issue?</a>'
            })
            
        }

    });

}

// Puebla el campo icono del formulario del modal nuevo procesos; 
function asignaIconoModal(id, icono){
  
  $('#id_icono_modal').val(id);
  $('#icono_modal').val(icono);
  $('#modal_iconos_modal').modal('hide');

}

function asignaIcono(id, icono){
  
  $('#id_icono').val(id);
  $('#icono').val(icono);
  $('#modal_iconos').modal('hide');

}

// Consulta indicador
function consutaIndicador(id_indicador, accion, controlador){
  
  $.ajax({
        url: controlador,
        type: 'POST',
        data: "id_indicador="+id_indicador+"&accion="+accion+"&peticion=ajax",
        dataType: 'json',
        success:function(respuesta){
  
          console.log(respuesta);
          if(respuesta != false){

            $('#formula').val(respuesta['formula']);
            $('#id_proceso').val(respuesta['id_proceso']).trigger('change.select2');
            $('#admin_id_responsable_indicador').val(respuesta['id_responsable']).trigger('change.select2');
            $('#tipo_indicador').val(respuesta['id_tipo']).trigger('change.select2');
            $('#periodicidad').val(respuesta['id_periodicidad']).trigger('change.select2');
            $('#id_proceso').val(respuesta['id_proceso']).trigger('change.select2');
            $('#meta').val(respuesta['meta']);
            $('#estado').val(respuesta['estado']).trigger('change.select2');
            $('#meta').val(respuesta['meta']);
            $('#gestion_bajo').val(respuesta['gestion_bajo']);
            $('#gestion_medio').val(respuesta['gestion_medio']);
            $('#gestion_alto').val(respuesta['gestion_alto']);
          
          }else{

            $('#formula').val('');
            $('#id_proceso').val(0).trigger('change.select2');
            $('#admin_id_responsable_indicador').val(0).trigger('change.select2');
            $('#tipo_indicador').val(0).trigger('change.select2');
            $('#periodicidad').val(0).trigger('change.select2');
            $('#id_proceso').val(0).trigger('change.select2');
            $('#meta').val('');
            $('#estado').val(10).trigger('change.select2');
            $('#meta').val(0);
            $('#gestion_bajo').val(0);
            $('#gestion_medio').val(0);
            $('#gestion_alto').val(0);
          
          }

        }
    });

}


// Consulta zona
function cargarDatosZona(id_zona, accion, controlador){

  $.ajax({
        url: controlador,
        type: 'POST',
        data: "id_zona="+id_zona+"&accion="+accion+"&peticion=ajax",
        dataType: 'json',
        success:function(respuesta){
  
          console.log(respuesta);
          if(respuesta != false){

            $('#id_tipozona').val(respuesta['id_tipo']).trigger('change.select2');
            $('#descripcion_zona').val(respuesta['descripcion']);
            $('#estado').val(respuesta['estado']).trigger('change.select2');
            $('#latitud').val(respuesta['latitud']);
            $('#longitud').val(respuesta['longitud']);
          
          }
          // else{

          //   $('#formula').val('');
          //   $('#id_proceso').val(0).trigger('change.select2');
          //   $('#admin_id_responsable_indicador').val(0).trigger('change.select2');
          //   $('#tipo_indicador').val(0).trigger('change.select2');
          //   $('#periodicidad').val(0).trigger('change.select2');
          //   $('#id_proceso').val(0).trigger('change.select2');
          //   $('#meta').val('');
          //   $('#estado').val(10).trigger('change.select2');
          //   $('#meta').val(0);
          //   $('#gestion_bajo').val(0);
          //   $('#gestion_medio').val(0);
          //   $('#gestion_alto').val(0);
          
          // }

        }
    });

}

// Edita zona
function editaZona(id_formulario, id_usuario, accion, controlador){

    // Parámetros obtenidos del formulario
    let parametros = new FormData($('#'+id_formulario)[0]);
    parametros.append('peticion', 'ajax');
    parametros.append('accion', accion);
    parametros.append('id_usuario', id_usuario);

    // Leyendo parámetros
    parametros.forEach(function(value, key){
        console.log("key: "+key+", value: "+value);
    });

    $.ajax({
        url: controlador,
        type: 'POST',
        data: parametros,
        cache: false,
        processData: false,
        contentType: false,
        dataType: 'json',
    }).done(function(respuesta){

        console.log(respuesta);

        if(respuesta.hasOwnProperty('success')){

            Swal.fire({
              icon: 'success',
              title: 'Proceso exitoso',
              html: respuesta.success,
              confirmButtonText: 'Aceptar',
              confirmButtonColor: '#28A745',
              showConfirmButton: true,
              // footer: '<a href>Why do I have this issue?</a>'

            })
            
            // document.getElementById(id_formulario).reset();

            $('#id_zona').val(0).trigger('change.select2');
            $('#id_tipozona').val(0).trigger('change.select2');
            $('#descripcion_zona').val('');
            $('#estado').val(10).trigger('change.select2');
            $('#latitud').val('');
            $('#longitud').val('');

        }else if(respuesta.hasOwnProperty('info')){

          Swal.fire({
              icon: 'info',
              // title: 'Error',
              html: respuesta.info,
              confirmButtonText: 'Aceptar',
              confirmButtonColor: '#28A745',
              showConfirmButton: true,
              // footer: '<a href>Why do I have this issue?</a>'
            })

        }else{

            Swal.fire({
              icon: 'error',
              // title: 'Error',
              html: respuesta.error,
              confirmButtonText: 'Aceptar',
              confirmButtonColor: '#28A745',
              showConfirmButton: true,
              // footer: '<a href>Why do I have this issue?</a>'
            })
            
        }

    });

}




// Consulta indicadores
function consultaKPI(descripcion_kpi, accion, id_proceso, id_perfil, controlador){

  $.ajax({
        url: controlador,
        type: 'POST',
        data: "descripcion_kpi="+descripcion_kpi+"&id_proceso="+id_proceso+"&id_perfil="+id_perfil+"&accion="+accion+"&peticion=ajax",
        dataType: 'json',
        success:function(respuesta){
  
          console.log(respuesta);
          let elementos = respuesta.datoskpi.length;
          let html = '';

          console.log(elementos);
          console.log(respuesta.datoskpi);

          for (var i = 0; i < elementos; i++) {
            console.log(i);
            console.log(respuesta.datoskpi[i]);
            html += '<tr onclick="consultaIndicadorId('+respuesta.datoskpi[i]['id']+');">'+
                      '<td>'+respuesta.datoskpi[i]['id']+'</td>'+
                      '<td>'+respuesta.datoskpi[i]['nombre']+'<td>'+
                    '</tr>';  

          }

          $('#lista_indicadores').html(html);

        }

    });

}

// Consulta un indicador
function consultaIndicadorId(id){

  $.ajax({
        url: '../controlador/administracion.controlador.php',
        type: 'POST',
        data: "id="+id+"&accion=consulta_indicador_id&peticion=ajax",
        dataType: 'json',
        success:function(respuesta){
  
          console.log(respuesta);

          $('#id_kpi').val(respuesta['id']);  
          $('#descricion_kpi').val(respuesta['nombre']);
          $('#modal_kpi').modal('hide');

        }
    });

}
 
// Consulta resultados 
function consultaResultados(id_formulario, id_usuario, accion, controlador){

  // Parámetros obtenidos del formulario
  let parametros = new FormData($('#'+id_formulario)[0]);
  parametros.append('peticion', 'ajax');
  parametros.append('accion', accion);
  parametros.append('id_usuario', id_usuario);

  // Leyendo parámetros
  parametros.forEach(function(value, key){
      console.log("key: "+key+", value: "+value);
  });

  $.ajax({
    url: controlador,
    type: 'POST',
    data: parametros,
    cache: false,
    processData: false,
    contentType: false,
    dataType: 'json',
    }).done(function(respuesta){
  
          console.log(respuesta);
          let elementos = respuesta.length;
          let html = '';

          console.log(elementos);

          for (var i = 0; i < elementos; i++) {

            let colobotonestado = '';
            let icono = '';
            // Fecha actual 
            let f = new Date();
            // var fecha = f.getFullYear()+'-'+f.getMonth();
            let month = (f.getMonth()+1);
            // propuedad de lectura para el campo resultado.
            let atributo = '';
            let buttondisabled = '';

            // Definimos icono y color para el estado del resultado.
            if(respuesta[i]['porcentaje'] <= respuesta[i]['gestion_bajo']){
              
              colobotonestado = 'background: red;';
              icono = 'fa-times';

            }else if(respuesta[i]['porcentaje'] > respuesta[i]['gestion_bajo'] && respuesta[i]['porcentaje'] <= respuesta[i]['gestion_medio']){
              
              colobotonestado = 'background: #F39C12;';
              icono = 'fa-exclamation-triangle';

            }else if(respuesta[i]['porcentaje'] > respuesta[i]['gestion_medio']){
              
              colobotonestado = 'background: #00A65A;';
              icono = 'fa-check';

            }

            console.log(month);
            // De a cuerdo al periodo definimos si se puede o no registrar un resultado.
            if(respuesta[i]['id_perfil'] == 11 || respuesta[i]['id_perfil'] == 16 && respuesta[i]['periodo'] < month ){
              // Si el usuario logueado es ADMINISTRADORES (id = 11) o SUPERADMIN (id = 16)
              atributo = '';
              buttondisabled = '';

            }else if(respuesta[i]['periodo'] > month || respuesta[i]['periodo'] < month){

              atributo = 'readonly=""';
              buttondisabled = 'disabled=""';

            }

            html += '<tr>'+
                      '<form id="registra_resultado_indicador'+respuesta[i]['id_periodo_indicador']+'">'+
                        '<td><input type="hidden" name="id_result'+respuesta[i]['id_periodo_indicador']+'" id="id_result'+respuesta[i]['id_periodo_indicador']+'" value="'+respuesta[i]['id_periodo_indicador']+'">'+respuesta[i]['desc_proceso']+'</td>'+
                        '<td>'+respuesta[i]['periodo']+'</td>'+
                        '<td><input class="form-control" type="number" min="0" '+atributo+' name="resultado'+respuesta[i]['id_periodo_indicador']+'" id="resultado'+respuesta[i]['id_periodo_indicador']+'" value="'+respuesta[i]['resultado']+'" style="height: 30px;"></td>'+
                        '<td>'+respuesta[i]['nombre_usuario_registra_resultado']+'</td>'+
                        '<td>'+respuesta[i]['fecha_registro_resultado']+'</td>'+
                        '<td>'+
                          '<button class="btn" style="'+colobotonestado+'"><i class="fas '+icono+'"></i></button>'+
                        '</td>'+
                        '<td><button class="btn btn-success" type="button" '+buttondisabled+' onclick="registraResultado('+respuesta[i]['id_periodo_indicador']+', '+id_usuario+');"><i class="far fa-save"></i></button></td>'+
                      '</form>'+
                    '</tr>';  

          }

          console.log(html);

          $('#lista_resultados').html(html);
        
    });

}

// Registra resultado de indicadores
function registraResultado(id_resultado, id_usuario){
  
  // registra_resultado_indicador
  let parametros = new FormData($('#registra_resultado_indicador'+id_resultado)[0]);
  parametros.append('peticion', 'ajax');
  parametros.append('accion', 'registrar_resultado_indicador');
  parametros.append('id_usuario', id_usuario);
  parametros.append('id_result', $('#id_result'+id_resultado).val());
  parametros.append('resultado', $('#resultado'+id_resultado).val());
  // Leyendo parámetros
  parametros.forEach(function(value, key){
    console.log("key: "+key+", value: "+value);
  });


   $.ajax({
    url: '../controlador/administracion.controlador.php',
    type: 'POST',
    data: parametros,
    cache: false,
    processData: false,
    contentType: false,
    dataType: 'json',
    }).done(function(respuesta){
  
      console.log(respuesta);

        if(respuesta.hasOwnProperty('success')){

            Swal.fire({
              icon: 'success',
              title: 'Proceso exitoso',
              html: respuesta.success,
              confirmButtonText: 'Aceptar',
              confirmButtonColor: '#28A745',
              showConfirmButton: true,
              // footer: '<a href>Why do I have this issue?</a>'

            })

            consultaResultados('frm_consulta_resultado', id_usuario, 'consulta_resultados_indicador', '../controlador/administracion.controlador.php');

        }else if(respuesta.hasOwnProperty('info')){

          Swal.fire({
              icon: 'info',
              // title: 'Error',
              html: respuesta.info,
              confirmButtonText: 'Aceptar',
              confirmButtonColor: '#28A745',
              showConfirmButton: true,
              // footer: '<a href>Why do I have this issue?</a>'
            })

        }else{

            Swal.fire({
              icon: 'error',
              // title: 'Error',
              html: respuesta.error,
              confirmButtonText: 'Aceptar',
              confirmButtonColor: '#28A745',
              showConfirmButton: true,
              // footer: '<a href>Why do I have this issue?</a>'
            })
            
        }

    });      

}

