var chart;
$(document).ready(function() {
   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
         zoomType: 'xy'
      },
      title: {
         text: 'Statistics of the Independent Republic of Orange Nations'
      },
      subtitle: {
         text: 'We gained 22,363 technology, 20,865 infra and 223,804 strength on 21 Sep 2011'
      },
      xAxis: [{
         categories:  ['20 Aug 2011', '21 Aug 2011', '22 Aug 2011', '23 Aug 2011', '24 Aug 2011', '25 Aug 2011', '26 Aug 2011', '27 Aug 2011', '28 Aug 2011', '29 Aug 2011', '30 Aug 2011', '31 Aug 2011', '03 Sep 2011', '21 Sep 2011', ],      }],
      yAxis: [{ // Primary yAxis
         labels: {
            formatter: function() {
               return this.value +' tech';
            },
            style: {
               color: '#89A54E'
            }
         },
         title: {
            text: 'Technology',
            style: {
               color: '#89A54E'
            }
         },
         opposite: true
         
      }, { // Secondary yAxis
         gridLineWidth: 0,
         title: {
            text: 'Infrastructure',
            style: {
               color: '#4572A7'
            }
         },
         labels: {
            formatter: function() {
               return this.value +' infra';
            },
            style: {
               color: '#4572A7'
            }
         }
         
      }, { // Tertiary yAxis
         gridLineWidth: 0,
         title: {
            text: 'Alliance Strength',
            style: {
               color: '#AA4643'
            }
         },
         labels: {
            formatter: function() {
               return this.value +' Strength';
            },
            style: {
               color: '#AA4643'
            }
         },
         opposite: true
      }],
      tooltip: {
         formatter: function() {
            var unit = {
               'Infrastructure': 'Infra',
               'Technology': 'Tech',
               'Alliance Strength': 'Strength'
            }[this.series.name];
            
            return ''+
               this.x +': '+ this.y +' '+ unit;
         }
      },
      legend: {
         layout: 'vertical',
         align: 'left',
         x: 120,
         verticalAlign: 'top',
         y: 80,
         floating: true,
         backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF'
      },
      series: [{
         name: 'Infrastructure',
         color: '#4572A7',
         type: 'spline',
         yAxis: 1,
		 data: [1887763,1884752,1885980,1889690,1890825,1892299,1905962,1909589,1912751,1910224,1917895,1921270,1923264,1944129,]
      
      }, {
         name: 'Alliance Strength',
         type: 'spline',
         color: '#AA4643',
         yAxis: 2,
        
		data: [11654586,11666491,11701138,11709400,11722546,11728264,11839053,11861561,11877285,11909131,11935542,11956091,11994967,12218771,],
         marker: {
            enabled: false
         },
         dashStyle: 'shortdot'               
      
      }, {
         name: 'Technology',
         color: '#89A54E',
         type: 'spline',
         data: [706893,708513,711590,713325,714893,715631,722935,724101,725057,727691,730329,733914,738427,760790,],
      }]
   });
   
   
});