Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines
Hi Support Team,
i'm using Bootstrap JS Tab... to shows the charts
when 1st tab is active its shows full charts but in another tabs charts come up with half view (its width become half )
(its doesn't see on tab ) could you please take a look on charts...
when I inspect it, its shows full....
Why these chart shows half
There is always problem when we initiate the chart in a hidden div. It will make chart failed to realize the true size. The solution is that when your tab is fully show ( may be though event of Bootstrap tab) then you re draw the charts. Please assign a name to your chart and use that name to redraw chart at client-side:
<?php
LineChart::create(array(
"name"=>"myLineChart",
...
))
?>
Then later at client-side you can call:
myLineChart.redraw();
to draw the chart again!
You can modify the googlechart.js and add the following code on the first function thas refresh when the resize event is load :
file : "koolreport/core/src/widgets/google/clients/googlechart.js"
<code>
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', this.redraw.bind(this));
</code>
With this, when you are using bootstrap with tabs, it could be refresh automatically all charts
Let KoolReport help you to make great reports. It's free & open-source released under MIT license.
Download KoolReport View demo