How to onload <div> to run automatically when page start loading?

Question

My code works well but when i refresh my page, both <div> run together whereas i need only one when each radio button is clicked.

<input type="radio" name="cardType" id="one" class="css-checkbox" value="db" checked>Pie
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">Column

$(document).ready(function () {
    $(".css-checkbox").click(function () {
        if ($(this).attr('id') == "one") {
            $('#a').show();
            $('#b').hide();             
        } else {
            $('#a').hide();
            $('#b').show();             
        }
    });
});

<div id="a">
    <div id="Revenue" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>
<div id="b">
    <div id="Revenue2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>  

and here's my graph code. Revenue and revenue2 basically a graph that will alternately shown when radio button is clicked. so basically both code are the same with different data only.

<script type="text/javascript">
    $(document).ready(function() {
        var options = {
            chart: {
                renderTo: 'Revenue2',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Revenue'
            },

            xAxis: {
                type: 'category',
                labels: {
                    rotation: -45,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Revenue (RM)'
                }
            },
            plotOptions: {
                column: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name;
                        }
                    }
                }
            },
            series: [{
                type: 'column',
                name: 'Revenue',
                data: []
            }]
        }

        $.getJSON("dataCountryRevenue.php", function(json) {
            options.series[0].data = json;
            chart = new Highcharts.Chart(options);
        });



    });   
</script>

Answer 1

Try hiding one of the divs on document load:

EDIT: I'm not super familiar with the HighCharts API, but it looks like there is a callback in the constructor that will allow you to do something after the chart is done loading. In this case, I hide the chart after it has finished loading.

$(document).ready(function() {
  $(".css-checkbox").click(function() {
    if ($(this).attr('id') == "one") {
      $('#a').show();
      $('#b').hide();
    } else {
      $('#a').hide();
      $('#b').show();
    }
  });

  var options1 = {
    //removed for brevity;
  }

  var options2 = {
    //removed for brevity;
  }

  //get chart1
  $.getJSON("dataCountryRevenue.php", function(json) {
    options.series[0].data = json;
    chart = new Highcharts.Chart(options1);
  });

  //get chart2
  $.getJSON("dataCountryRevenue.php", function(json) {
    options.series[0].data = json;
    chart = new Highcharts.Chart(options2, function() {

      //hide chart after it has been loaded
      $("#b").hide();
    });
  });
});

Answer 2

Since you are dealing with something filling the contents while potentially hidden, you might set the div off screen rather than display: none;.

function setOnScreen(id){
  var $a = $("#a");
  var $b = $("#b");
  var $hide = (id === "one" ? $a : $b);
  var className = "offscreen";
  
  $a.addClass(className);
  $b.addClass(className);
  $hide.removeClass(className);
}

$(document).ready(function () {
  setOnScreen($(".css-checkbox[checked]").attr("id"));
  $(".css-checkbox").click(function () { setOnScreen($(this).attr("id")); });
});

#a { background-color: aliceblue; border: solid 1px; }
#b { background-color: mistyrose; border: solid 1px; }

.offscreen {
  position: absolute;
  left: -10000px;
}

<div id="a" class="offscreen">
  <div id="Revenue" style="min-width: 100px; height: 100px; margin: 0 auto"></div>
</div>
<div id="b" class="offscreen">
  <div id="Revenue2" style="min-width: 100px; height: 100px; margin: 0 auto"></div>
</div>

<input type="radio" name="cardType" id="one" class="css-checkbox" value="db" checked>Pie
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">Column

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>