bootstrap tab with nvd3 graphs in it

To create a Bootstrap tab with NVD3 graphs, you can follow these steps:

  1. Include the necessary CSS and JavaScript files for both Bootstrap and NVD3 in your HTML file.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css">
  1. Create the tab structure using Bootstrap's HTML markup. Each tab will have a unique ID.
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="graph1-tab" data-toggle="tab" href="#graph1" role="tab" aria-controls="graph1" aria-selected="true">Graph 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="graph2-tab" data-toggle="tab" href="#graph2" role="tab" aria-controls="graph2" aria-selected="false">Graph 2</a>
  </li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="graph1" role="tabpanel" aria-labelledby="graph1-tab">
    <!-- NVD3 graph 1 goes here -->
  </div>
  <div class="tab-pane fade" id="graph2" role="tabpanel" aria-labelledby="graph2-tab">
    <!-- NVD3 graph 2 goes here -->
  </div>
</div>
  1. Create the NVD3 graphs inside the tab content divs. You can use JavaScript to generate the graphs.
<script>
  // Example code to generate NVD3 graph 1
  nv.addGraph(function() {
    var chart = nv.models.lineChart();

    // Configure the chart options

    d3.select("#graph1 svg")
      .datum(yourData)
      .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
  });

  // Example code to generate NVD3 graph 2
  nv.addGraph(function() {
    var chart = nv.models.pieChart();

    // Configure the chart options

    d3.select("#graph2 svg")
      .datum(yourData)
      .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
  });
</script>

Replace yourData with your actual data for each graph.

  1. Customize the graph options, data, and styling according to your requirements.

That's it! You now have a Bootstrap tab with NVD3 graphs in it. You can add more tabs and graphs by following the same structure. Remember to include the necessary CSS and JavaScript files and adjust the graph generation code for each tab accordingly.