toggle between data highcharts

by grant

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
 <div id="graphwrap" style="height: 410px;">
            <div id="divID-1" class="toHide" style="position:relative;margin-bottom:-400px;"></div>
            <div id="divID-2" class="toHide" style="position:relative;top:-9999em;opacity:0;"></div>
        </div>

        <div id="viewSelectWrap">
            <h4>View Select</h4>
            <label><input id="rdb1" type="radio" name="toggler" value="divID-1" style="cursor:pointer;" checked/>random</label>
            <label><input id="rdb2" type="radio" name="toggler" value="divID-2" style="cursor:pointer;" />real-time</label>
        </div>

JavaScript

/* ----- fetch -----*/
let url = 'https://kayakidaho.com/php/boise/json/boiseUsgs5day.json'
fetch(url, {
    cache: "no-cache"
  }) // Handle success
  .then(response => response.json()) // convert to json
  .then(function(data) {
    // on success
    // console.log(data)
    var cfs = [];
    var gmt = [];
    for (var i = 0; i < data.length; i++) {
      cfs.push(data[i].cfs);
      gmt.push(data[i].gmt);
    }
    // some random data in range
    const array = [190, 2300, 500, 400, 1450, 1700, 3201];

    // Based on the value returned by Math.Random,
    // the decision is arbitrarily made whether to return 1 : -1

    const shuffeled = array.sort(() => {
      const randomTrueOrFalse = Math.random() > 0.5;
      return randomTrueOrFalse ? 1 : -1
    });

    console.log(shuffeled);
    $(function() {
      $('[name=toggler]').click(function() {
        $('.toHide').css({
          top: '-9999em',
          opacity: 0
        });
        var chartToShow = $(this).val();
        $('#' + chartToShow).css({
          top: 0,
          opacity: 1
        });
      });

      $('#divID-1').highcharts({
        chart: {
          type: 'spline'
        },
        title: {
          text: 'Random Data'
        },
        subtitle: {
          text: 'complete range of thresholds'
        },

        xAxis: {
          categories: [1, 2, 3, 4, 5, 6, 7, 8]
        },
        yAxis: {
          title: {
            text: 'cfs'
          },
          plotLines: [{
            value: 500,
            color: 'green',
            dashStyle: 'shortdash',
            width: 2,
            label: {
              text: 'minimum pleasure'
            }
          }, {
            value: 1400,
            color: 'yellow',
            dashStyle: 'shortdash',
            width: 2,
            label: {
              text: 'maximum pleasure'
            }
          }, {
            value: 2200,
            color: 'red',
            dashStyle: 'shortdash',
            width: 2,
      ...