Chart size not correct

[leonardharley]

Hi,

 

Firstly - well done on an excellent product!

 

We are having a problem with chart sizing and I'm hoping you can assist. We have a modal popup window as follows:

 

<div class="modal fade" id="tankdatahrmodal" tabindex="-1" data-width="790" style="display: none;">
<div class="modal-content">
<div class="modal-header" style="background-color: #003A76; color: #ffffff; border-top-left-radius: 5px; border-top-right-radius: 5px;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: #fff; opacity: 1;">x</button>
<div>
<h3 class="modal-title" data-tankid="" id="tankdatahrmodalheader"></h3>
</div>
</div>
<div class="modal-body">
<div id="tank-hr-detail" style="width: 760px; height: 360px;"></div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" onclick="backToDaily(event)" class="btn btn-primary pull-left">
<i class="fa fa-arrow-left" style="color: #ffffff;"></i> Back</button>
<button type="button" data-dismiss="modal" class="btn btn-default pull-right">Close</button>
</div>
</div>
</div>

 

The div -> <div id="tank-hr-detail" style="width: 760px; height: 360px;"></div> is the place holder for the graph.

 

The JS sets the graph up as follows:

 

FusionCharts.ready(function(){
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "tank-hr-detail",
"width": "715",
"height": "360",
"dataFormat": "json",
"dataSource": {
"chart": {
"showToolTip" : 1,
"caption": "Hourly tank levels",
"subCaption": tank_description,
"xAxisName": "Time",
"yAxisName": "Litres",
"theme": "ocean",
"formatNumberScale" : 0,
"numberSuffix" : ' ltrs'
},
"data": tank_hr_data
}
});
revenueChart.render();
})

 

As you can see the width and height are set yet the graph does not render correctly. The attached screen shot shows the problem.

 

Please refer to the second screenshot with firebug CSS details highlighted - it seems for some reason the charting lib is setting the width to "512" and the height to "342" at runtime / when rendering resulting in the chart not displaying correctly.

 

Please can you offer some advice to fix.

 

Many thanks in advance.

 

Len

[Vishalika]

Hi,

 

Welcome to FusionCharts Forum.

 

Could you please share a scaled down sample to replicate the issue?

 

Awaiting response.

[leonardharley]

Hi Vishalika,

 

Apologies for the delayed reply - have been very busy.

 

I'm not sure how to provide "a scaled down sample" - the code snippets provided above are the core elements only - i.e. the modal window in which the graph appears and the JS fusioncharts code that produces the graph...

 

Let me know what you would like to assist.

 

It seems to me that the fusioncharts rendering engine is over riding the settings "width": "715" and "height": "360" set during the chart instantiation...

 

Regards,

 

Len

[Vishalika]

Hi,

 

We have tried creating a sample from our end.

 

Sharing with you the same. Check and confirm if this fulfills your requirement.

  

Refer this link for the same: https://www.dropbox.com/s/yezt1yale87n3tv/BootstrapModalPopupSample.rar?dl=0

 

Hope this helps.

[leonardharley]

Hi Vishalika,

 

BINGO!

 

Adding the event listners to 'shown.bs.modal' and 'internal.animationComplete' and then resizing the chart did the trick!

 

Thanks very much - once again Fusioncharts support team shows why you are without a doubt the best charting company on the block!

 

Len

[Vishalika]

Hi Len,

 

Glad to know that your issue is resolved. 

[leonardharley]

Hi Vishalika,

 

Bad news I'm afraid - the solution works perfectly in Firefox but not at all in Chrome. In fact Chrome will not even load the example provided by yourselves.

 

Any ideas?

 

Len

[Vishalika]

Hi Len,

 

The sample shared from our end is working fine in both the browsers.

 

Can you please share screenshot or video link so that we can replicate the issue?

 

Awaiting response.

[leonardharley]

Hi Vishalika,

 

The project we are working on has severe deadlines so we quickly re-engineered the UI to provide the graphs without using modal popup windows.

 

If needed we shall revert to the documentation / example provided and revert should we use modals and come across the issue again.

 

Many thanks for your help.

 

Best,

 

Len

[Vishalika]

Hi Len,

 

For any further help you can drop us a mail at '[email protected]'

 

Or in the forum as well.