title: Javascript: Multiple Charts/Graphs in One Page
body: <p>So I'm trying to make a page which should feature multiple charts but so far, it is only displaying one. I'm not sure if there's an error since the changes I made don't reflect to the page when I refresh it or if there's just really an issue in my code. What I want to do is display a bar graph and below it is place a pie chart. It only displays the bar graph. Here is the code so far:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="css/try.css"&gt;
  &lt;link rel="stylesheet" href="css/ipsosmenu.css"&gt;
  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"&gt;&lt;/script&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt; Project Blue Summary &lt;/title&gt;
  &lt;body background="http://wallpaper.zone/thumb/52068.jpg"&gt;   
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class = "result"&gt;
  &lt;font color = 'black' style = Arial&gt;
  &lt;em&gt;
  &lt;strong&gt;
  &lt;p&gt; &lt;b&gt; Project Blue Summary &lt;/b&gt; &lt;/p&gt;
  &lt;/strong&gt;
  &lt;/em&gt;
  &lt;/font&gt;
  &lt;/div&gt;
  
    &lt;div id="bar-example"&gt;&lt;/div&gt;
    &lt;div id="graph"&gt;&lt;div&gt;
  
  &lt;script&gt;
  Morris.Bar({
    element: 'bar-example',
    data: [
      { y: 'SM Mall of Asia', a: 500, b: 390 },
      { y: 'SM Megamall', a: 750,  b: 650 },
      { y: 'SM North Edsa', a: 350,  b: 240 },
      { y: 'SM Aura', a: 700,  b: 250 },
      { y: 'Robinson\'s Manila', a: 450,  b: 340 },
      { y: 'Robinson\'s Cebu', a: 725,  b: 625 },
       { y: 'Ayala Cebu', a: 500, b: 400 },
      { y: 'Rockwell', a: 535,  b: 235 },
      { y: 'Serendra', a: 700,  b: 815 },
      { y: 'Bel-Air', a: 750,  b: 550 },
      { y: 'Festival Mall', a: 450,  b: 420 },
      { y: 'Adriatico', a: 750,  b: 90 },
      { y: 'UP Town Center', a: 620, b: 490 },
      { y: 'Greenhills', a: 500, b: 570 },
      { y: 'Glorietta/Greenbelt', a: 600, b: 450 }
    ],
    xkey: 'y',
    ykeys: ['a', 'b'],
    labels: ['AMEX', 'With BDO Terminal']
  });
  
  Morris.Donut({
    element: 'graph',
    data: [
      {value: 70, label: 'foo'},
      {value: 15, label: 'bar'},
      {value: 10, label: 'baz'},
      {value: 5, label: 'A really really long label'}
    ],
    formatter: function (x) { return x + "%"}
  }).on('click', function(i, row){
    console.log(i, row);
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>