Chart doesn't render in div with display:none property

[MikeT]

Using FusionCharts XT 3.4.0

 

I have a page with 2 charts in separate divs - a summary chart in chartSummaryDiv and a detail chart in chartDetailDiv. The detail chart has a lot of data and is quite slow to render. So my chartDetailDiv div has the property "display:none". The idea is that when the page renders the user will see the summary chart, but the detail chart will be rendering in the invisible div while they look at the summary. There is a pull-down menu on the page to select the detail chart - this just executes a simple javascript function that sets the chartSummaryDiv to "display:none" and the chartDetailDiv to "display:block" which should hide the summary chart and reveal the already rendered detail chart.

 

It works fine except that the detail chart isn't already rendered. The detail div displays with its default text saying the data is being rendered, and after a few seconds the detail chart appears.

 

I've tried every combination of "display:none" and "display:block" on these 2 divs and results are always the same - neither chart is rendered while the div's display property is set to "display:none".

 

I can imagine someone coding this might have said "there's no point rendering the chart while it isn't visible" but it seems quite unlikely.

 

So my question is: is this is a bug or is it known behavior? If it's designed that way, is there any way to override it?

 

Thanks.

 

 

[Gagan Sikri]

Hi

 

Please share a scaled down sample for the scenario so that we can check the issue and provide solution or workaround for this.

 

Also, you should use `display:block` as in this case element is loaded on web page while in case of `display:none` element is not loaded at all.