text: $(document).ready(function(){
      
      $('[data-toggle="select2"]').select2();
      loadChart();
      
  });
  
  function loadChart(){
      $.ajax({
          type: "POST",
          url: $('#basePath').val()+"/service-admin/depenses-type-epn",
          data: {
              annee: $('#annee').val(),
              trimestre: $('#trimestre').val(),
              lastParam: $('#typeEpn').val()
          },
          //dataType: "html",
          success: function (details) {
              am4core.ready(function() {
  
              // Themes begin
              am4core.useTheme(am4themes_animated);
              // Themes end
              addTauxExecChart(details[0], 'depAbonne');
              addTauxExecChart(details[1], 'depPerso');
              addTauxExecChart(details[2], 'AutreDepF');
              addTauxExecChart(details[3], 'depInvest');
              
              addTauxOrdoChart(details[4], 'tauxOrdoDepAbonne');
              addTauxOrdoChart(details[5], 'tauxOrdoDepPerso');
              addTauxOrdoChart(details[6], 'tauxOrdoAutreDepF');
              addTauxOrdoChart(details[7], 'tauxOrdoDepInvest');
              
              $("#dotAbonne").html(details[8]);
              $("#engAbonne").html(details[9]);
              $("#ordAbonne").html(details[10]);
              $("#dispoBudAbonne").html(details[11]+" Millions FCFA");
              advanceTrafficLightTimer(details[11], 'imgDispoBudAbonne');
              $("#denoAbonne").html(details[12]+"<br> Millions FCFA");
              
              $("#dotPerso").html(details[13]);
              $("#engPerso").html(details[14]);
              $("#ordPerso").html(details[15]);
              $("#dispoBudPerso").html(details[16]+" Millions FCFA");
              advanceTrafficLightTimer(details[16], 'imgDispoBudPerso');
              $("#denoPerso").html(details[17]+"<br> Millions FCFA");
              
              $("#dotDepFonct").html(details[18]);
              $("#engDepFonct").html(details[19]);
              $("#ordDepFonct").html(details[20]);
              $("#dispoBudDepFonct").html(details[21]+" Millions FCFA");
              advanceTrafficLightTimer(details[21], 'imgDispoBudDepFonct');
              $("#denoDepFonct").html(details[22]+"<br> Millions FCFA");
              
              $("#dotDepInvest").html(details[23]);
              $("#engDepInvest").html(details[24]);
              $("#ordDepInvest").html(details[25]);
              $("#dispoBudDepInvest").html(details[26]+" Millions FCFA");
              advanceTrafficLightTimer(details[26], 'imgDispoBudDepInvest');
              $("#denoDepInvest").html(details[27]+"<br> Millions FCFA");
              
              createChart(details[28], 'ratioDepAbonne');
              createChart(details[29], 'ratioDepPerso');
              createChart(details[30], 'ratioDepFonct');
              /*createChart(details[3], 'tauxRealAutreRsrcInvest');
              createChart(details[4], 'tauxRealAutreRsrcFonc');
              createChart(details[5], 'tauxRealRecetFisc');
              
              advanceTrafficLightTimer(details[6], 'tauxRecouRsrcPpr');
              advanceTrafficLightTimer(details[7], 'tauxRecouSubvInvest');
              advanceTrafficLightTimer(details[8], 'tauxRecouSubvFonc');
              advanceTrafficLightTimer(details[9], 'tauxRecouAutreRsrcInvest');
              advanceTrafficLightTimer(details[10], 'tauxRecouAutreRsrcFonc');
              advanceTrafficLightTimer(details[11], 'tauxRecouRecetFisc');*/
              
              $('[data-plugin="knob"]').knob({'format': function(value) {
                      return value + '%';
                   },
                  'draw': function() {
                      $(this.i).css('font-size', '18pt');
                  }
                  });
              }); // end am4core.ready()
          },
          error: function (xhr, ajaxOptions, thrownError) {
              alert("error");
          }
      });
  }
  
  function createChart(data, id){
      if(data==undefined){
          data=0;
      }
      var chart = am4core.create(id, am4charts.GaugeChart);
      chart.innerRadius = -15;
  
      var axis = chart.xAxes.push(new am4charts.ValueAxis());
      axis.min = 0;
      axis.max = 100;
      axis.strictMinMax = true;
  
      var colorSet = new am4core.ColorSet();
  
      var gradient = new am4core.LinearGradient();
      gradient.stops.push({color:am4core.color("red")})
      gradient.stops.push({color:am4core.color("yellow")})
      gradient.stops.push({color:am4core.color("green")})
  
      axis.renderer.line.stroke = gradient;
      axis.renderer.line.strokeWidth = 10;
      axis.renderer.line.strokeOpacity = 1;
  
      axis.renderer.grid.template.disabled = true;
      axis.renderer.labels.template.disabled = true;
      /**
      * Label
      */
  
     var label = chart.radarContainer.createChild(am4core.Label);
     label.isMeasured = false;
     label.fontSize = 20;
     label.horizontalCenter = "middle";
     label.verticalCenter = "bottom";
     label.text = data+"%";
  
      var hand = chart.hands.push(new am4charts.ClockHand());
      hand.radius = am4core.percent(97);
      
      hand.showValue(data, am4core.ease.cubicOut);
  }
  
  var timeIndex = 0;
  var lightIndex = 0;
  var timer;
  
  
  var lights = [
      {
      duration: 5,
      color: 'red',
      image: $('#basePath').val()+'/assets1/images/red-h.png'
    },
    {
      duration: 4,
      color: 'green',
      image: $('#basePath').val()+'/assets1/images/green-h.png'
    },
    {
      duration: 1,
      color: 'yellow',
      image: $('#basePath').val()+'/assets1/images/orange-h.png'
    }
  ]
  
  function advanceTrafficLightTimer(data, id) {
          if(data==undefined){
              data=0;
          }
          var trafficLight = document.getElementById(id);
          if(data<=0){
              trafficLight.src = lights[0].image;
              
          }
          else if(data >0 && data<=45000){
              trafficLight.src = lights[2].image;
          }
          else{
              trafficLight.src = lights[1].image;
          }
          
          trafficLight.hidden = false;
          
  }
  
  function addTauxExecChart(data, id) {
          if(data==undefined){
              data=0;
          }
          $("#"+id).attr("value", data);
          
          $(".chargement").hide();
          $("#"+id).attr("hidden", false);
  }
  
  function addTauxOrdoChart(data, id){
      var chart = am4core.create(id, am4charts.XYChart3D);
  
  
  // Add data
  chart.data = [{
    "category": "Depenses Abonnement",
    "value1": data,
    "value2": 100
  }];
  
  // Create axes
  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "category";
  categoryAxis.renderer.grid.template.location = 0;
  categoryAxis.renderer.grid.template.strokeOpacity = 0;
  
  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.renderer.grid.template.strokeOpacity = 0;
  valueAxis.min = -10;
  valueAxis.max = 110;
  valueAxis.strictMinMax = true;
  valueAxis.renderer.baseGrid.disabled = true;
  valueAxis.renderer.labels.template.adapter.add("text", function(text) {
    if ((text > 100) || (text < 0)) {
      return "";
    }
    else {
      return text + "%";
    }
  });
  
  // Create series
  var series1 = chart.series.push(new am4charts.ConeSeries());
  series1.dataFields.valueY = "value1";
  series1.dataFields.categoryX = "category";
  series1.columns.template.width = am4core.percent(80);
          if(data<=45){
             color = "#ff0000";
          }
          else if(data >45 && data<=65){
              color = "#ed7d31";
          }
          else{
              color = "#92d050";
          }
  series1.columns.template.fill = am4core.color(color);
  series1.columns.template.stroke = am4core.color(color);
  series1.columns.template.fillOpacity = 0.9;
  series1.columns.template.strokeOpacity = 1;
  series1.columns.template.strokeWidth = 2;
  
  var series2 = chart.series.push(new am4charts.ConeSeries());
  series2.dataFields.valueY = "value2";
  series2.dataFields.categoryX = "category";
  series2.stacked = true;
  series2.columns.template.width = am4core.percent(80);
  series2.columns.template.fill = am4core.color("#000");
  series2.columns.template.fillOpacity = 0.1;
  series2.columns.template.stroke = am4core.color("#000");
  series2.columns.template.strokeOpacity = 0.2;
  series2.columns.template.strokeWidth = 2;
  }