D3 Dimple - How to show multiple dimple charts on same page?

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: enter image description here

My HTML file looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3 Graphs</title>

    <link rel="stylesheet" type="text/css" href="_/base.css">
    <link rel="stylesheet" type="text/css" href="_/c3CSS.css">
    <script type="text/javascript" src="_/d3.min.js"></script>
    <script type="text/javascript" src="_/dimple.v2.1.0.min.js"></script>
    <script type="text/javascript" src="_/c3.min.js"></script>
    <script type="text/javascript" src="_/d3.layout.cloud.js"></script>

</head>
<body>

    <div id="chartContainer">
        <h1>Hot Topics Line</h1>
        <script type="text/javascript" src=CurvyLine.js></script>
    </div>

    <h1>Hot Topics Pie</h1>
    <div id="chart">
        <script type="text/javascript" src=Pie.js></script>
    </div>

    <div id="wordCloud">
        <h1>Clickable Word Cloud</h1>
        <script type="text/javascript" src=WordCloud.js></script>
    </div>

    <div id="bar">
        <h1>Clickable Word Cloud</h1>
        <script type="text/javascript" src=WeekBar.js></script>
    </div>

</body>
</html>

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:

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();

});

and here is my bar graph js file:

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();
});

Your problem is that you are using the same global name svg to hold references to two different charts. When your second piece of code runs, it overwrites the svg value that you had from the first piece of code, and when the .tsv() callback returns, it finds a reference to the second graph.

Simplest solution: use different names for svg variable in both pieces of code: svg1 and svg2 will be fine.

Most elegant solution: use some kind of namespace management, such as wrapping both pieces of code in immediately called functions:

function() {
// your first chunk of code here
}()

function() {
// your second chunk of code here
}()

This way you will have two svg variables local to their own scopes

Recommended topics

Hot tags