title: Why do only 2 of my 3 Highcharts Pie Charts/Graphs are showing
body: <p>I can't figure out why my charts show up just fine when I upload it to jfiddle, however, in my actual page only 2 of the 3 charts show up. </p>
  
  <p>Am I missing something? All of my javascript code and tags are closed. Can't figure this one out at all.  You can see my code at this jsfiddle: <a href="http://jsfiddle.net/kZcRX/" rel="nofollow">http://jsfiddle.net/kZcRX/</a></p>
  
  <p>here is my entire HTML PAGE... I can not see why my charts will not show up but show up just fine in JSFiddle:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Graphs &amp; Charts&lt;/title&gt;
  &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  // JavaScript Document
  $(function () {
  
      Highcharts.setOptions({
   colors: ['#6eb5ec', '#d64646', '#8bba00', '#f6bd0f', '#cd5ace', '#f19153', '#cccccc', '#cd8b49']
  });
  
      var chart;  
  
          // Build the chart
          chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'container',
                  plotBackgroundColor: null,
                  plotBorderWidth: null,
                  plotShadow: false,
                  events: {
                      load: function(event) {
                          console.log(this);
              }
          }     
              },
                  legend: {
                  layout: 'vertical',
                  backgroundColor: '#FFFFFF',
                  align: 'left',
                  verticalAlign: 'top',
                  floating: true,
                  x: 365,
                  y: 260,
                  itemStyle: {
                      color: '#000000',
                      fontWeight: 'normal',
                      fontSize: '11px'
                      }
              },
               title: {
                  text: '2012 Revenue Report'
              },
                  tooltip: {
                  pointFormat: '{series.name}: &lt;b&gt;{point.percentage}%&lt;/b&gt;',
                  percentageDecimals: 1
              },
              plotOptions: {
                  pie: {
                      allowPointSelect: true,
                      cursor: 'pointer',
                      dataLabels: {
                          enabled: true
                      },
                      showInLegend: true,
                      point: {
                          events: {
                              legendItemClick: function () {
                                  return false; // &lt;== returning false will cancel the default action
                                  }
                              }   
                          }   
                  }
              },
              series: [{
                  type: 'pie',
                  name: 'Browser share',
                  data: [
                      ['Govt&lt;br/&gt;Contracts&lt;br/&gt;&amp; Grants',   45.0],
                      ['Private&lt;br/&gt;Grants/Gifts',       26.8],
                      {
                          name: 'Net Tuition&lt;br/&gt;&amp; Fees',
                          y: 12.8,
                          sliced: true,
                          selected: true
                      },
                      ['Auxiliary&lt;br/&gt;Enterprises',    8.5],
                      ['Investments',     6.2],
                      ['Dental Clinic',   0.7],
                      ['Other',   0.7]
                  ]
              }]
  
          });
      });
  
  
  
         // ENDOWMENT BAR GRAPH
         chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'endowment',
                  type: 'column',
                  events: {
                          load: function(event) {
                              console.log(this);
              }
          }     
              },
              title: {
                  text: '2012 Financial Endowment Report'
              },
              subtitle: {
                  text: 'Periods ending June 30th'
              },
              xAxis: {
                  categories: [
                      'Reporting Year'
                  ]
              },
              yAxis: {
                  min: 0,
                  title: {
                      text: 'Millions (mm)'
                  }
              },
              legend: {
                  layout: 'vertical',
                  backgroundColor: '#FFFFFF',
                  align: 'left',
                  verticalAlign: 'top',
                  x: 85,
                  y: 50,
                  floating: true,
                  shadow: true
              },
              showInLegend: true,
                      point: {
                          events: {
                              legendItemClick: function () {
                                  return false; // &lt;== returning false will cancel the default action
                                  }
                              }   
                          },  
              tooltip: {
                  formatter: function() {
                      return ''+
                          this.x +': '+ this.y +' mm';
                  }
              },
              plotOptions: {
                  column: {
                      pointPadding: 0.2,
                      borderWidth: 0,
                      allowPointSelect: true,
                      cursor: 'pointer',
                      dataLabels: {
                          enabled: true
                      },
                      showInLegend: true,
                      point: {
                          events: {
                              legendItemClick: function () {
                                  return false; // &lt;== returning false will cancel the default action
                                  }
                              }   
                          }
  
                  }
              },
                  series: [{
                  name: 'Yr 2011',
                  data: [49.9]
  
              }, {
                  name: 'Yr 2012',
                  data: [83.6]
  
              }]
  
          });
  
  
         // EXPENSES CHART
                chart = new Highcharts.Chart({
            chart: {
               renderTo: 'expenses',
               plotBackgroundColor: null,
               plotBorderWidth: null,
               plotShadow: false
            },
            title: {
               text: 'This will be a pie chart',
               style: {
                  Color: '#666'
               }
            },
            tooltip: {
               formatter: function() {
                  return '&lt;strong&gt;'+ this.point.name +'&lt;/strong&gt;: '+ this.y +' %';
               }
            },
            plotOptions: {
               pie: {
                  allowPointSelect: true,
                  cursor: 'pointer',
                  dataLabels: {
                     enabled: true
                  },
                  showInLegend: true
               }
            },
            showInLegend: true,
                      point: {
                          events: {
                              legendItemClick: function () {
                                  return false; // &lt;== returning false will cancel the default action
                                  }
                              }   
          },  
            series: [{
               type: 'pie',
               name: 'Our Current Expenses',
               data: [
                  ['Expense1', 26.9],
                  ['Expense2', 27.7],
                  ['Expense3', 45.3],
                  {
                     name: 'Other',
                     y: 32.2,
                     sliced: true,
                     selected: true
                  }
               ]
            }],
            legend: {
               borderColor: '#666'
            }
         });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
  
  &lt;div id="expenses" style="min-width: 400px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
  
  &lt;div id="endowment" style="min-width: 400px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;​
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>