{% extends "baseAdmin.html" %}
{% block titulo %}
  .::Balance de Dolares
{% endblock titulo %}
{% block content1 %}
    <div class="container">
      <script type="text/javascript">
        $("#navBaL").attr('class','dropdown active');
        $("#navBalDo").attr('class','active');
      </script>
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="card">
                <div class="card-head card-head-xs style-default"> <strong>BALANCE DE DOLARES</strong></div>
                <div class="card-body">
                  <div class="row">
                    <div class="col-md-4">
                      <div class="panel panel-warning">
                        <div class="panel-body">
                          <div class="row">
                            <p class="bg-success" align="center">
                                      <!--&nbsp;-->
                              <B >OPCIONES</B> 
                            </p>
                          </div>
                          <div class="row">
                            <br>
                          </div>
                           <div class="row">
                            <div class="col-md-8 col-md-offset-2">
                              <div class="form-group" id="CampoRadio">
                                <label class="radio-inline">
                                  <input type="radio" name="tc" id="todo" value="t" checked><b>Todo</b>
                                </label>
                                <label class="radio-inline">
                                  <input type="radio" name="tc" id="ocifina" value="o"><b> Por Oficina</b>
                                </label>
                              </div>                               
                              <p></p>
                            </div>
                          </div>
                          <div class="row" id="campoO">
                            <div class="col-md-3">
                              <h5><b>Oficina:</b></h5>
                            </div>
                            <div class="col-md-6">
                              <select class="form-control" id="comboOfi">
                              </select>
                              <p></p>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-3" align="right">
                              <h5><b>Frecuencia:</b></h5>
                            </div>
                            <div class="col-md-6">
                              <select class="form-control" id="combofr">
                                <option value="d">Dias</option>
                                <option value="m">Meses</option>
                                <option value="a">Años</option>
                              </select>
                              <p></p>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-2">
                              <h5><b>Periodo</b></h5>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-1 col-md-offset-2">
                              <h5><b>Del:</b></h5>
                            </div>
                            <div class="col-md-6">
                              <input type='text' class=" form-control" id="txtfecha1">
                              <p></p>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-1 col-md-offset-2">
                              <h5><b>Al:</b></h5>
                            </div>
                            <div class="col-md-6">
                              <input type='text' class="form-control" id="txtfecha2">
                              <p></p>
                            </div>
                          </div>
                          <div class="row">
                            <br>
                            <br>
                            <br>
                          </div>
                          <div class="row">
                            <div class="col-md-8 col-md-offset-2">
                               <button type="button" class=" btn btn-block btn-success" id="procesar">Procesar</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-8">
                      <div class="panel panel-warning">
                        <div class="panel-body">
                          <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active" id="tab1"><a href="#pg1" aria-controls="pg1" role="tab" data-toggle="tab">Todo</a></li>
                            <li role="presentation" id="tab2"><a href="#pg2" aria-controls="pg2" role="tab" data-toggle="tab">Barras</a></li>
                            <li role="presentation" id="tab3"><a href="#pg3" aria-controls="pg3" role="tab" data-toggle="tab">linea</a></li>
                            <li role="presentation" id="tab4"><a href="#pg4" aria-controls="pg4" role="tab" data-toggle="tab">Torta</a></li>
                            <li role="presentation" id="tab5"><a href="#pg5" aria-controls="pg5" role="tab" data-toggle="tab">Radar</a></li>
                          </ul>
                          <!-- Tab panes -->
                          <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="pg1">
                              <div class="row">
                                <br>
                              </div>
                              <div class="row">
                                <p class="bg-info" align="center">
                                  <B >GRAFICOS</B> 
                                </p>
                              </div>
                              <div class="row">
                                <br>
                              </div>
                            </div>
                            <div role="tabpanel" class="tab-pane active" id="pg2">
                              <div class="row">
                                <br>
                              </div>
                              <div class="row oculto">
                                <div class="col-md-12">
                                  <p class="bg-info" align="center">
                                    <b> BARRAS</b>
                                  </p>
                                </div> 
                              </div>
                              <div class="row">
                                <div class="col-md-12" align="center">
                                  <div style="width: 100%; height:500px;">
                                    <canvas id="canvas1" height="400" width="600"></canvas>
                                  </div>
                                </div>
                              </div>
                              <div class="row oculto">
                                <div class="col-md-3 col-md-offset-3">
                                  <div class="alert alert-success" role="alert"align="center" style="padding:1px;">
                                    <b>Inversion</b>
                                  </div>
                                </div> 
                                <div class="col-md-3">
                                  <div class="alert alert-info" role="alert"align="center" style="padding:1px;">
                                    <b>Beneficio</b>
                                  </div>
                                </div>
                              </div>
                              
                            </div>
                            <div role="tabpanel" class="tab-pane active" id="pg3">
                              <div class="row">
                                <br>
                              </div>
                              <div class="row oculto">
                                <div class="col-md-12">
                                  <p class="bg-info" align="center">
                                    <b> LINEAS</b>
                                  </p>
                                </div> 
                              </div>
                              <div class="row">
                                <div class="col-md-12">
                                  <div style="width: 100%; height:500px;">
                                    <canvas id="canvas2" height="400" width="600"></canvas>
                                  </div>
                                </div>
                              </div>
                              <div class="row oculto">
                                <div class="col-md-3 col-md-offset-3">
                                  <div class="alert alert-success" role="alert"align="center" style="padding:1px;">
                                    <b>Inversion</b>
                                  </div>
                                </div> 
                                <div class="col-md-3">
                                  <div class="alert alert-info" role="alert"align="center" style="padding:1px;">
                                    <b>Beneficio</b>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div role="tabpanel" class="tab-pane active" id="pg4">
                              <div class="row">
                                <br>
                              </div>
                              <div class="row oculto">
                                <div class="col-md-12">
                                  <p class="bg-info" align="center">
                                    <b> TORTA</b>
                                  </p>
                                </div> 
                              </div>
                              <div class="row oculto">
                                <div class="col-md-2" align="right">
                                  <h5>Seleccion:</h5>
                                </div>
                                <div class="col-md-4">
                                   <select class="form-control" id="Combo_of_t">
                                  </select>
                                </div>

                              </div>
                              <div class="row">
                                <br>
                              </div>
                              <div class="row">
                                  <p class="bg-warning" align="center">
                                    <B id="nt"></B> 
                                  </p>
                              </div>
                              <div class="row">
                                <br>
                              </div>
                              <div class="row">
                                <div class="col-md-12">
                                  <div style="width: 100%; height:500px;">
                                    <canvas id="canvas3" height="400" width="600"></canvas>
                                  </div>
                                </div>
                              </div>
                              <div class="row oculto">
                                <div class="col-md-3 col-md-offset-3">
                                  <div class="alert alert-success" role="alert"align="center" style="padding:1px;">
                                    <b>Inversion</b>
                                  </div>
                                </div> 
                                <div class="col-md-3">
                                  <div class="alert alert-info" role="alert"align="center" style="padding:1px;">
                                    <b>Beneficio</b>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div role="tabpanel" class="tab-pane active" id="pg5">
                              <div class="row">
                                <br>
                              </div>
                              <div class="row oculto">
                                <div class="col-md-12">
                                  <p class="bg-info" align="center">
                                    <b> RADAR</b>
                                  </p>
                                </div> 
                              </div>
                              <div class="row">
                                <div class="col-md-12">
                                  <div style="width: 100%; height:500px;">
                                    <canvas id="canvas4" height="400" width="600"></canvas>
                                  </div>
                                </div>
                              </div>
                              <div class="row oculto">
                                <div class="col-md-3 col-md-offset-3">
                                  <div class="alert alert-success" role="alert"align="center" style="padding:1px;">
                                    <b>Inversion</b>
                                  </div>
                                </div> 
                                <div class="col-md-3">
                                  <div class="alert alert-info" role="alert"align="center" style="padding:1px;">
                                    <b>Beneficio</b>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row oculto">
                    <div class="col-md-12">
                      <div class="table-responsive">
                        <table class="table table-striped table-bordered">
                          <thead>
                            <tr>
                              <th>&nbsp;</th>
                              <th>Inversion S/.</th>
                              <th>Prom. Tipo Cambio Inversion</th>
                              <th>Beneficio S/.</th>
                              <th>Prom. Tipo Cambio Beneficio</th>
                              <th>Utilidad S/.</th>
                            </tr>
                          </thead>
                          <tbody id="listaE"></tbody>
                        </table>                         
                      </div>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
    </div>
                        <script type="text/javascript">
                        var myBar=null,myPie=null,myRadar=null,myLine=null;
                        var barChartData,lineChartData,pieData,radarChartData;
                        var array_x,array_y1,array_y2,array_y1d,array_y2d;
                        var ind=0;
                          $(document).ready(function (){
                            ajax_oficina();
                            //***********************************************************************
                            $('#txtfecha1').datetimepicker({
                                locale: 'es',
                                format: 'YYYY-MM-DD'
                              });
                            $('#txtfecha2').datetimepicker({
                                locale: 'es',
                                format: 'YYYY-MM-DD'
                              });
                             $('#combofr').change(function(){
                                $('#txtfecha1').prop('value',null);
                                $('#txtfecha2').prop('value',null);
                                if($(this).val()=='d'){
                                    $('#txtfecha1').data("DateTimePicker").destroy();
                                    $('#txtfecha2').data("DateTimePicker").destroy();
                                    $('#txtfecha1').datetimepicker({
                                      locale: 'es',
                                      format: 'YYYY-MM-DD'
                                    });
                                    $('#txtfecha2').datetimepicker({
                                      locale: 'es',
                                      format: 'YYYY-MM-DD'
                                    });
                                }
                                else{
                                  if($(this).val()=='m'){
                                      $('#txtfecha1').data("DateTimePicker").destroy();
                                      $('#txtfecha2').data("DateTimePicker").destroy();
                                      $('#txtfecha1').datetimepicker({
                                        locale: 'es',
                                        format: 'YYYY-MM'
                                      });
                                      $('#txtfecha2').datetimepicker({
                                        locale: 'es',
                                        format: 'YYYY-MM'
                                      });
                                  }
                                  else{
                                      $('#txtfecha1').data("DateTimePicker").destroy();
                                      $('#txtfecha2').data("DateTimePicker").destroy();
                                      $('#txtfecha1').datetimepicker({
                                        locale: 'es',
                                        format: 'YYYY'
                                      });
                                      $('#txtfecha2').datetimepicker({
                                        locale: 'es',
                                        format: 'YYYY'
                                      });
                                  }
                                }
                              });
                            //
                            function ajax_balance_todo(){
                              $.ajax({
                                data:{'fre':$("#combofr").val(),"F1":$("#txtfecha1").val(),"F2":$("#txtfecha2").val()},
                                url:'/Balance_do_fechas_todo_oficinas_ajax/',
                                type:'GET',
                                dataType:'json',
                                success: function(data){
                                  var array_nombres=[],array_is=[],array_es=[];
                                  var fha=0,fde=0;
                                  var html="";
                                  var html1="";
                                  $("#Combo_of_t").html("");
                                  $("#listaE").html("");
                                  for(var i=0;i<data.length;i++){
                                    array_nombres.push(data[i].oficina);
                                    fde=parseFloat(data[i].de);
                                    fha=parseFloat(data[i].ha);
                                    html += '<option value="'+i+'">'+data[i].oficina+'</option>';
                                    html1 += '<tr id="'+i+'"><th>'+data[i].oficina+'</th><td>'+data[i].de+'</td><td>'+data[i].pc_de+'</td><td>'+data[i].ha +'</td><td>'+data[i].pc_ha+'</td><td>'+round(fha-fde,2)+'</td></tr>';
                                    array_is.push(data[i].de);
                                    array_es.push(data[i].ha);
                                  }
                                  $("#Combo_of_t").html(html);
                                  $("#listaE").html(html1);
                                  array_x=array_nombres;
                                  array_y1= array_is;
                                  array_y2=array_es;
                                  llenar_datos_barras(array_x,array_y1,array_y2);
                                  llenar_datos_linea(array_x,array_y1,array_y2);
                                  llenar_datos_radar(array_x,array_y1,array_y2);
                                  llenar_datos_pie(array_x[0],array_y1[0],array_y2[0]);
                                }
                              });
                            };
                            //
                            function ajax_balance_oficina(){
                              $.ajax({
                                data:{'fre':$("#combofr").val(),"F1":$("#txtfecha1").val(),"F2":$("#txtfecha2").val(),'of':$("#comboOfi").val()},
                                url:'/Balance_do_fechas_oficina_ajax/',
                                type:'GET',
                                dataType:'json',
                                success: function(data){
                                  var array_nombres=[],array_is=[],array_es=[];
                                  var fha=0,fde=0;
                                  var html="";
                                  var html1="";
                                  $("#Combo_of_t").html("");
                                  $("#listaE").html("");
                                  for(var i=0;i<data.length;i++){
                                    array_nombres.push(data[i].f);
                                    fde=parseFloat(data[i].de);
                                    fha=parseFloat(data[i].ha);
                                    html += '<option value="'+i+'">'+data[i].f+'</option>';
                                    html1 += '<tr id="'+i+'"><th>'+data[i].f+'</th><td>'+data[i].de+'</td><td>'+data[i].pc_de+'</td><td>'+data[i].ha +'</td><td>'+data[i].pc_ha+'</td><td>'+round(fha-fde,2)+'</td></tr>';
                                    array_is.push(data[i].de);
                                    array_es.push(data[i].ha);
                                  }
                                  array_x=array_nombres;
                                  $("#Combo_of_t").html(html);
                                  $("#listaE").html(html1);
                                  array_y1= array_is;
                                  array_y2=array_es;
                                  llenar_datos_barras(array_x,array_y1,array_y2);
                                  llenar_datos_linea(array_x,array_y1,array_y2);
                                  llenar_datos_radar(array_x,array_y1,array_y2);
                                  llenar_datos_pie(array_x[0],array_y1[0],array_y2[0]);
                                }
                              });
                            };
                            //
                            function ajax_oficina(){
                              $.ajax({
                                url:'/Admin/oficinas_ajax/',
                                //async:false,
                                type:'GET',
                                dataType:'json',
                                success: function(data){
                                var html ="";
                                  $("#ComboOfi").html('');
                                  for(var i=0;i<data.length;i++){
                                    html += '<option value="'+data[i].pk+'">'+data[i].nombre_oficina+'</option>';
                                  }
                                  $('#comboOfi').html(html);
                                }
                              });
                            };
                            //
                            $("#campoO").hide();
                            $("#CampoRadio").click(function(){
                              if($('input:radio[name=tc]:checked').val()=="t"){
                                $("#campoO").hide();
                              }
                              else{
                                $("#campoO").show();
                              }
                            })
                            //
                            $("#Combo_of_t").change(function(){
                              ind = parseInt($(this).val());
                              llenar_datos_pie(array_x[ind],array_y1[ind],array_y2[ind]);
                            })
                            $("#procesar").click(function(){
                              $('.nav-tabs a[href="#pg1"]').tab('show');
                              $(".oculto").hide();
                               $("#pg1").attr('class','tab-pane active');
                               $("#pg2").attr('class','tab-pane active');
                               $("#pg3").attr('class','tab-pane active');
                               $("#pg4").attr('class','tab-pane active');
                               $("#pg5").attr('class','tab-pane active');
                              if($('input:radio[name=tc]:checked').val()=="t"){
                                ajax_balance_todo();
                              }
                              else{
                                ajax_balance_oficina();
                              }
                            })
                            function round(value, decimals) {
                              return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
                            }
                            $(".oculto").hide();
                            //***************************************************************************
                            var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
                            // ----------------------------BARRAS------------------------------------
                            barChartData = {
                                labels : ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio"],
                                datasets : [
                                  {
                                    fillColor : "rgba(220,220,220,0.5)",
                                    strokeColor : "rgba(220,220,220,0.8)",
                                    highlightFill: "rgba(220,220,220,0.75)",
                                    highlightStroke: "rgba(220,220,220,1)",
                                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                                  },
                                  {
                                    fillColor : "rgba(151,187,205,0.5)",
                                    strokeColor : "rgba(151,187,205,0.8)",
                                    highlightFill : "rgba(151,187,205,0.75)",
                                    highlightStroke : "rgba(151,187,205,1)",
                                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                                  }
                                ]

                              }
                               var ctx = document.getElementById("canvas1").getContext("2d");
                                  myBar = new Chart(ctx).Bar(barChartData, {
                                    responsive : true
                                  });
                            function llenar_datos_barras(array_x1,array_y11,array_y21){
                               barChartData = {
                                //labels : ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio"],
                                labels : array_x1,
                                datasets : [
                                  {
                                    fillColor : "rgba(155,185,131,0.5)",
                                    strokeColor : "rgba(155,185,131,0.8)",
                                    highlightFill: "rgba(155,185,131,0.75)",
                                    highlightStroke: "rgba(155,185,131,1)",
                                    data : array_y11
                                  },
                                  {
                                    fillColor : "rgba(159, 182, 230,0.5)",
                                    strokeColor : "rgba(159, 182, 230,0.8)",
                                    highlightFill : "rgba(159, 182, 230,0.75)",
                                    highlightStroke : "rgba(159, 182, 230,1)",
                                    data : array_y21
                                  }
                                ]

                              }
                              myBar.destroy();
                              var ctx = document.getElementById("canvas1").getContext("2d");
                              myBar = new Chart(ctx).Bar(barChartData, {
                                responsive : true
                              });
                            }
                            //-------------------------------LINEA-----------------------------------
                            lineChartData = {
                                labels : ["January","February","March","April","May","June","July"],
                                datasets : [
                                  {
                                    label: "My First dataset",
                                    fillColor : "rgba(220,220,220,0.2)",
                                    strokeColor : "rgba(220,220,220,1)",
                                    pointColor : "rgba(220,220,220,1)",
                                    pointStrokeColor : "#fff",
                                    pointHighlightFill : "#fff",
                                    pointHighlightStroke : "rgba(220,220,220,1)",
                                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                                  },
                                  {
                                    label: "My Second dataset",
                                    fillColor : "rgba(151,187,205,0.2)",
                                    strokeColor : "rgba(151,187,205,1)",
                                    pointColor : "rgba(151,187,205,1)",
                                    pointStrokeColor : "#fff",
                                    pointHighlightFill : "#fff",
                                    pointHighlightStroke : "rgba(151,187,205,1)",
                                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                                  }
                                ]

                              }
                              var ctx1 = document.getElementById("canvas2").getContext("2d");
                                  myLine = new Chart(ctx1).Line(lineChartData, {
                                    responsive: true
                                  });
                              function llenar_datos_linea(array_x1,array_y11,array_y21){
                                lineChartData = {
                                labels : array_x1,
                                datasets : [
                                    {
                                      label: "My First dataset",
                                      fillColor : "rgba(155,185,131,0.2)",
                                      strokeColor : "rgba(155,185,131,1)",
                                      pointColor : "rgba(155,185,131,1)",
                                      pointStrokeColor : "#fff",
                                      pointHighlightFill : "#fff",
                                      pointHighlightStroke : "rgba(155,185,131,1)",
                                      data : array_y11
                                    },
                                    {
                                      label: "My Second dataset",
                                      fillColor : "rgba(159, 182, 230,0.2)",
                                      strokeColor : "rgba(159, 182, 230,1)",
                                      pointColor : "rgba(159, 182, 230,1)",
                                      pointStrokeColor : "#fff",
                                      pointHighlightFill : "#fff",
                                      pointHighlightStroke : "rgba(159, 182, 230,1)",
                                      data : array_y21
                                    }
                                  ]
                                }
                                  myLine.destroy();
                                  var ctx1 = document.getElementById("canvas2").getContext("2d");
                                  myLine = new Chart(ctx1).Line(lineChartData, {
                                    responsive: true
                                  });
                              }
                              //------------------------------TORTA------------------------
                              pieData = [
                                {
                                  value: 300,
                                  color:"#F7464A",
                                  highlight: "#FF5A5E",
                                  label: "Red"
                                },
                                {
                                  value: 50,
                                  color: "#46BFBD",
                                  highlight: "#5AD3D1",
                                  label: "Green"
                                },
                                {
                                  value: 100,
                                  color: "#FDB45C",
                                  highlight: "#FFC870",
                                  label: "Yellow"
                                },
                                {
                                  value: 40,
                                  color: "#949FB1",
                                  highlight: "#A8B3C5",
                                  label: "Grey"
                                },
                                {
                                  value: 120,
                                  color: "#4D5360",
                                  highlight: "#616774",
                                  label: "Dark Grey"
                                }

                              ];
                              function llenar_datos_pie(nombre,val1,val2){
                                $("#nt").text(nombre);
                                pieData = [
                                  {
                                    value: val1,
                                    color:"#468A47",
                                    highlight: "#3c763d",
                                    label: "Inversion"
                                  },
                                  {
                                    value: val2,
                                    color: "#5872DA",
                                    highlight: "#4E64BC",
                                    label: "Beneficio"
                                  }
                                ];
                                  myPie.destroy();
                                  var ctx2 = document.getElementById("canvas3").getContext("2d");
                                  myPie = new Chart(ctx2).Pie(pieData,{
                                    responsive: true
                                  });
                              }

                              //------------------------------RADAR---------------------
                              radarChartData = {
                              labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
                              datasets: [
                                {
                                  label: "My First dataset",
                                  fillColor: "rgba(220,220,220,0.2)",
                                  strokeColor: "rgba(220,220,220,1)",
                                  pointColor: "rgba(220,220,220,1)",
                                  pointStrokeColor: "#fff",
                                  pointHighlightFill: "#fff",
                                  pointHighlightStroke: "rgba(220,220,220,1)",
                                  data: [65,59,90,81,56,55,40]
                                },
                                {
                                  label: "My Second dataset",
                                  fillColor: "rgba(151,187,205,0.2)",
                                  strokeColor: "rgba(151,187,205,1)",
                                  pointColor: "rgba(151,187,205,1)",
                                  pointStrokeColor: "#fff",
                                  pointHighlightFill: "#fff",
                                  pointHighlightStroke: "rgba(151,187,205,1)",
                                  data: [28,48,40,19,96,27,100]
                                }
                              ]
                            };
                            function llenar_datos_radar(array_x1,array_y11,array_y21){
                              radarChartData = {
                                labels: array_x1,
                                datasets: [
                                  {
                                    label: "My First dataset",
                                    fillColor: "rgba(155,185,131,0.2)",
                                    strokeColor: "rgba(155,185,131,1)",
                                    pointColor: "rgba(155,185,131,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(155,185,131,1)",
                                    data: array_y11
                                  },
                                  {
                                    label: "My Second dataset",
                                    fillColor: "rgba(159, 182, 230,0.2)",
                                    strokeColor: "rgba(159, 182, 230,1)",
                                    pointColor: "rgba(159, 182, 230,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(159, 182, 230,1)",
                                    data: array_y21
                                  }
                                ]
                              };
                                myRadar.destroy();
                                myRadar = new Chart(document.getElementById("canvas4").getContext("2d")).Radar(radarChartData, {
                                    responsive: true
                                  });
                            }
                            //-------------------------------------------------------------------------
                                 
                                  var ctx2 = document.getElementById("canvas3").getContext("2d");
                                  myPie = new Chart(ctx2).Pie(pieData,{
                                    responsive: true
                                  });
                                  myRadar = new Chart(document.getElementById("canvas4").getContext("2d")).Radar(radarChartData, {
                                    responsive: true
                                  }); 
                            //--------------------------------------------------------------------------
                              $("#tab1").click(function(){
                                $(".oculto").hide();
                                $("#pg1").attr('class','tab-pane active');
                                $("#pg2").attr('class','tab-pane active');
                                $("#pg3").attr('class','tab-pane active');
                                $("#pg4").attr('class','tab-pane active');
                                $("#pg5").attr('class','tab-pane active');
                              })
                              $("#tab2").click(function(){
                                $(".oculto").show();
                                if(myBar==null){
                                  var ctx = document.getElementById("canvas1").getContext("2d");
                                  myBar = new Chart(ctx).Bar(barChartData, {
                                    responsive : true
                                  });
                                }
                                else{
                                  myBar.render();
                                }
                                
                              })
                              $("#tab3").click(function(){
                                $(".oculto").show();
                                if(myLine==null){
                                  var ctx1 = document.getElementById("canvas2").getContext("2d");
                                  myLine = new Chart(ctx1).Line(lineChartData, {
                                    responsive: true
                                  });
                                }
                                else{
                                  myLine.render();
                                }
                                
                              })
                              $("#tab4").click(function(){
                                $(".oculto").show();
                                if(myPie==null){
                                  var ctx2 = document.getElementById("canvas3").getContext("2d");
                                  myPie = new Chart(ctx2).Pie(pieData,{
                                    responsive: true
                                  });

                                }
                                else{
                                  myPie.render();
                                }
                                
                                
                              })
                              $("#tab5").click(function(){
                                $(".oculto").show();
                                if(myRadar==null){
                                  myRadar = new Chart(document.getElementById("canvas4").getContext("2d")).Radar(radarChartData, {
                                    responsive: true
                                  });
                                }
                                else{
                                  myRadar.render();
                                }
                                
                                
                              })
                              //------------------------------------------------------
                             
                            })
                          </script>
{% endblock content1 %}