title: Morris.js charts not working for me
body: <p>Any help
  Using morris.js charts. Downloaded from here </p>
  
  <p><a href="https://github.com/morrisjs/morris.js/" rel="nofollow">https://github.com/morrisjs/morris.js/</a> </p>
  
  <p>All works well, however when I want to add a different type of chart the chart will not show up, and he donut chart below stops working.</p>
  
  <p>I want to change the type of chart on a page, so I add the code, then in the html I change the div id </p>
  
  <p>Here is the .js</p>
  
  <pre><code> // First Chart Example - Area Line Chart
  Morris.Area({
  // ID of the element in which to draw the chart.
  element: 'morris-chart-area',
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [
  { d: '2012-10-01', visits: 802 },
  { d: '2012-10-02', visits: 783 },
  { d: '2012-10-03', visits:  820 },
  { d: '2012-10-04', visits: 839 },
  { d: '2012-10-05', visits: 792 },
  { d: '2012-10-06', visits: 859 },
  { d: '2012-10-07', visits: 790 },
  { d: '2012-10-08', visits: 1680 },
  { d: '2012-10-09', visits: 1592 },
  { d: '2012-10-10', visits: 1420 },
  { d: '2012-10-11', visits: 882 },
  { d: '2012-10-12', visits: 889 },
  { d: '2012-10-13', visits: 819 },
  { d: '2012-10-14', visits: 849 },
  { d: '2012-10-15', visits: 870 },
  { d: '2012-10-16', visits: 1063 },
  { d: '2012-10-17', visits: 1192 },
  { d: '2012-10-18', visits: 1224 },
  { d: '2012-10-19', visits: 1329 },
  { d: '2012-10-20', visits: 1329 },
  { d: '2012-10-21', visits: 1239 },
  { d: '2012-10-22', visits: 1190 },
  { d: '2012-10-23', visits: 1312 },
  { d: '2012-10-24', visits: 1293 },
  { d: '2012-10-25', visits: 1283 },
  { d: '2012-10-26', visits: 1248 },
  { d: '2012-10-27', visits: 1323 },
  { d: '2012-10-28', visits: 1390 },
  { d: '2012-10-29', visits: 1420 },
  { d: '2012-10-30', visits: 1529 },
  { d: '2012-10-31', visits: 1892 },
  ],
  // The name of the data record attribute that contains x-visitss.
  xkey: 'd',
  // A list of names of data record attributes that contain y-visitss.
   ykeys: ['visits'],
   // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['Visits'],
  // Disables line smoothing
  smooth: false,
  });
  
  Morris.Donut({
  element: 'morris-chart-donut',
   data: [
  {label: "Bounce", value: 42.7},
  {label: "Engagment", value: 57.3},
  
  ],
  formatter: function (y) { return y + "%" ;}
  });
  
  Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'morris-chart-line',
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [
  { d: '2012-10-01', visits: 802 },
  { d: '2012-10-02', visits: 783 },
  { d: '2012-10-03', visits:  820 },
  { d: '2012-10-04', visits: 839 },
  { d: '2012-10-05', visits: 792 },
  { d: '2012-10-06', visits: 859 },
  { d: '2012-10-07', visits: 790 },
  { d: '2012-10-08', visits: 1680 },
  { d: '2012-10-09', visits: 1592 },
  { d: '2012-10-10', visits: 1420 },
  { d: '2012-10-11', visits: 882 },
  { d: '2012-10-12', visits: 889 },
  { d: '2012-10-13', visits: 819 },
  { d: '2012-10-14', visits: 849 },
  { d: '2012-10-15', visits: 870 },
  { d: '2012-10-16', visits: 1063 },
  { d: '2012-10-17', visits: 1192 },
  { d: '2012-10-18', visits: 1224 },
  { d: '2012-10-19', visits: 1329 },
  { d: '2012-10-20', visits: 1329 },
  { d: '2012-10-21', visits: 1239 },
  { d: '2012-10-22', visits: 1190 },
  { d: '2012-10-23', visits: 1312 },
  { d: '2012-10-24', visits: 1293 },
  { d: '2012-10-25', visits: 1283 },
  { d: '2012-10-26', visits: 1248 },
  { d: '2012-10-27', visits: 1323 },
  { d: '2012-10-28', visits: 1390 },
  { d: '2012-10-29', visits: 1420 },
  { d: '2012-10-30', visits: 1529 },
  { d: '2012-10-31', visits: 1892 },
  ],
  // The name of the data record attribute that contains x-visitss.
  xkey: 'd',
  // A list of names of data record attributes that contain y-visitss.
  ykeys: ['visits'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['Visits'],
  // Disables line smoothing
  smooth: false,
  });
  
  Morris.Bar ({
  element: 'morris-chart-bar',
  data: [
  {device: 'iPhone', geekbench: 136},
  {device: 'iPhone 3G', geekbench: 137},
  {device: 'iPhone 3GS', geekbench: 275},
  {device: 'iPhone 4', geekbench: 380},
  {device: 'iPhone 4S', geekbench: 655},
  {device: 'iPhone 5', geekbench: 1571}
  ],
  xkey: 'device',
  ykeys: ['geekbench'],
  labels: ['Geekbench'],
  barRatio: 0.4,
  xLabelAngle: 35,
  hideHover: 'auto'
  });
  
  // Use Morris.Area instead of Morris.Line
  Morris.Area({
  element: 'graph',
  data: [
  {x: '2010 Q4', y: 3, z: 7},
  {x: '2011 Q1', y: 3, z: 4},
  {x: '2011 Q2', y: null, z: 1},
  {x: '2011 Q3', y: 2, z: 5},
  {x: '2011 Q4', y: 8, z: 2},
  {x: '2012 Q1', y: 4, z: 4}
  ],
  xkey: 'x',
  ykeys: ['y', 'z'],
  labels: ['Y', 'Z']
  }).on('click', function(i, row){
  console.log(i, row);
  });
  
      // Use Morris.Bar
  Morris.Bar({
  element: 'graph',
  data:  [
  {x: '2011 Q1', y: 3, z: 2, a: 3},
  {x: '2011 Q2', y: 2, z: null, a: 1},
  {x: '2011 Q3', y: 0, z: 2, a: 4},
  {x: '2011 Q4', y: 2, z: 4, a: 3}
  ],
  xkey: 'x',
  ykeys: ['y', 'z', 'a'],
  labels: ['Y', 'Z', 'A'],
  stacked: true
  });
  </code></pre>
  
  <p>and here is my HTML section</p>
  
  <pre><code>  &lt;!-- start of bars chart--&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-lg-12"&gt;
          &lt;div class="panel panel-primary"&gt;
            &lt;div class="panel-heading"&gt;
              &lt;h3 class="panel-title"&gt;&lt;i class="fa fa-bar-chart-o"&gt;&lt;/i&gt; Store     Optiisation: October 1, 2013 - October 31, 2013&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class="panel-body"&gt;
              &lt;div id="morris-chart-graph"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  
  
  <p>This is the donut section</p>
  
  <pre><code>    &lt;div class="row"&gt;
        &lt;div class="col-lg-4"&gt;
          &lt;div class="panel panel-primary"&gt;
            &lt;div class="panel-heading"&gt;
              &lt;h3 class="panel-title"&gt;&lt;i class="fa fa-long-arrow-right"&gt;&lt;/i&gt; Traffic Sources: October 1, 2013 - October 31, 2013&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class="panel-body"&gt;
              &lt;div id="morris-chart-donut"&gt;&lt;/div&gt;
              &lt;div class="text-right"&gt;
                &lt;a href="#"&gt;View Details &lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>Any help be appreciated.</p>