text: /*=========================================================================================
      File Name: change-waterfall.js
      Description: echarts change waterfall chart
     
      
      
      
     
  ==========================================================================================*/
  
  // Change Waterfall chart
  // ------------------------------
  
  $(window).on("load", function(){
  
      // Set paths
      // ------------------------------
  
      require.config({
          paths: {
              echarts: '../../../app-assets/vendors/js/charts/echarts'
          }
      });
  
  
      // Configuration
      // ------------------------------
  
      require(
          [
              'echarts',
              'echarts/chart/bar',
              'echarts/chart/line'
          ],
  
  
          // Charts setup
          function (ec) {
              // Initialize chart
              // ------------------------------
              var myChart = ec.init(document.getElementById('change-waterfall'));
  
              // Chart Options
              // ------------------------------
              chartOptions = {
  
                  // Setup grid
                  grid: {
                      x: 45,
                      x2: 10,
                      y: 35,
                      y2: 25
                  },
  
                  // Add tooltip
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                          type: 'shadow'
                      },
                      formatter: function (params) {
                          var tar;
                          if (params[1].value != '-') {
                              tar = params[1];
                          }
                          else {
                              tar = params[0];
                          }
                          return tar.name + '<br/>' + tar.seriesName + ': ' + tar.value;
                      }
                  },
  
                  // Add legend
                  legend: {
                      data: ['Expenses','Income']
                  },
  
                  // Add custom colors
                  color: ['#666EE8', '#FF4961'],
  
                  // Horizontal axis
                  xAxis: [{
                      type: 'category',
                      data: ['January','February','March','April','May','June','July','August','September','October','November','December']
                  }],
  
                  // Vertical axis
                  yAxis: [{
                      type: 'value'
                  }],
  
                  // Add series
                  series: [
                      {
                          name: 'Aid',
                          type: 'bar',
                          stack: 'Total',
                          itemStyle: {
                              normal: {
                                  barBorderColor: 'rgba(0,0,0,0)',
                                  color: 'rgba(0,0,0,0)'
                              },
                              emphasis: {
                                  barBorderColor: 'rgba(0,0,0,0)',
                                  color: 'rgba(0,0,0,0)'
                              }
                          },
                          data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292, 992]
                      },
                      {
                          name: 'Income',
                          type: 'bar',
                          stack: 'Total',
                          itemStyle: { normal: {label: {show: true, position: 'top'}}},
                          data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
                      },
                      {
                          name: 'Expenses',
                          type: 'bar',
                          stack: 'Total',
                          itemStyle: { normal: {label: {show: true, position: 'bottom'}}},
                          data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203,300]
                      }
                  ]
              };
  
  
              // Apply options
              // ------------------------------
  
              myChart.setOption(chartOptions);
  
  
              // Resize chart
              // ------------------------------
  
              $(function () {
  
                  // Resize chart on menu width change and window resize
                  $(window).on('resize', resize);
                  $(".menu-toggle").on('click', resize);
  
                  // Resize function
                  function resize() {
                      setTimeout(function() {
  
                          // Resize chart
                          myChart.resize();
                      }, 200);
                  }
              });
          }
      );
  });