text: /*=========================================================================================
      File Name: multiple-gauge.js
      Description: echarts multiple gauge chart
      ----------------------------------------------------------------------------------------
      Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
      Version: 1.0
      Author: PIXINVENT
      Author URL: http://www.themeforest.net/user/pixinvent
  ==========================================================================================*/
  
  // Multiple gauge chart
  // ------------------------------
  $(window).on("load", function() {
  
      // Set paths
      // ------------------------------
  
      require.config({
          paths: {
              echarts: 'app-assets/vendors/js/charts/echarts'
          }
      });
  
  
      // Configuration
      // ------------------------------
  
      require(
          [
              'echarts',
              'echarts/chart/funnel',
              'echarts/chart/gauge'
          ],
  
  
          // Charts setup
          function(ec) {
  
              // Initialize chart
              // ------------------------------
              var myChart = ec.init(document.getElementById('multiple-gauge'));
  
              // Chart Options
              // ------------------------------
              multigaugeOptions = {
  
                  // Add tooltip
                  tooltip: {
                      formatter: "{a} <br/>{b} : {c}%"
                  },
  
                  // Add toolbox
                  toolbox: {
                      show: true,
                      feature: {
                          mark: { show: true },
                          restore: { show: true },
                          saveAsImage: { show: true }
                      }
                  },
  
                  // Enable drag recalculate
                  calculable: true,
  
                  // Add series
                  series: [{
                          name: 'Speed',
                          type: 'gauge',
                          z: 3,
                          min: 0,
                          max: 220,
                          splitNumber: 11,
                          axisLine: { // Coordinate axis
                              lineStyle: { // Attribute lineStyle control line style
                                  width: 10
                              }
                          },
                          axisTick: { // Axis small marker
                              length: 15, // Attribute length Control line length
                              lineStyle: { // Attribute lineStyle control line style
                                  color: 'auto'
                              }
                          },
                          splitLine: { // Divider
                              length: 20, // Attribute length Control line length
                              lineStyle: { // Attribute lineStyle (see lineStyle) control line style
                                  color: 'auto'
                              }
                          },
                          title: {
                              textStyle: { // Remaining properties using the global default text style, see TEXTSTYLE
                                  fontWeight: 'bolder',
                                  fontSize: 20,
                                  fontStyle: 'italic'
                              }
                          },
                          detail: {
                              textStyle: { // Remaining properties using the global default text style, see TEXTSTYLE
                                  fontWeight: 'bolder'
                              }
                          },
                          data: [{ value: 40, name: 'km/h' }]
                      },
                      {
                          name: 'Rotating speed',
                          type: 'gauge',
                          center: ['15%', '55%'], // Default global center
                          radius: '50%',
                          min: 0,
                          max: 7,
                          endAngle: 45,
                          splitNumber: 7,
                          axisLine: { // Coordinate axis
                              lineStyle: { // Attribute lineStyle control line style
                                  width: 8
                              }
                          },
                          axisTick: { // Axis small marker
                              length: 12, // Attribute length Control line length
                              lineStyle: { // Attribute lineStyle control line style
                                  color: 'auto'
                              }
                          },
                          splitLine: { // Divider
                              length: 20, // Attribute length Control line length
                              lineStyle: { // Attribute lineStyle (see lineStyle) control line style
                                  color: 'auto'
                              }
                          },
                          pointer: {
                              width: 5
                          },
                          title: {
                              offsetCenter: [0, '-30%'], // X, y, units px
                          },
                          detail: {
                              textStyle: { // Remaining properties using the global default text style, see TEXTSTYLE
                                  fontWeight: 'bolder'
                              }
                          },
                          data: [{ value: 1.5, name: 'x1000 r/min' }]
                      },
                      {
                          name: 'Fuel meter',
                          type: 'gauge',
                          center: ['85%', '50%'], // Default global center
                          radius: '50%',
                          min: 0,
                          max: 2,
                          startAngle: 135,
                          endAngle: 45,
                          splitNumber: 2,
                          axisLine: { // Coordinate axis
                              lineStyle: { // Attribute lineStyle control line style
                                  color: [
                                      [0.2, '#ff4500'],
                                      [0.8, '#48b'],
                                      [1, '#228b22']
                                  ],
                                  width: 8
                              }
                          },
                          axisTick: { // Axis small marker
                              splitNumber: 5,
                              length: 10, // Attribute length Control line length
                              lineStyle: { // Attribute lineStyle control line style
                                  color: 'auto'
                              }
                          },
                          axisLabel: {
                              formatter: function(v) {
                                  switch (v + '') {
                                      case '0':
                                          return 'E';
                                      case '1':
                                          return 'Gas';
                                      case '2':
                                          return 'F';
                                  }
                              }
                          },
                          splitLine: { // Divider
                              length: 15, // Attribute length Control line length
                              lineStyle: { // Attribute lineStyle (see lineStyle) control line style
                                  color: 'auto'
                              }
                          },
                          pointer: {
                              width: 2
                          },
                          title: {
                              show: false
                          },
                          detail: {
                              show: false
                          },
                          data: [{ value: 0.5, name: 'gas' }]
                      },
                      {
                          name: 'Meter',
                          type: 'gauge',
                          center: ['85%', '50%'], // Default global center
                          radius: '50%',
                          min: 0,
                          max: 2,
                          startAngle: 315,
                          endAngle: 225,
                          splitNumber: 2,
                          axisLine: { // Coordinate axis
                              lineStyle: { // Attribute lineStyle control line style
                                  color: [
                                      [0.2, '#ff4500'],
                                      [0.8, '#48b'],
                                      [1, '#228b22']
                                  ],
                                  width: 8
                              }
                          },
                          axisTick: { // Axis small marker
                              show: false
                          },
                          axisLabel: {
                              formatter: function(v) {
                                  switch (v + '') {
                                      case '0':
                                          return 'H';
                                      case '1':
                                          return 'Water';
                                      case '2':
                                          return 'C';
                                  }
                              }
                          },
                          splitLine: { // Divider
                              length: 15, // Attribute length Control line length
                              lineStyle: { // Attribute lineStyle (see lineStyle) control line style
                                  color: 'auto'
                              }
                          },
                          pointer: {
                              width: 2
                          },
                          title: {
                              show: false
                          },
                          detail: {
                              show: false
                          },
                          data: [{ value: 0.5, name: 'gas' }]
                      }
                  ]
              };
  
              // Apply options
              // ------------------------------
  
              myChart.setOption(multigaugeOptions);
  
  
  
              // 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);
                  }
  
                  clearInterval(timeTicket);
                  var timeTicket = setInterval(function() {
                      multigaugeOptions.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
                      multigaugeOptions.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
                      multigaugeOptions.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
                      multigaugeOptions.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
                      myChart.setOption(multigaugeOptions, true);
                  }, 2000);
              });
          }
      );
  });