Is there a working implemenation to fit multiple d3 charts like line, bar, etc on one page? [closed]

Question

I am trying to fit multiple charts on a single jsp page. I have a combination of line and bar charts. I am using dimple API for d3.js. Please advice. Bootstrap doesnt seem to work with this.

Aime

D3 charts are just svg elements, you can have as many on the page as you want. What does this have to do with bootstrap? What have you tried? Post some code please. – Zenaidazenana

Answer 1

Bootstrap seems to be simple to use:

Add this in your .html file.

<div class="row">
  <div class="col-md-6" id="area1"></div>
  <div class="col-md-6" id="area2"></div>
</div>

Relate the d3 object in the select() to the id in the div tag.

var chart2 = d3.select("#area1").append("svg")
...

var chart2 = d3.select("#area2").append("svg")
...

For more details, just follow the examples in the D3-Tips-and-Tricks book. Section: Using Bootstrap with d3.js

Electrokinetics