Wrong width in chart div

Question

Wrong width in chart div

Navigation

#1 by (1 votes)

2

I'm trying to make an effect of when I choose an option in the select, I show the corresponding div with highchart . You have 2 problems:

1- The width of the chart is not completing the width of the div correctly.

2- I can not think of a way to hide the other options when one is shown. (there will be more than 3 options, in the example there are two to not complicate 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();
});
});

javascript html jquery css highcharts

asked by anonymous 26.04.2014 / 15:32

1 answer

Login to Paypal Draw a polygon freely using the fabric.js

score 1 · Accepted Answer

Here's 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 taking a longer ID to avoid the risk of my code "catch" other elements in the same selector. Maybe it's a good idea to use a div around these graphs to have a more "sure" selector, type $('#novaDiv [id^=hg]').hide();

Highchart Width

The problem seems to be that Highcharts can not know the width of an element that is hidden. This is a Highcharts bug .

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

Joining this idea to use the onLoad event of Hicharts, you can use 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 you knew before, which are patches for the bug are assign width: 100%; to the Hicharts div, or call a $(window).resize();