text: $(function () {
  
      $('#zhe-line').highcharts({
          title: {
              text: 'Monthly Average Temperature',
              x: -20 //center
          },
          subtitle: {
              text: 'Source: WorldClimate.com',
              x: -20
          },
          xAxis: {
              categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          },
          yAxis: {
              title: {
                  text: 'Temperature (°C)'
              },
              plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
              }]
          },
          tooltip: {
              valueSuffix: '°C'
          },
          legend: {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'middle',
              borderWidth: 0
          },
          series: [{
              name: 'Tokyo',
              data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
          }, {
              name: 'New York',
              data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
          }, {
              name: 'Berlin',
              data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
          }, {
              name: 'London',
              data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
          }]
      });
  
      $('#shan-line').highcharts({
          chart: {
              plotBackgroundColor: null,
              plotBorderWidth: null,
              plotShadow: false
          },
          title: {
              text: 'Browser market shares at a specific website, 2014'
          },
          tooltip: {
              pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
          },
          plotOptions: {
              pie: {
                  allowPointSelect: true,
                  cursor: 'pointer',
                  dataLabels: {
                      enabled: false
                  },
                  showInLegend: true
              }
          },
          series: [{
              type: 'pie',
              name: 'Browser share',
              data: [
                  ['Firefox',   45.0],
                  ['IE',       26.8],
                  {
                      name: 'Chrome',
                      y: 12.8,
                      sliced: true,
                      selected: true
                  },
                  ['Safari',    8.5],
                  ['Opera',     6.2],
                  ['Others',   0.7]
              ]
          }]
      });
  
      $('#yuan').highcharts({
          
          chart: {
              polar: true
          },
          
          title: {
              text: 'one'
          },
          
          plotOptions: {
              series: {
                  pointStart: 0,
                  pointInterval: 45
              },
              column: {
                  pointPadding: 0,
                  groupPadding: 0
              }
          },
      
          series: [{
              type: 'column',
              name: 'Column',
              data: [8, 7, 6, 5, 4, 3, 2, 1],
              pointPlacement: 'between'
          }],
          legend: {
              align: 'right',
              verticalAlign: 'top',
              floating: true
          },
      });
  
      $('#pia').highcharts({
          chart: {
              type: 'column'
          },
          title: {
              text: 'two'
          },
          xAxis: {
              categories: [
                  'one',
                  'two',
                  'three',
              ]
          },
          yAxis: {
              min: 0,
              title: {
                  text: 'Rainfall (mm)'
              }
          },
          legend: {
              align: 'right',
              verticalAlign: 'top',
              floating: true
          },
          tooltip: {
              headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
              pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                  '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
              footerFormat: '</table>',
              shared: true,
              useHTML: true
          },
          plotOptions: {
              column: {
                  pointPadding: 0.2,
                  borderWidth: 0
              }
          },
          series: [{
              name: 'Tokyo',
              data: [49.9, 71.5, 106.4]
          }]
      });
  
      $('#area').highcharts({
          chart: {
              type: 'area'
          },
          title: {
              text: 'US and USSR nuclear stockpiles'
          },
          xAxis: {
              allowDecimals: false,
              labels: {
                  formatter: function() {
                      return this.value; // clean, unformatted number for year
                  }
              }
          },
          yAxis: {
              title: {
                  text: 'Nuclear weapon states'
              },
              labels: {
                  formatter: function() {
                      return this.value / 1000 +'k';
                  }
              }
          },
          tooltip: {
              pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
          },
          plotOptions: {
              area: {
                  pointStart: 1940,
                  marker: {
                      enabled: false,
                      symbol: 'circle',
                      radius: 2,
                      states: {
                          hover: {
                              enabled: true
                          }
                      }
                  }
              }
          },
          series: [{
              name: 'USA',
              data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,
                  1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                  27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
                  26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
                  24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
                  22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                  10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
          }, {
              name: 'USSR/Russia',
              data: [null, null, null, null, null, null, null , null , null ,null,
              5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
              4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
              15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
              33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
              35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
              21000, 20000, 19000, 18000, 18000, 17000, 16000]
          }]
      });
      $('#area2').highcharts({
          title: {
              text: 'Combination chart'
          },
          xAxis: {
              categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
          },
          labels: {
              items: [{
                  html: 'Total fruit consumption',
                  style: {
                      left: '50px',
                      top: '18px',
                      color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                  }
              }]
          },
          series: [{
              type: 'column',
              name: 'Jane',
              data: [3, 2, 1, 3, 4]
          }, {
              type: 'column',
              name: 'John',
              data: [2, 3, 5, 7, 6]
          }, {
              type: 'column',
              name: 'Joe',
              data: [4, 3, 3, 9, 0]
          }, {
              type: 'spline',
              name: 'Average',
              data: [3, 2.67, 3, 6.33, 3.33],
              marker: {
                  lineWidth: 2,
                  lineColor: Highcharts.getOptions().colors[3],
                  fillColor: 'white'
              }
          }]
      });
      
  });