Wboy Wboy - 4 months ago 40
CSS Question

jquery show() not displaying properly for highcharts graph

So i'm trying to display 3 graphs in the same div, toggled by buttons which show/hide the other divs respectively. I've set the other 2 graphs to

style= "display: none"


To ensure only one graph is shown upon load. This is how the default view looks like:

enter image description here

The default view is the day on day button. However, when I click the other 2 buttons, the width of the graph screws up, and it displays like this.

enter image description here

It shrinks for some reason. I have switched the order of display, and it's always the hidden graphs which have the size problem. I suspect it has something to do with the inline style property, but I cant figure out how to make it show properly.

Code snippet for graph:

<button onclick="showDay('tasks')">Day on Day</button>
<button onclick="showWeek('tasks')">Week on Week</button>
<button onclick="showMonth('tasks')">Month on Month</button>
<div class="portlet-body">
<div id="tasks"></div>
<div id="tasksWeek" style="display: none"></div>
<div id="tasksMonth" style="display: none"></div>
</div>

<script>
new Highcharts.StockChart({{masterDic['tasks']|safe}});
new Highcharts.StockChart({{masterDic['tasksWeek']|safe}});
new Highcharts.StockChart({{masterDic['tasksMonth']|safe}});
</script>


code snippet for calling (hackish right now)

<script>
function showDay(id) {
var idDay = "#"+id;
var idWeek = "#"+id+"Week";
var idMonth = "#"+id + "Month";
$(idWeek).hide(10);
$(idMonth).hide(10);
$(idDay).show(10);
}
function showWeek(id) {
var idDay = "#"+id;
var idWeek = "#"+id+"Week";
var idMonth = "#"+id + "Month";
$(idMonth).hide(10);
$(idDay).hide(10);
$(idWeek).show(10);
}
function showMonth(id) {
var idDay = "#"+id;
var idWeek = "#"+id+"Week";
var idMonth = "#"+id + "Month";
$(idDay).hide(10);
$(idWeek).hide(10);
$(idMonth).show(10);
}
</script>


Anyone have any ideas on how to fix this? Thanks alot! :)

EDIT:

css for portlet body (entire trace when using inspect element):

https://jsfiddle.net/ovnrpnb5/

Answer

Figured it out if anyone's interested. Tldr: call reflow() on the chart after showing.

I was using hide() and show() instead of tabs as per @Grzegorz Blachliński's comment, so the solution given wasn't working.

I found this link which showed you how to access the element within your HTML http://ahumbleopinion.com/highcharts-tips-accessing-chart-object-from-container-id/

I was using the highcharts CDN, which apparently isnt 3.0.1, so the jquery method wasnt working. Hence, i made the following function and called it after every show()

// HACK TO GET IT TO DISPLAY PROPERLY
function callReflow(id){
    var index = $(id).data('highchartsChart');
    var chart = Highcharts.charts[index];
    chart.reflow();
}

Worked like a charm :)

Comments