CODEWITHSUNDEEP
javascriptjquerydimple.js
Asan
Asan

Reputation: 357

Representing 2 or more dimple.js charts

Im a noob and currently I'm practicing with dimple.js.

The problem I'm facing is that I can't represent 2 charts side by side on the same page, it just appears one chart. How can I fix this?

I named each div with two different ID and also considered this on the script.

    <body>


<section>
 <div id="chartContainer1" class="container">

  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer1", 590, 400);
    d3.tsv("/data/example_data.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", "Unit Sales");
      var s = myChart.addSeries("Channel", dimple.plot.line);
      s.interpolation = "cardinal";
      myChart.addLegend(60, 10, 500, 20, "right");
      myChart.draw();
    });
  </script>
</div>



<div id="chartContainer2" class="container">

  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer2", 590, 400);
    d3.tsv("/data/example_data.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", "Unit Sales");
      var s = myChart.addSeries("Channel", dimple.plot.line);
      s.interpolation = "cardinal";
      myChart.addLegend(60, 10, 500, 20, "right");
      myChart.draw();
    });
  </script>
</div>


</section>

Upvotes: 2

Views: 281

Answers (1)

iamjpg
iamjpg

Reputation: 7618

EDIT: I cleaned up the code to help make it more maintainable for you going down the road.

http://jsfiddle.net/gv615hcL/

--

So the problem is in the variable naming. You're overriding your variables. In the second declaration you want to change the names of the new dimple svg, for example instead of naming it:

var svg = dimple.newSvg("#chartContainer2", 590, 400);

name it:

var svg2 = dimple.newSvg("#chartContainer2", 590, 400);

Also, make sure you continue to reference the variables properly.

I made a quick JsFiddle for you here: http://jsfiddle.net/fq4p7t2x/

Upvotes: 1

Related Questions