Dana Dana - 1 month ago 8
Javascript Question

Bootstrap toggle button collapse Flot piechart

I'm trying to add a Bootstrap toggle button that when is pressed collapses a chart. I've first added the same button for a datatable and it worked but when I added it to my chart on the first click the panel where the chart is in it shrink, on the second click it hides the chart and on the third (when it should open it) it opens but it's shrink (out of the panel).

<div class="mypanel" id="PanelA">
<div class="panel panel-default">
<div class="panel-body">
<div class="demo-container">
<div id="ChartA" class="demo-placeholder"></div>
</div>
<div class="demo-container" data-bind="visible:dataList().length>0">
<br />
<div class="btn-group" style="padding-right:10px; padding-left:10px">
<button type="button" class="btn btn-default pull-left" data-toggle="collapse" id="BtnCA">
<span class="fa fa-bar-chart" aria-hidden="true"></span>
<span class="btnFont">Show Chart</span>
</button>
</div>
<div id="ChartA-Overview" style="width: 100%; min-height:100px" class="demo-placeholder"></div>
</div>
</div>
</div>
</div>




Is there any way to collapse/show a Flot chart whenever the toggle button is pressed?

Answer

First thing is you're missing an ending double-quote in your ID. You'll want to also add class="collapse" to the div if you want the div to start off collapsed.

<div id="ChartA-Overview ...

It should be <div id="ChartA-Overview" class="collapse" ... >

Since you're using a <button>, add the data-target attribute to target the div's ID that you want to collapse and expand (i.e. data-target="ChartA-Overview").

Edit 2

Sometimes the Id's come from data-bind... its' something like ""ChartA-Overview"+Id(),

If this is the case, you can use jQuery to get the div ID to add the data-target attribute. Here's a codepen for you to review.

http://codepen.io/yongchuc/pen/QGLdez

Comments