We load a dashboard of highcharts in a HTML Area in web-client which works fine, but in Smart we have to use the Browser Suite. On the initial click to bring up the dashboard, that good old "HTTP 404 Not Found" splash page appears for a second or two before the charts are actually displayed. The charts do display after that 1 - 2 seconds, but it could easily annoy clients. Has anyone figured out if it's possible to get around this being displayed? I've attached a screenshot.
I've found a solution to this myself. The issue is that the page was displaying before it was actually ready, so here's a solution for you:
On top of your existing browser bean area, place another. Set it to the same dimensions as the one containing your charts, and bring it right to the front. The next thing we need to do is add a data provider variable in the script:
- Code: Select all
var preLoadHtml = '<!DOCTYPE html><html><head></head><body><p style="margin-top: 20%; margin-left: 45%; font-family: Verdana; font-size: 24px;">Building charts...</p></body></html>';
Now set your new browser bean area to use that variable as a data provider. You should also name your bean accordingly, I called mine "pre_load".
Of course, you'll need to hide this bean once the charts are actually loaded and ready to be viewed; right above the code which returns your chart HTML is the place to do this. For example:
- Code: Select all
elements.pre_load.visible = false;
// Below returns the HTML for the charts
return chartHTML;
This will initially show you a splash page when you load a chart for the first time which simply says "Building charts...". This will stay for a second or two, depending on how long it takes to build the charts for the user, then it'll disappear and your charts will be visible - completely hiding the HTTP404 error from the user. You may be wondering why I didn't just set the chartHTML variable to initially contain "Building charts..."; quite simply, it just didn't work. The charts are built dynamically, so I believe this method was the most effective.
You could also use this for things other than charts if you're experiencing a similar issue elsewhere. I hope this helps someone.