score:1

Accepted answer

Your approach is wrong, because you are assigning the id to div after the all JavaScript was loaded, so the files displaying graphs in specific id will not render. There must be ID present while the js/example1.js is loading.

You would either need to load both graphs in hidden divs and show the div on click as example bellow. Or on click load specific script via ajax call.

$(document).on('click', '.button', function(){
		$('.button').removeClass('is-success');
    $(this).addClass('is-success');
    $('#container-'+ this.id).toggle();
 })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    
   <body>
      <nav class="navbar has-shadow">
         <div class="container">
            <div class="navbar-brand">
               <a class="navbar-item" href="#"><img src="./img/logo.png" alt=""></a>
            </div>
            <div id="navMenu" class="navbar-menu">
               <div class="navbar-end">
                  <div class="navbar-item has-dropdown is-hoverable">
                     <a class="navbar-link">About</a>
                     <div class="navbar-dropdown">
                        <a href="documentation.html" class="navbar-item"><span class="icon"><i class="fas fa-book"></i></span><span class="name">Documentation</span></a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </nav>
      <div class="columns" id="">
         <aside class="column is-2 aside hero is-fullheight">
            <div>
               <div class="main">
                  <a href="index.html" class="item"><span class="icon"><i class="fas fa-home"></i></span><span class="name">Home</span></a>
               </div>
            </div>
         </aside>
         <div class="column is-1 is-fullheight" id="" style="border:1px solid black;">
            <section class="section">
            <div class="contain" >
               <p class="field"><span class="button is-dark is-small" id="example1">Example1</span></p>
               <p class="field"><span class="button is-dark is-small" id="example2">Example2</span></p>
            </div>
            </section>
         </div>
         <div class="column is-9 is-fullheight" id="" style="border:1px solid red;">
            <section class="section">
            <div class="content" style="border:1px solid green;">
              <div id="container-example1" style="display:none">Loaded Graph 1</div>
              <div id="container-example2" style="display:none">Loaded Graph 2</div>
            </div>
            </section>
         </div>
      </div>
   </body>

For the ajax load of script you could go with something like this, can't test it as I don't have your example files, but it should at least point you right direction.

$(document).on('click', '.button', function() {
  $(".group").attr("id", "#container-" + this.id) //add id - must be before script loads/runs
  $.getScript('js/' + this.id + '.js') //load script with the same name as id
    .done(function() { //if loaded correctly
      $('.button').removeClass('is-success');
      $(this).addClass('is-success');
      $(".group").css("display", "block"); //show chart            
    })
    .fail(function() {
      /* do something when loading fails*/
    });
})
<body>
  <nav class="navbar has-shadow">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="#"><img src="./img/logo.png" alt=""></a>
      </div>
      <div id="navMenu" class="navbar-menu">
        <div class="navbar-end">
          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link">About</a>
            <div class="navbar-dropdown">
              <a href="documentation.html" class="navbar-item"><span class="icon"><i class="fas fa-book"></i></span><span class="name">Documentation</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div class="columns" id="">
    <aside class="column is-2 aside hero is-fullheight">
      <div>
        <div class="main">
          <a href="index.html" class="item"><span class="icon"><i class="fas fa-home"></i></span><span class="name">Home</span></a>
        </div>
      </div>
    </aside>
    <div class="column is-1 is-fullheight" id="" style="border:1px solid black;">
      <section class="section">
        <div class="contain">
          <p class="field"><span class="button is-dark is-small" id="example1">Example1</span></p>
          <p class="field"><span class="button is-dark is-small" id="example2">Example2</span></p>
        </div>
      </section>
    </div>
    <div class="column is-9 is-fullheight" id="" style="border:1px solid red;">
      <section class="section">
        <div class="content" style="border:1px solid green;">
          <div class="group" id="" style="display: none;"></div>
        </div>
      </section>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

score:0

You can use this:

var my_id = 2;
$("#container-example"+my_id).css("display","block");

Related Query

More Query from same tag