Wrong width in Chart div

Question

I am trying to make an effect, when I choose an option in select, I show the corresponding div with highchart. Has 2 problems:

1- Width of Chart is not correctly completing width of div.

2- I’m not able to think of a way to hide the other options when one is shown. (will be more than 3 options, in the example have two not to complicate too much).

JSFIDDLE

HTML

<div style="width:80%;">
<select class="selectchart" id="selectsolicitacoes"><option>Por mês</option><option value="#hg3">Por semana</option><option value="#hg2">Por dia</option></select><br>
<div id="hg2" style="min-width: 310px; height: 400px; margin: 0 auto; display: none;">        </div>
<div id="hg3" style="min-width: 310px; height: 400px; margin: 0 auto; display: none;">     </div>

Javascript

$(document).ready(function(){
$('#selectsolicitacoes').change(function(){
    var element = $(this).val();
    $(element).show();
});
});

Answer 1

Here is a suggestion:

Show and hide options:

$(document).ready(function(){
    var $graficos = $('[id^=hg]').hide();
    $('#selectsolicitacoes').change(function(){
        var element = this.value; // tirei o "$(this).val()", não precisa de jQuery aqui
        $graficos.hide(); // esconder todos os elementos que cujo ID começa por "hg"
        $(element).show();
    });
});

I suggest giving a longer ID so as not to risk my code "catching" other elements in the same selector. Maybe it’s a good idea to use a div around these graphics to have a more "right" selector, like $('#novaDiv [id^=hg]').hide();

Width of the Highchart

The problem seems to be that Highcharts cannot know the width of an element that is hidden. This is a bug acquaintance highcharts.

So, if in the initial CSS the elements are not with display: none;but rather with opacity: 0; Highcharts can render with the correct width. From there you can use the code as I had placed it.

Adding to this idea the use of the Hicharts onload event, you can use it like this:

$('#hg2').highcharts({
    chart: {
        events: {
            load: function (event) {
                $('#hg2').hide().css('opacity', 1);
            }
        }
    },
// fazer isto em cada gráfico

Example

This solution is based in this answer, the ways I knew before, which are patches to the "bug" are to assign width: 100%; to Hicharts' div, or call a $(window).resize();