title: Display Pie chart, Grouped and Stacked bar chart in one page
body: <p>I want to display two charts in one page.The Pie chart gets displayed but the Grouped and Stacked bar chart is not displaying . I tried to change the Id name in  but no luck :( .  Will appreciate if anyone helps me with the code correction .    </p>
  
  <p>/* Display Matrix Chart ,Pie chart, Grouped and Stacked bar chart in one page */</p>
  
  <pre><code>&lt;apex:page showHeader="false"&gt;
  
      &lt;apex:includeScript value="{!URLFOR($Resource.jquery1)}"/&gt;    
      &lt;apex:includeScript value="{!URLFOR($Resource.D3)}"/&gt;
      &lt;apex:includeScript value="{!URLFOR($Resource.nvD3)}"/&gt; 
  
    &lt;div id="body"  height="50%" width="100px" &gt;&lt;/div&gt;  // Id for Pie chart
    &lt;div id="body1" height="30%" width="90px"&gt;&lt;/div&gt;  // Id for Stacked and Grouped bar chart
  
  &lt;script&gt;
  
  // Matrix Chart starts here 
    var drawChart = function(divId,matrixReportId) {
  
          $.ajax('/services/data/v29.0/analytics/reports/'+matrixReportId,
              {
                      beforeSend: function(xhr) {
                      xhr.setRequestHeader('Authorization', 'Bearer {!$Api.Session_ID}');
                  },
  
                  success: function(response) {
                      console.log(response);
  
                   var chart = nv.models.multiBarChart();
                      var chartData = [];
  
                      document.getElementById(divId).innerHTML = '';
  
                      $.each(response.groupingsDown.groupings, function(di, de) {
                          var values = [];
                          chartData.push({"key":de.label, "values": values});
                          $.each(response.groupingsAcross.groupings, function(ai, ae) {
                              values.push({"x": ae.label, "y": response.factMap[de.key+"!"+ae.key].aggregates[0].value});
                          });
                      });
                      d3.select('#'+divId).datum(chartData).transition().duration(100).call(chart);
                      window.setTimeout(function(){ 
                          drawChart(divId,matrixReportId);
                      }, 5000);
                  }
              }
          );
   };
   $(document).ready(function(){ 
     drawChart('chart','00O90000005SSHv');
   });
  
   //  Pie Chart Starts here
  
     var width =250 ,
      height = 450,
      radius = Math.min(width, height) / 2;
  
      var data = [{"age":"&lt;5","population":2704659},{"age":"14-17","population":2159981},
          {"age":"14-17","population":2159981},{"age":"18-24","population":3853788},
          {"age":"25-44","population":14106543},{"age":"45-64","population":8819342},
          {"age":"&gt;65","population":612463}];
  
      var color = d3.scale.ordinal()
          .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
  
       var arc = d3.svg.arc().outerRadius(radius - 10).innerRadius(0);
  
      var pie = d3.layout.pie()
          .sort(null)
          .value(function(d) { return d.population; });
  
      var svg = d3.select("#body").append("svg")
          .attr("width", width)
          .attr("height", height)
          .append("g")
          .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  
  
        var g = svg.selectAll(".arc")
            .data(pie(data))
          .enter().append("g")
            .attr("class", "arc");
  
        g.append("path")
            .attr("d", arc)
            .style("fill", function(d) { return color(d.data.age); });
  
        g.append("text")
            .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
            .attr("dy", ".35em")
            .style("text-anchor", "middle")
            .text(function(d) { return d.data.age; });
  
  
   //  Grouped and Stacked Bar Chart starts here
  
       var n = 2, // number of layers
          m = 10, // number of samples per layer
          stack = d3.layout.stack(),
          layers = stack(d3.range(n).map(function() { return bumpLayer(m, .1); })),
          yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
          yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
  
       var margin = {top: 40, right: 10, bottom: 20, left: 10},
          width = 960 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;
  
       var x = d3.scale.ordinal()
          .domain(d3.range(m))
          .rangeRoundBands([0, width], .08);
  
      var y = d3.scale.linear()
          .domain([0, yStackMax])
          .range([height, 0]);
  
      var color = d3.scale.linear()
          .domain([0, n - 1])
          .range(["#aad", "#556"]);
  
      var xAxis = d3.svg.axis()
          .scale(x)
          .tickSize(0)
          .tickPadding(6)
          .orient("bottom");
  
      var svg = d3.select("#body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
      var layer = svg.selectAll(".layer")
          .data(layers)
        .enter().append("g")
          .attr("class", "layer")
          .style("fill", function(d, i) { return color(i); });
  
      var rect = layer.selectAll("rect")
          .data(function(d) { return d; })
        .enter().append("rect")
          .attr("x", function(d) { return x(d.x); })
          .attr("y", height)
          .attr("width", x.rangeBand())
          .attr("height", 0);
  
      rect.transition()
          .delay(function(d, i) { return i * 10; })
          .attr("y", function(d) { return y(d.y0 + d.y); })
          .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });
  
      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);
  
      d3.selectAll("input").on("change", change);
  
      var timeout = setTimeout(function() {
        d3.select("input[value=\"grouped\"]").property("checked", true).each(change);
      }, 2000);
  
      function change() {
        clearTimeout(timeout);
        if (this.value === "grouped") transitionGrouped();
        else transitionStacked();
      }
  
      function transitionGrouped() {
        y.domain([0, yGroupMax]);
  
        rect.transition()
            .duration(500)
            .delay(function(d, i) { return i * 10; })
            .attr("x", function(d, i, j) { return x(d.x) + x.rangeBand() / n * j; })
            .attr("width", x.rangeBand() / n)
          .transition()
            .attr("y", function(d) { return y(d.y); })
            .attr("height", function(d) { return height - y(d.y); });
      }
  
      function transitionStacked() {
        y.domain([0, yStackMax]);
  
        rect.transition()
            .duration(500)
            .delay(function(d, i) { return i * 10; })
            .attr("y", function(d) { return y(d.y0 + d.y); })
            .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
          .transition()
            .attr("x", function(d) { return x(d.x); })
            .attr("width", x.rangeBand());
      }
  
      // Inspired by Lee Byron's test data generator.
      function bumpLayer(n, o) {
  
        function bump(a) {
          var x = 1/(.1 + Math.random()),
              y = 2*Math.random()-.5,
              z = 10/(.1 + Math.random());
          for (var i = 0; i &lt; n; i++) {
            var w = (i/n- y) * z;
            a[i] += x * Math.exp(-w * w);
          }
        }
  
        var a=[],i;
        for (i = 0; i &lt; n; ++i) a[i] = o + o * Math.random();
        for (i = 0; i &lt; 5; ++i) bump(a);
        return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
      }
      &lt;/script&gt;
   &lt;svg id="chart" height="50%" width="500px" &gt;&lt;/svg&gt;  // Id for Matrix chart
  &lt;/apex:page&gt;
  Thanks in advance 
  </code></pre>