text: /* ------------------------------------------------------------------------------
   *
   *  # Echarts - Left aligned funnel example
   *
   *  Demo JS code for left aligned funnel chart [dark theme]
   *
   * ---------------------------------------------------------------------------- */
  
  
  // Setup module
  // ------------------------------
  
  var EchartsFunnelLeftDark = function () {
  
  
      //
      // Setup module components
      //
  
      // Left aligned funnel chart
      var _funnelLeftDarkExample = function () {
          if (typeof echarts == 'undefined') {
              console.warn('Warning - echarts.min.js is not loaded.');
              return;
          }
  
          // Define element
          var funnel_left_element = document.getElementById('funnel_left');
  
  
          //
          // Charts configuration
          //
  
          if (funnel_left_element) {
  
              // Initialize chart
              var funnel_left = echarts.init(funnel_left_element);
  
  
              //
              // Chart config
              //
  
              // Options
              funnel_left.setOption({
  
                  // Colors
                  color: [
                      '#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',
                      '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
                      '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
                      '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'
                  ],
  
                  // Global text styles
                  textStyle: {
                      fontFamily: 'Roboto, Arial, Verdana, sans-serif',
                      fontSize: 13
                  },
  
                  // Add title
                  title: {
                      text: 'Browser popularity',
                      subtext: 'Open source information',
                      left: 'center',
                      textStyle: {
                          fontSize: 17,
                          fontWeight: 500,
                          color: '#fff'
                      },
                      subtextStyle: {
                          fontSize: 12,
                          color: '#fff'
                      }
                  },
  
                  // Add tooltip
                  tooltip: {
                      trigger: 'item',
                      backgroundColor: 'rgba(255,255,255,0.9)',
                      padding: [10, 15],
                      textStyle: {
                          color: '#222',
                          fontSize: 13,
                          fontFamily: 'Roboto, sans-serif'
                      },
                      formatter: '{a} <br/>{b}: {c}%'
                  },
  
                  // Add legend
                  legend: {
                      orient: 'vertical',
                      top: 'center',
                      left: 0,
                      data: ['IE', 'Opera', 'Safari', 'Firefox', 'Chrome'],
                      itemHeight: 8,
                      itemWidth: 8,
                      textStyle: {
                          color: '#fff'
                      }
                  },
  
                  // Add series
                  series: [
                      {
                          name: 'Statistics',
                          type: 'funnel',
                          left: '25%',
                          right: '25%',
                          top: '16%',
                          height: '84%',
                          funnelAlign: 'left',
                          itemStyle: {
                              normal: {
                                  borderColor: '#353f53',
                                  borderWidth: 2,
                                  label: {
                                      position: 'right'
                                  }
                              }
                          },
                          data: [
                              {value: 60, name: 'Safari'},
                              {value: 40, name: 'Firefox'},
                              {value: 20, name: 'Chrome'},
                              {value: 80, name: 'Opera'},
                              {value: 100, name: 'IE'}
                          ]
                      }
                  ]
              });
          }
  
  
          //
          // Resize charts
          //
  
          // Resize function
          var triggerChartResize = function () {
              funnel_left_element && funnel_left.resize();
          };
  
          // On sidebar width change
          var sidebarToggle = document.querySelectorAll('.sidebar-control');
          if (sidebarToggle) {
              sidebarToggle.forEach(function (togglers) {
                  togglers.addEventListener('click', triggerChartResize);
              });
          }
  
          // On window resize
          var resizeCharts;
          window.addEventListener('resize', function () {
              clearTimeout(resizeCharts);
              resizeCharts = setTimeout(function () {
                  triggerChartResize();
              }, 200);
          });
      };
  
  
      //
      // Return objects assigned to module
      //
  
      return {
          init: function () {
              _funnelLeftDarkExample();
          }
      }
  }();
  
  
  // Initialize module
  // ------------------------------
  
  document.addEventListener('DOMContentLoaded', function () {
      EchartsFunnelLeftDark.init();
  });
  