title: D3 Dimple - How to show multiple dimple charts on same page?
body: <p>I'm making an html page with several examples of charts that I will be using. On the page I have a Dimple line graph, a pie chart, a wordcloud etc. When I try to add a second dimple graph - this time a bar graph, the first dimple line graph that I already have on the page is drawn on top of my bar graph:
  <img src="https://i.stack.imgur.com/jjOuB.png" alt="enter image description here"></p>
  
  <p>My HTML file looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;D3 Graphs&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="_/base.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="_/c3CSS.css"&gt;
      &lt;script type="text/javascript" src="_/d3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="_/dimple.v2.1.0.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="_/c3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="_/d3.layout.cloud.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="chartContainer"&gt;
          &lt;h1&gt;Hot Topics Line&lt;/h1&gt;
          &lt;script type="text/javascript" src=CurvyLine.js&gt;&lt;/script&gt;
      &lt;/div&gt;
  
      &lt;h1&gt;Hot Topics Pie&lt;/h1&gt;
      &lt;div id="chart"&gt;
          &lt;script type="text/javascript" src=Pie.js&gt;&lt;/script&gt;
      &lt;/div&gt;
  
      &lt;div id="wordCloud"&gt;
          &lt;h1&gt;Clickable Word Cloud&lt;/h1&gt;
          &lt;script type="text/javascript" src=WordCloud.js&gt;&lt;/script&gt;
      &lt;/div&gt;
  
      &lt;div id="bar"&gt;
          &lt;h1&gt;Clickable Word Cloud&lt;/h1&gt;
          &lt;script type="text/javascript" src=WeekBar.js&gt;&lt;/script&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Without adding the bar chart at the end, the line graph displays properly at the top of the page above the pie chart. However, with the bar chart added, both the line and bar graph are drawn inside the "bar" div. Can anyone help with this please? Here is my line graph js file: </p>
  
  <pre><code>var svg = dimple.newSvg("#chartContainer", 590, 400);
  
  d3.tsv("data/tweet_example.tsv", function (data) {
  
    //data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
  
    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 30, 505, 305);
  
    var x = myChart.addCategoryAxis("x", "Month");
    x.addOrderRule("Date");
  
    myChart.addMeasureAxis("y", "Tweets");
  
    var s = myChart.addSeries("Topic", dimple.plot.line);
    s.interpolation = "cardinal";
  
    myChart.addLegend(60, 10, 500, 20, "right");
    myChart.draw();
  
  });
  </code></pre>
  
  <p>and here is my bar graph js file:</p>
  
  <pre><code>var svg = dimple.newSvg("#bar", 800, 410);
  
  d3.tsv("data/tweet_example2.tsv", function (data) {
  
    //data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
    var barChart = new dimple.chart(svg, data);
  
    barChart.addCategoryAxis("x", ["Day", "Topic"]);
    barChart.addMeasureAxis("y", "Tweets");
    barChart.addSeries("Topic", dimple.plot.bar);
    barChart.addLegend(65, 10, 510, 20, "right");
    barChart.draw();
  
    barChart.draw();
  });
  </code></pre>