• Content count

  • Joined

  • Last visited

About leonardharley

  • Rank
    Forum Newbie

Profile Information

  • Gender
  1. Hi, I have provided you with the information to test on your end already, so I'm not sure what more you could want. As I said above, we have a "blur" CSS class we apply to the body of the page and as soon as we do so regardless of whether the chart if rendered or not it just blanks the screen. To replicate on your end create the following CSS class in a stylesheet: .blur { -webkit-filter: blur(1px); filter: blur(1px); } Change the body tag of the page to give it an ID: <body id="app-layout"> Place the div for a chart anywhere on the page as normal. To see the problem apply the CSS class to the page like so using jQuery: $('#app-layout').addClass('blur'); As soon as you apply the CSS class to the body tag the page will blank screen completely.
  2. Hi, We have a css class as follows: .blur { -webkit-filter: blur(1px); filter: blur(1px); } This is applied to the body of the page when submitting data to the backend as follows: $('#app-layout').addClass('blur'); The body of the page is defined as follows: <body id="app-layout" class="blur" onload="removeBlur()"> The problem is that as soon as we apply the blur filter to the page it blanks the screen - regardless of whether the chart has been rendered or not. Please advise. Many thanks. Len
  3. Chart size not correct

    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
  4. Chart size not correct

    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
  5. Chart size not correct

    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
  6. Chart size not correct

    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
  7. Chart size not correct

    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