KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Charts rendering with minimum width inside bootsrap collapse (accordion) #937

Closed Brindicis opened this topic on on Jun 19, 2019 - 2 comments
Brindicis commented on Jun 19, 2019

I've been trying to use Google Charts inside a bootsrap collapse element, but despite of the chart I use, it always gets rendered in the minimum width possible. After some research, i realized this happens because when the chart is rendered, the collapse panel is hidden and this affects the chart's dimmensions. I want to know if there is a way to render the chart only when the panel is visible, using your code.

Thanks for developing such an helpfull solution, Bruno - Brindicis

KoolReport commented on Jun 20, 2019

It is not a bug actually, when the element is invisible, it seems no way to get exactly the size. Below is solution:

  1. You set name for the chart, "name"=>"mychart"
  2. You can catch the event when the collapse element become visible and call mychart.redraw();

The idea is that when the collapse element visible, you will redraw the chart, the chart will adjust itself to fit the size to the available space.

Brindicis commented on Jun 21, 2019

Thank you so much. It is working fine now.

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed
None

Designed and built with by KoolPHP Inc.

Code licensed MIT.