text: /* ------------------------------------------------------------------------------
   *
   *  # Echarts - pies and donuts
   *
   *  Pies and donuts chart configurations
   *
   *  Version: 1.0
   *  Latest update: August 1, 2015
   *
   * ---------------------------------------------------------------------------- */
  
  $(function () {
  
      // Set paths
      // ------------------------------
  
      require.config({
          paths: {
              echarts: 'assets/js/plugins/visualization/echarts'
          }
      });
  
  
      // Configuration
      // ------------------------------
  
      require(
          [
              'echarts',
              'echarts/theme/limitless',
              'echarts/chart/pie',
              'echarts/chart/funnel'
          ],
  
  
          // Charts setup
          function (ec, limitless) {
  
  
              // Initialize charts
              // ------------------------------
  
              var basic_pie = ec.init(document.getElementById('basic_pie'), limitless);
              var basic_donut = ec.init(document.getElementById('basic_donut'), limitless);
              var nested_pie = ec.init(document.getElementById('nested_pie'), limitless);
              var infographic_donut = ec.init(document.getElementById('infographic_donut'), limitless);
              var rose_diagram_hidden = ec.init(document.getElementById('rose_diagram_hidden'), limitless);
              var rose_diagram_visible = ec.init(document.getElementById('rose_diagram_visible'), limitless);
              var lasagna_donut = ec.init(document.getElementById('lasagna_donut'), limitless);
              var pie_timeline = ec.init(document.getElementById('pie_timeline'), limitless);
              var multiple_donuts = ec.init(document.getElementById('multiple_donuts'), limitless);
  
  
              // Charts setup
              // ------------------------------                    
  
              //
              // Basic pie options
              //
  
              basic_pie_options = {
  
                  // Add title
                  title: {
                      text: 'Browser popularity',
                      subtext: 'Open source information',
                      x: 'center'
                  },
  
                  // Add tooltip
                  tooltip: {
                      trigger: 'item',
                      formatter: "{a} <br/>{b}: {c} ({d}%)"
                  },
  
                  // Add legend
                  legend: {
                      orient: 'vertical',
                      x: 'left',
                      data: ['IE', 'Opera', 'Safari', 'Firefox', 'Chrome']
                  },
  
                  // Display toolbox
                  toolbox: {
                      show: true,
                      orient: 'vertical',
                      feature: {
                          mark: {
                              show: true,
                              title: {
                                  mark: 'Markline switch',
                                  markUndo: 'Undo markline',
                                  markClear: 'Clear markline'
                              }
                          },
                          dataView: {
                              show: true,
                              readOnly: false,
                              title: 'View data',
                              lang: ['View chart data', 'Close', 'Update']
                          },
                          magicType: {
                              show: true,
                              title: {
                                  pie: 'Switch to pies',
                                  funnel: 'Switch to funnel',
                              },
                              type: ['pie', 'funnel'],
                              option: {
                                  funnel: {
                                      x: '25%',
                                      y: '20%',
                                      width: '50%',
                                      height: '70%',
                                      funnelAlign: 'left',
                                      max: 1548
                                  }
                              }
                          },
                          restore: {
                              show: true,
                              title: 'Restore'
                          },
                          saveAsImage: {
                              show: true,
                              title: 'Same as image',
                              lang: ['Save']
                          }
                      }
                  },
  
                  // Enable drag recalculate
                  calculable: true,
  
                  // Add series
                  series: [{
                      name: 'Browsers',
                      type: 'pie',
                      radius: '70%',
                      center: ['50%', '57.5%'],
                      data: [
                          {value: 335, name: 'IE'},
                          {value: 310, name: 'Opera'},
                          {value: 234, name: 'Safari'},
                          {value: 135, name: 'Firefox'},
                          {value: 1548, name: 'Chrome'}
                      ]
                  }]
              };
  
  
              //
              // Basic donut options
              //
  
              basic_donut_options = {
  
                  // Add title
                  title: {
                      text: 'Browser popularity',
                      subtext: 'Open source information',
                      x: 'center'
                  },
  
                  // Add legend
                  legend: {
                      orient: 'vertical',
                      x: 'left',
                      data: ['Internet Explorer','Opera','Safari','Firefox','Chrome']
                  },
  
                  // Display toolbox
                  toolbox: {
                      show: true,
                      orient: 'vertical',
                      feature: {
                          mark: {
                              show: true,
                              title: {
                                  mark: 'Markline switch',
                                  markUndo: 'Undo markline',
                                  markClear: 'Clear markline'
                              }
                          },
                          dataView: {
                              show: true,
                              readOnly: false,
                              title: 'View data',
                              lang: ['View chart data', 'Close', 'Update']
                          },
                          magicType: {
                              show: true,
                              title: {
                                  pie: 'Switch to pies',
                                  funnel: 'Switch to funnel',
                              },
                              type: ['pie', 'funnel'],
                              option: {
                                  funnel: {
                                      x: '25%',
                                      y: '20%',
                                      width: '50%',
                                      height: '70%',
                                      funnelAlign: 'left',
                                      max: 1548
                                  }
                              }
                          },
                          restore: {
                              show: true,
                              title: 'Restore'
                          },
                          saveAsImage: {
                              show: true,
                              title: 'Same as image',
                              lang: ['Save']
                          }
                      }
                  },
  
                  // Enable drag recalculate
                  calculable: true,
  
                  // Add series
                  series: [
                      {
                          name: 'Browsers',
                          type: 'pie',
                          radius: ['50%', '70%'],
                          center: ['50%', '57.5%'],
                          itemStyle: {
                              normal: {
                                  label: {
                                      show: true
                                  },
                                  labelLine: {
                                      show: true
                                  }
                              },
                              emphasis: {
                                  label: {
                                      show: true,
                                      formatter: '{b}' + '\n\n' + '{c} ({d}%)',
                                      position: 'center',
                                      textStyle: {
                                          fontSize: '17',
                                          fontWeight: '500'
                                      }
                                  }
                              }
                          },
  
                          data: [
                              {value: 335, name: 'Internet Explorer'},
                              {value: 310, name: 'Opera'},
                              {value: 234, name: 'Safari'},
                              {value: 135, name: 'Firefox'},
                              {value: 1548, name: 'Chrome'}
                          ]
                      }
                  ]
              };
  
  
              //
              // Nested pie charts options
              //
  
              nested_pie_options = {
  
                  // Add tooltip
                  tooltip: {
                      trigger: 'item',
                      formatter: "{a} <br/>{b}: {c} ({d}%)"
                  },
  
                  // Add legend
                  legend: {
                      orient: 'vertical',
                      x: 'left',
                      data: ['Italy','Spain','Austria','Germany','Poland','Denmark','Hungary','Portugal','France','Netherlands']
                  },
  
                  // Display toolbox
                  toolbox: {
                      show: true,
                      orient: 'vertical',
                      feature: {
                          mark: {
                              show: true,
                              title: {
                                  mark: 'Markline switch',
                                  markUndo: 'Undo markline',
                                  markClear: 'Clear markline'
                              }
                          },
                          dataView: {
                              show: true,
                              readOnly: false,
                              title: 'View data',
                              lang: ['View chart data', 'Close', 'Update']
                          },
                          magicType: {
                              show: true,
                              title: {
                                  pie: 'Switch to pies',
                                  funnel: 'Switch to funnel',
                              },
                              type: ['pie', 'funnel']
                          },
                          restore: {
                              show: true,
                              title: 'Restore'
                          },
                          saveAsImage: {
                              show: true,
                              title: 'Same as image',
                              lang: ['Save']
                          }
                      }
                  },
  
                  // Enable drag recalculate
                  calculable: false,
  
                  // Add series
                  series: [
  
                      // Inner
                      {
                          name: 'Countries',
                          type: 'pie',
                          selectedMode: 'single',
                          radius: [0, '40%'],
  
                          // for funnel
                          x: '15%',
                          y: '7.5%',
                          width: '40%',
                          height: '85%',
                          funnelAlign: 'right',
                          max: 1548,
  
                          itemStyle: {
                              normal: {
                                  label: {
                                      position: 'inner'
                                  },
                                  labelLine: {
                                      show: false
                                  }
                              },
                              emphasis: {
                                  label: {
                                      show: true
                                  }
                              }
                          },
  
                          data: [
                              {value: 535, name: 'Italy'},
                              {value: 679, name: 'Spain'},
                              {value: 1548, name: 'Austria'}
                          ]
                      },
  
                      // Outer
                      {
                          name: 'Countries',
                          type: 'pie',
                          radius: ['60%', '85%'],
  
                          // for funnel
                          x: '55%',
                          y: '7.5%',
                          width: '35%',
                          height: '85%',
                          funnelAlign: 'left',
                          max: 1048,
  
                          data: [
                              {value: 535, name: 'Italy'},
                              {value: 310, name: 'Germany'},
                              {value: 234, name: 'Poland'},
                              {value: 135, name: 'Denmark'},
                              {value: 948, name: 'Hungary'},
                              {value: 251, name: 'Portugal'},
                              {value: 147, name: 'France'},
                              {value: 202, name: 'Netherlands'}
                          ]
                      }
                  ]
              };
  
  
              //
              // Infographic donut options
              //
  
              // Data style
              var dataStyle = {
                  normal: {
                      label: {show: false},
                      labelLine: {show: false}
                  }
              };
  
              // Placeholder style
              var placeHolderStyle = {
                  normal: {
                      color: 'rgba(0,0,0,0)',
                      label: {show: false},
                      labelLine: {show: false}
                  },
                  emphasis: {
                      color: 'rgba(0,0,0,0)'
                  }
              };
  
              // Set options
              infographic_donut_options = {
  
                  // Add title
                  title: {
                      text: 'Are you happy?',
                      subtext: 'Utrecht, Netherlands',
                      x: 'center',
                      y: 'center',
                      itemGap: 10,
                      textStyle: {
                          color: 'rgba(30,144,255,0.8)',
                          fontSize: 19,
                          fontWeight: '500'
                      }
                  },
  
                  // Add tooltip
                  tooltip: {
                      show: true,
                      formatter: "{a} <br/>{b}: {c} ({d}%)"
                  },
  
                  // Add legend
                  legend: {
                      orient: 'vertical',
                      x: document.getElementById('infographic_donut').offsetWidth / 2,
                      y: 30,
                      x: '55%',
                      itemGap: 15,
                      data: ['60% Definitely yes','30% Could be better','10% Not at the moment']
                  },
  
                  // Add series
                  series: [
                      {
                          name: '1',
                          type: 'pie',
                          clockWise: false,
                          radius: ['75%', '90%'],
                          itemStyle: dataStyle,
                          data: [
                              {
                                  value: 60,
                                  name: '60% Definitely yes'
                              },
                              {
                                  value: 40,
                                  name: 'invisible',
                                  itemStyle: placeHolderStyle
                              }
                          ]
                      },
  
                      {
                          name: '2',
                          type:'pie',
                          clockWise: false,
                          radius: ['60%', '75%'],
                          itemStyle: dataStyle,
                          data: [
                              {
                                  value: 30, 
                                  name: '30% Could be better'
                              },
                              {
                                  value: 70,
                                  name: 'invisible',
                                  itemStyle: placeHolderStyle
                              }
                          ]
                      },
  
                      {
                          name: '3',
                          type: 'pie',
                          clockWise: false,
                          radius: ['45%', '60%'],
                          itemStyle: dataStyle,
                          data: [
                              {
                                  value: 10, 
                                  name: '10% Not at the moment'
                              },
                              {
                                  value: 90,
                                  name: 'invisible',
                                  itemStyle: placeHolderStyle
                              }
                          ]
                      }
                  ]
              };
  
  
              //
              // Nightingale roses with hidden labels options
              //
  
              rose_diagram_hidden_options = {
  
                  // Add title
                  title: {
                      text: 'Employee\'s salary review',
                      subtext: 'Senior front end developer',
                      x: 'center'
                  },
  
                  // Add tooltip
                  tooltip: {
                      trigger: 'item',
                      formatter: "{a} <br/>{b}: +{c}$ ({d}%)"
                  },
  
                  // Add legend
                  legend: {
                      x: 'left',
                      y: 'top',
                      orient: 'vertical',
                      data: ['January','February','March','April','May','June','July','August','September','October','November','December']
                  },
  
                  // Display toolbox
                  toolbox: {
                      show: true,
                      orient: 'vertical',
                      feature: {
                          mark: {
                              show: true,
                              title: {
                                  mark: 'Markline switch',
                                  markUndo: 'Undo markline',
                                  markClear: 'Clear markline'
                              }
                          },
                          dataView: {
                              show: true,
                              readOnly: false,
                              title: 'View data',
                              lang: ['View chart data', 'Close', 'Update']
                          },
                          magicType: {
                              show: true,
                              title: {
                                  pie: 'Switch to pies',
                                  funnel: 'Switch to funnel',
                              },
                              type: ['pie', 'funnel']
                          },
                          restore: {
                              show: true,
                              title: 'Restore'
                          },
                          saveAsImage: {
                              show: true,
                              title: 'Same as image',
                              lang: ['Save']
                          }
                      }
                  },
  
                  // Enable drag recalculate
                  calculable: true,
  
                  // Add series
                  series: [
                      {
                          name: 'Increase (brutto)',
                          type: 'pie',
                          radius: ['15%', '73%'],
                          center: ['50%', '57%'],
                          roseType: 'radius',
  
                          // Funnel
                          width: '40%',
                          height: '78%',
                          x: '30%',
                          y: '17.5%',
                          max: 450,
  
                          itemStyle: {
                              normal: {
                                  label: {
                                      show: false
                                  },
                                  labelLine: {
                                      show: false
                                  }
                              },
                              emphasis: {
                                  label: {
                                      show: true
                                  },
                                  labelLine: {
                                      show: true
                                  }
                              }
                          },
                          data: [
                              {value: 440, name: 'January'},
                              {value: 260, name: 'February'},
                              {value: 350, name: 'March'},
                              {value: 250, name: 'April'},
                              {value: 210, name: 'May'},
                              {value: 350, name: 'June'},
                              {value: 300, name: 'July'},
                              {value: 430, name: 'August'},
                              {value: 400, name: 'September'},
                              {value: 450, name: 'October'},
                              {value: 330, name: 'November'},
                              {value: 200, name: 'December'}
                          ]
                      }
                  ]
              };
  
  
              //
              // Nightingale roses with visible labels options
              //
  
              rose_diagram_visible_options = {
  
                  // Add title
                  title: {
                      text: 'Employee\'s salary review',
                      subtext: 'Senior front end developer',
                      x: 'center'
                  },
  
                  // Add tooltip
                  tooltip: {
                      trigger: 'item',
                      formatter: "{a} <br/>{b}: +{c}$ ({d}%)"
                  },
  
                  // Add legend
                  legend: {
                      x: 'left',
                      y: 'top',
                      orient: 'vertical',
                      data: ['January','February','March','April','May','June','July','August','September','October','November','December']
                  },
  
                  // Display toolbox
                  toolbox: {
                      show: true,
                      orient: 'vertical',
                      feature: {
                          mark: {
                              show: true,
                              title: {
                                  mark: 'Markline switch',
                                  markUndo: 'Undo markline',
                                  markClear: 'Clear markline'
                              }
                          },
                          dataView: {
                              show: true,
                              readOnly: false,
                              title: 'View data',
                              lang: ['View chart data', 'Close', 'Update']
                          },
                          magicType: {
                              show: true,
                              title: {
                                  pie: 'Switch to pies',
                                  funnel: 'Switch to funnel',
                              },
                              type: ['pie', 'funnel']
                          },
                          restore: {
                              show: true,
                              title: 'Restore'
                          },
                          saveAsImage: {
                              show: true,
                              title: 'Same as image',
                              lang: ['Save']
                          }
                      }
                  },
  
                  // Enable drag recalculate
                  calculable: true,
  
                  // Add series
                  series: [
                      {
                          name: 'Increase (brutto)',
                          type: 'pie',
                          radius: ['15%', '73%'],
                          center: ['50%', '57%'],
                          roseType: 'area',
  
                          // Funnel
                          width: '40%',
                          height: '78%',
                          x: '30%',
                          y: '17.5%',
                          max: 450,
                          sort: 'ascending',
  
                          data: [
                              {value: 440, name: 'January'},
                              {value: 260, name: 'February'},
                              {value: 350, name: 'March'},
                              {value: 250, name: 'April'},
                              {value: 210, name: 'May'},
                              {value: 350, name: 'June'},
                              {value: 300, name: 'July'},
                              {value: 430, name: 'August'},
                              {value: 400, name: 'September'},
                              {value: 450, name: 'October'},
                              {value: 330, name: 'November'},
                              {value: 200, name: 'December'}
                          ]
                      }
                  ]
              };
  
  
              //
              // Lasagna options
              //
  
              lasagna_donut_options = {
  
                  // Add title
                  title: {
                      text: 'Browser statistics',
                      subtext: 'Based on shared research',
                      x: 'center'
                  },
  
                  // Add tooltip
                  tooltip: {
                      trigger: 'item',
                      formatter: '{a} <br/>{b}: {c} ({d}%)'
                  },
  
                  // Add legend
                  legend: {
                      x: 'left',
                      orient: 'vertical',
                      data: ['Chrome','Firefox','Safari','IE9+','IE8-']
                  },
  
                  // Enable drag recalculate
                  calculable: false,
  
                  // Add series
                  series: (function () {
                      var series = [];
                      for (var i = 0; i < 30; i++) {
                          series.push({
                              name: 'Browser',
                              type: 'pie',
                              itemStyle: {
                                  normal: {
                                      label: {
                                          show: i > 28
                                      },
                                      labelLine: {
                                          show: i > 28,
                                          length: 20
                                      }
                                  }
                              },
  
                              radius: [i * 3.6 + 40, i * 3.6 + 43],
                              center: ['50%', '55%'],
                              data: [
                                  {value: i * 128 + 80,  name: 'Chrome'},
                                  {value: i * 64  + 160,  name: 'Firefox'},
                                  {value: i * 32  + 320,  name: 'Safari'},
                                  {value: i * 16  + 640,  name: 'IE9+'},
                                  {value: i * 8  + 1280, name: 'IE8-'}
                              ]
                          })
                      }
                      return series;
                  })()
              };
  
  
              //
              // Pie timeline options
              //
  
              var idx = 1;
              pie_timeline_options = {
  
                  // Add timeline
                  timeline: {
                      x: 10,
                      x2: 10,
                      data: [
                          '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01',
                          { name:'2014-06-01', symbol: 'emptyStar2', symbolSize: 8 },
                          '2014-07-01', '2014-08-01', '2014-09-01', '2014-10-01', '2014-11-01',
                          { name:'2014-12-01', symbol: 'star2', symbolSize: 8 }
                      ],
                      label: {
                          formatter: function(s) {
                              return s.slice(0, 7);
                          }
                      },
                      autoPlay: true,
                      playInterval: 3000
                  },
  
                  // Set options
                  options: [
                      {
  
                          // Add title
                          title: {
                              text: 'Browser statistics',
                              subtext: 'Based on shared research',
                              x: 'center'
                          },
  
                          // Add tooltip
                          tooltip: {
                              trigger: 'item',
                              formatter: "{a} <br/>{b}: {c} ({d}%)"
                          },
  
                          // Add legend
                          legend: {
                              x: 'left',
                              orient: 'vertical',
                              data: ['Chrome','Firefox','Safari','IE9+','IE8-']
                          },
  
                          // Display toolbox
                          toolbox: {
                              show: true,
                              orient: 'vertical',
                              feature: {
                                  mark: {
                                      show: true,
                                      title: {
                                          mark: 'Markline switch',
                                          markUndo: 'Undo markline',
                                          markClear: 'Clear markline'
                                      }
                                  },
                                  dataView: {
                                      show: true,
                                      readOnly: false,
                                      title: 'View data',
                                      lang: ['View chart data', 'Close', 'Update']
                                  },
                                  magicType: {
                                      show: true,
                                      title: {
                                          pie: 'Switch to pies',
                                          funnel: 'Switch to funnel',
                                      },
                                      type: ['pie', 'funnel'],
                                      option: {
                                          funnel: {
                                              x: '25%',
                                              width: '50%',
                                              funnelAlign: 'left',
                                              max: 1700
                                          }
                                      }
                                  },
                                  restore: {
                                      show: true,
                                      title: 'Restore'
                                  },
                                  saveAsImage: {
                                      show: true,
                                      title: 'Same as image',
                                      lang: ['Save']
                                  }
                              }
                          },
  
                          // Add series
                          series: [{
                              name: 'Browser',
                              type: 'pie',
                              center: ['50%', '50%'],
                              radius: '60%',
                              data: [
                                  {value: idx * 128 + 80, name: 'Chrome'},
                                  {value: idx * 64 + 160, name: 'Firefox'},
                                  {value: idx * 32 + 320, name: 'Safari'},
                                  {value: idx * 16 + 640, name: 'IE9+'},
                                  {value: idx++ * 8 + 1280, name: 'IE8-'}
                              ]
                          }]
                      },
  
                      {
                          series: [{
                              name: 'Browser',
                              type: 'pie',
                              data: [
                                  {value: idx * 128 + 80,  name:'Chrome'},
                                  {value: idx * 64  + 160,  name:'Firefox'},
                                  {value: idx * 32  + 320,  name:'Safari'},
                                  {value: idx * 16  + 640,  name:'IE9+'},
                                  {value: idx++ * 8  + 1280, name:'IE8-'}
                              ]
                          }]
                      },
                      {
                          series: [{
                              name: 'Browser',
                              type: 'pie',
                              data: [
                                  {value: idx * 128 + 80,  name:'Chrome'},
                                  {value: idx * 64  + 160,  name:'Firefox'},
                                  {value: idx * 32  + 320,  name:'Safari'},
                                  {value: idx * 16  + 640,  name:'IE9+'},
                                  {value: idx++ * 8  + 1280, name:'IE8-'}
                              ]
                          }]
                      },
                      {
                          series: [{
                              name: 'Browser',
                              type: 'pie',
                              data: [
                                  {value: idx * 128 + 80,  name:'Chrome'},
                                  {value: idx * 64  + 160,  name:'Firefox'},
                                  {value: idx * 32  + 320,  name:'Safari'},
                                  {value: idx * 16  + 640,  name:'IE9+'},
                                  {value: idx++ * 8  + 1280, name:'IE8-'}
                              ]
                          }]
                      },
                      {
                          series: [{
                              name: 'Browser',
                              type: 'pie',
                              data: [
                                  {value: idx * 128 + 80,  name:'Chrome'},
                                  {value: idx * 64  + 160,  name:'Firefox'},
                                  {value: idx * 32  + 320,  name:'Safari'},
                                  {value: idx * 16  + 640,  name:'IE9+'},
                                  {value: idx++ * 8  + 1280, name:'IE8-'}
                              ]
                          }]
                      },
                      {
                          series: [{
                              name: 'Browser',
                              type: 'pie',
                              data: [
                                  {value: idx * 128 + 80,  name:'Chrome'},
                                  {value: idx * 64  + 160,  name:'Firefox'},
                                  {value: idx * 32  + 320,  name:'Safari'},
                                  {value: idx * 16  + 640,  name:'IE9+'},
                                  {value: idx++ * 8  + 1280, name:'IE8-'}
                              ]
                          }]
                      },
                      {
                          series: [{
                              name: 'Browser',
                              type: 'pie',
                              data: [
                                  {value: idx * 128 + 80,  name:'Chrome'},
                                  {value: idx * 64  + 160,  name:'Firefox'},
                                  {value: idx * 32  + 320,  name:'Safari'},
                                  {value: idx * 16  + 640,  name:'IE9+'},
                                  {value: idx++ * 8  + 1280, name:'IE8-'}
                              ]
                          }]
                      },
                      {
                          series: [{
                              name: 'Browser',
                              type: 'pie',
                              data: [
                                  {value: idx * 128 + 80,  name:'Chrome'},
                                  {value: idx * 64  + 160,  name:'Firefox'},
                                  {value: idx * 32  + 320,  name:'Safari'},
                                  {value: idx * 16  + 640,  name:'IE9+'},
                                  {value: idx++ * 8  + 1280, name:'IE8-'}
                              ]
                          }]
                      },
                      {
                          series: [{
                              name: 'Browser',
                              type: 'pie',
                              data: [
                                  {value: idx * 128 + 80,  name:'Chrome'},
                                  {value: idx * 64  + 160,  name:'Firefox'},
                                  {value: idx * 32  + 320,  name:'Safari'},
                                  {value: idx * 16  + 640,  name:'IE9+'},
                                  {value: idx++ * 8  + 1280, name:'IE8-'}
                              ]
                          }]
                      },
                      {
                          series: [{
                              name: 'Browser',
                              type: 'pie',
                              data: [
                                  {value: idx * 128 + 80,  name:'Chrome'},
                                  {value: idx * 64  + 160,  name:'Firefox'},
                                  {value: idx * 32  + 320,  name:'Safari'},
                                  {value: idx * 16  + 640,  name:'IE9+'},
                                  {value: idx++ * 8  + 1280, name:'IE8-'}
                              ]
                          }]
                      },
                      {
                          series: [{
                              name: 'Browser',
                              type: 'pie',
                              data: [
                                  {value: idx * 128 + 80,  name:'Chrome'},
                                  {value: idx * 64  + 160,  name:'Firefox'},
                                  {value: idx * 32  + 320,  name:'Safari'},
                                  {value: idx * 16  + 640,  name:'IE9+'},
                                  {value: idx++ * 8  + 1280, name:'IE8-'}
                              ]
                          }]
                      },
                      {
                          series: [{
                              name: 'Browser',
                              type: 'pie',
                              data: [
                                  {value: idx * 128 + 80,  name:'Chrome'},
                                  {value: idx * 64  + 160,  name:'Firefox'},
                                  {value: idx * 32  + 320,  name:'Safari'},
                                  {value: idx * 16  + 640,  name:'IE9+'},
                                  {value: idx++ * 8  + 1280, name:'IE8-'}
                              ]
                          }]
                      }
                  ]
              };
  
  
              //
              // Multiple donuts options
              //
  
              // Top text label
              var labelTop = {
                  normal: {
                      label: {
                          show: true,
                          position: 'center',
                          formatter: '{b}\n',
                          textStyle: {
                              baseline: 'middle',
                              fontWeight: 300,
                              fontSize: 15
                          }
                      },
                      labelLine: {
                          show: false
                      }
                  }
              };
  
              // Format bottom label
              var labelFromatter = {
                  normal: {
                      label: {
                          formatter: function (params) {
                              return '\n\n' + (100 - params.value) + '%'
                          }
                      }
                  }
              }
  
              // Bottom text label
              var labelBottom = {
                  normal: {
                      color: '#eee',
                      label: {
                          show: true,
                          position: 'center',
                          textStyle: {
                              baseline: 'middle'
                          }
                      },
                      labelLine: {
                          show: false
                      }
                  },
                  emphasis: {
                      color: 'rgba(0,0,0,0)'
                  }
              };
  
              // Set inner and outer radius
              var radius = [60, 75];
  
              // Add options
              multiple_donuts_options = {
  
                  // Add title
                  title: {
                      text: 'The Application World',
                      subtext: 'from global web index',
                      x: 'center'
                  },
  
                  // Add legend
                  legend: {
                      x: 'center',
                      y: '56%',
                      data: ['GoogleMaps', 'Facebook', 'Youtube', 'Google+', 'Weixin', 'Twitter', 'Skype', 'Messenger', 'Whatsapp', 'Instagram']
                  },
  
                  // Add series
                  series: [
                      {
                          type: 'pie',
                          center: ['10%', '32.5%'],
                          radius: radius,
                          itemStyle: labelFromatter,
                          data: [
                              {name: 'other', value: 46, itemStyle: labelBottom},
                              {name: 'GoogleMaps', value: 54,itemStyle: labelTop}
                          ]
                      },
                      {
                          type: 'pie',
                          center: ['30%', '32.5%'],
                          radius: radius,
                          itemStyle: labelFromatter,
                          data: [
                              {name: 'other', value: 56, itemStyle: labelBottom},
                              {name: 'Facebook', value: 44,itemStyle: labelTop}
                          ]
                      },
                      {
                          type: 'pie',
                          center: ['50%', '32.5%'],
                          radius: radius,
                          itemStyle: labelFromatter,
                          data: [
                              {name: 'other', value: 65, itemStyle: labelBottom},
                              {name: 'Youtube', value: 35,itemStyle: labelTop}
                          ]
                      },
                      {
                          type: 'pie',
                          center: ['70%', '32.5%'],
                          radius: radius,
                          itemStyle: labelFromatter,
                          data: [
                              {name: 'other', value: 70, itemStyle: labelBottom},
                              {name: 'Google+', value: 30,itemStyle: labelTop}
                          ]
                      },
                      {
                          type: 'pie',
                          center: ['90%', '32.5%'],
                          radius: radius,
                          itemStyle: labelFromatter,
                          data: [
                              {name:'other', value:73, itemStyle: labelBottom},
                              {name:'Weixin', value:27,itemStyle: labelTop}
                          ]
                      },
                      {
                          type: 'pie',
                          center: ['10%', '82.5%'],
                          radius: radius,
                          itemStyle: labelFromatter,
                          data: [
                              {name: 'other', value: 78, itemStyle: labelBottom},
                              {name: 'Twitter', value: 22,itemStyle: labelTop}
                          ]
                      },
                      {
                          type: 'pie',
                          center: ['30%', '82.5%'],
                          radius: radius,
                          itemStyle: labelFromatter,
                          data: [
                              {name: 'other', value: 78, itemStyle: labelBottom},
                              {name: 'Skype', value: 22,itemStyle: labelTop}
                          ]
                      },
                      {
                          type: 'pie',
                          center: ['50%', '82.5%'],
                          radius: radius,
                          itemStyle: labelFromatter,
                          data: [
                              {name: 'other', value: 78, itemStyle: labelBottom},
                              {name: 'Messenger', value: 22,itemStyle: labelTop}
                          ]
                      },
                      {
                          type: 'pie',
                          center: ['70%', '82.5%'],
                          radius: radius,
                          itemStyle: labelFromatter,
                          data: [
                              {name: 'other', value: 83, itemStyle: labelBottom},
                              {name: 'Whatsapp', value: 17,itemStyle: labelTop}
                          ]
                      },
                      {
                          type: 'pie',
                          center: ['90%', '82.5%'],
                          radius: radius,
                          itemStyle: labelFromatter,
                          data: [
                              {name:'other', value:89, itemStyle: labelBottom},
                              {name:'Instagram', value:11,itemStyle: labelTop}
                          ]
                      }
                  ]
              };
  
  
  
              // Apply options
              // ------------------------------
  
              basic_pie.setOption(basic_pie_options);
              basic_donut.setOption(basic_donut_options);
              nested_pie.setOption(nested_pie_options);
              infographic_donut.setOption(infographic_donut_options);
              rose_diagram_hidden.setOption(rose_diagram_hidden_options);
              rose_diagram_visible.setOption(rose_diagram_visible_options);
              lasagna_donut.setOption(lasagna_donut_options);
              pie_timeline.setOption(pie_timeline_options);
              multiple_donuts.setOption(multiple_donuts_options);
  
  
  
              // Resize charts
              // ------------------------------
  
              window.onresize = function () {
                  setTimeout(function (){
                      basic_pie.resize();
                      basic_donut.resize();
                      nested_pie.resize();
                      infographic_donut.resize();
                      rose_diagram_hidden.resize();
                      rose_diagram_visible.resize();
                      lasagna_donut.resize();
                      pie_timeline.resize();
                      multiple_donuts.resize();
                  }, 200);
              }
          }
      );
  });
  