Sign in to follow this  
leonardharley

Chart size not correct

Recommended Posts

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

post-65884-0-77113500-1432052133_thumb.jpg

post-65884-0-07754700-1432052136_thumb.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this