Highchart Cloud Carousel

by Gert Vaartjes

HTML

<select name='dd'>
    <option value="c1">Chart title 1</option>
    <option value="c2">Chart title 1</option>
    <option value="c3">Hamster</option>
</select>
<div id="container">
  <div id="c1">
    <div id="highcharts-GBanZitX-">
      <script src="https://cloud.highcharts.com/inject/GBanZitX-/" defer="defer"></script>
    </div>
    <!--iframe class="highcharts-iframe" src="https://cloud.highcharts.com/embed/9DlRIkn0C/" style="border: 0; width: 100%; height: 500px"></iframe-->
  </div>
  <div id="c2" class="hidden">
    <div id="highcharts-7wUBl0Fdj">
      <script src="https://cloud.highcharts.com/inject/7wUBl0Fdj/" defer="defer"></script>
    </div>

    <!--iframe class="highcharts-iframe" src="https://cloud.highcharts.com/embed/B1PZ_-V-z/" style="border: 0; width: 100%; height: 500px"></iframe -->
  </div>
  <div id="c3" class="hidden">
    <div id="highcharts-zh90QUuF5">
      <script src="https://cloud.highcharts.com/inject/zh90QUuF5/" defer="defer"></script>
    </div>
  </div>
  <!--iframe class="highcharts-iframe" src="https://cloud.highcharts.com/embed/Hk6aCl8lG/" style="border: 0; width: 100%; height: 500px"></iframe-->
</div>

CSS

.hidden {
  display: none;
}

div#container {
  width: 100%;
  margin: 5px 10px;
}

JavaScript

/* test with iframes , and options for pager instead of dropdown, animation chart/in out, transitions
 * 
 */



// register chnageEvent to the dropdown selection
document.addEventListener('DOMContentLoaded', function() {

  let divs = document.querySelector('#container').children,
    dd = document.querySelector('select[name="dd"]'),
    changeEventHandler = function(event) {

      for (let div of divs) {
        if (div.id === event.target.value) {
          div.classList.remove('hidden');
          Highcharts.charts.map(function(chart) {
            // improve reflow, only for visible div
            chart.reflow()
          })
        } else {
          div.classList.add('hidden');
        }
      }
    }

  dd.options[0].selected = true;
  dd.onchange = changeEventHandler;

  //https://stackoverflow.com/questions/3768768/loading-javascript-dynamically-and-how-to-check-if-the-script-exists
  let timeout = 100;
  poll = function() {
    setTimeout(function() {
      timeout--;
      if (typeof Highcharts !== 'undefined') {
        // External file loaded
        console.log('H is loaded')
        // CHECK IF THERE THREE 
        //document.querySelector('#container').querySelectorAll('text.highcharts-title').forEach(function(svg) { console.log(svg)})
        document.querySelector('#container').querySelectorAll('text.highcharts-title').forEach(function(svg) { console.log(svg)});
        
      } else if (timeout > 0) {
        poll();
      } else {
        // External library failed to load
        
      }
    }, 100);
  };

  poll();

}, false);