Jim van Gulik

Background Style On Error

Recommended Posts

Hi,

 

Is there a way to change the background style (color, font folor, maybe an image) of the screen that says "Loading data" or more importantly "Error loading data"?

 

I have changed the background color of the div, the background color of the chart (which does work). However, I am not able to find a way to change the background style when an error (or loading) message appears).

 

I have found how I can change the messages, but not the background style.

 

Any help will be appreciated.

Edited by Jim van Gulik

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi Jim,

 

As you have mentioned, you can customize the "Chart Messages" by using the FusionCharts JavaScript function "configure()" by passing the attribute name and the message string as parameters to it.

 

Also, you can set the background color for that customized chart messages, by setting the "bgColor" parameter of the FusionCharts JavaScript constructor.

 

Ref. Code Snippet:

var myChart = new FusionCharts("Column2D.swf", "myChartId", "300", "250", "0", "1", "#DCD8EB");
....
myChart.configure("ChartNoDataText", "Please select a record above");
......

 

However, you can not set the custom styles like: font color,background image etc. using FusionCharts JavaScript constructor, as of now.

 

For more details on "Changing Chart Messages", please follow the link below:

http://docs.fusioncharts.com/charts/contents/?advanced/ChartMessages.html

 

Hope this helps!

Share this post


Link to post
Share on other sites

Hi Jim,

 

As you have mentioned, you can customize the "Chart Messages" by using the FusionCharts JavaScript function "configure()" by passing the attribute name and the message string as parameters to it.

 

Also, you can set the background color for that customized chart messages, by setting the "bgColor" parameter of the FusionCharts JavaScript constructor.

 

Hope this helps!

Definitely!! Thanks a lot. This looks much better. I was close, but not close enough.

 

Where can I find the different constructors? I have found that there are different types of constructors, but I can't seem to find the one you mentioned (with the background color).

 

Is there a way to avoid the flickering altogether? I am aware of the live data streaming possibilities, but I am wondering if there is a way to reload the data (setJSONUrl) and refresh (render) the chart without the chart flickering (switching to the "loading data..." screen.

 

 

 

Edited by Jim van Gulik

Share this post


Link to post
Share on other sites
Guest Sumedh

Definitely!! Thanks a lot. This looks much better. I was close, but not close enough.

 

Where can I find the different constructors? I have found that there are different types of constructors, but I can't seem to find the one you mentioned (with the background color).

 

Is there a way to avoid the flickering altogether? I am aware of the live data streaming possibilities, but I am wondering if there is a way to reload the data (setJSONUrl) and refresh (render) the chart without the chart flickering (switching to the "loading data..." screen.

 

 

 

 

Hi,

 

 

The constructor method of FusionCharts JavaScript class allows you to create new instance of FusionCharts using legacy set of linear parameters as well as an Object parameter.

It can take an Object as parameter containing all chart parameters.

 

For more information, please refer the following URLs:

http://docs.fusionch...PI/Methods.html

 

http://docs.fusionch...reateChart.html

 

Is there a way to avoid the flickering altogether? I am aware of the live data streaming possibilities, but I am wondering if there is a way to reload the data (setJSONUrl) and refresh (render) the chart without the chart flickering (switching to the "loading data..." screen.

>> Also, can you please elaborate a bit more on this?

Share this post


Link to post
Share on other sites

Is there a way to avoid the flickering altogether? I am aware of the live data streaming possibilities, but I am wondering if there is a way to reload the data (setJSONUrl) and refresh (render) the chart without the chart flickering (switching to the "loading data..." screen.

>> Also, can you please elaborate a bit more on this?

 

There's a chart on the screen, which has been fed with data via setJSONUrl("..."). Every 30 seconds I would like to refresh the data and redraw the chart. When I do this (via javascript) the entire chart is cleared, reloaded (setJSONUrl) and redrawn (render). When the chart is cleared the message "loading data..." will appear.

 

Take a look at the example image. First picture is chart with data. When I reload the data, the second image will be shown and after reloading and rendering the third image. I would like to avoid seeing the second image.

example.png

 

Is this possible?

 

 

Edited by Jim van Gulik

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi Jim,

 

To hide a chart message please provide a blank space as the custom message. For example, if you wish to disable the chart loading message,

 

You may use -

 

Ref. Code:

myChart.configure("PBarLoadingText", " ");

 

For more information, please refer the following link:

http://docs.fusionch...rtMessages.html

 

Hope this helps!

Share this post


Link to post
Share on other sites

Hi Jim,

 

To hide a chart message please provide a blank space as the custom message. For example, if you wish to disable the chart loading message,

 

You may use -

 

Ref. Code:

myChart.configure("PBarLoadingText", " ");

 

For more information, please refer the following link:

http://docs.fusionch...rtMessages.html

 

Hope this helps!

Thanks

 

I already tried this trick and it does help a bit. However, the screen still flickers (shows an empty screen) before redrawing the chart. I would like to avoid the flickering screen effect.

Edited by Jim van Gulik

Share this post


Link to post
Share on other sites
Guest Sumedh

Thanks

 

I already tried this trick and it does help a bit. However, the screen still flickers (shows an empty screen) before redrawing the chart. I would like to avoid the flickering screen effect.

 

Hi Jim,

 

I am afraid, there is no work-around to avoid screen flickering. sad.gif

Share this post


Link to post
Share on other sites

Hi Jim,

 

I am afraid, there is no work-around to avoid screen flickering. sad.gif

 

That's too bad. Would really be an improvement for monitoring dashboards with a fixed interval for refreshing data.

 

Clearing the text and changing the background color does help a bit.

 

Thanks anyway!!

Share this post


Link to post
Share on other sites
Guest Sumedh

That's too bad. Would really be an improvement for monitoring dashboards with a fixed interval for refreshing data.

 

Clearing the text and changing the background color does help a bit.

 

Thanks anyway!!

 

Hi Jim,

 

We would definitely try to add this as an improvement, if it is feasible.

 

Thanks for your time and support.

Share this post


Link to post
Share on other sites

Hi! 

 

I have exactly the same problem.

I'd like to say that for us it is really important to avoid flickering and the "loading data" screen

once we have several big TV screens showing many charts.

 

Thanks!

Share this post


Link to post
Share on other sites

Hi! 

 

I have exactly the same problem.

I'd like to say that for us it is really important to avoid flickering and the "loading data" screen

once we have several big TV screens showing many charts.

 

Thanks!

It is indeed quite a show stopper for dashboards with live data.

Share this post


Link to post
Share on other sites

I investigated this topic and found a workaround. The idea is to set the DIV to transperent before render, and make this visiable after render callback:

 

<div id='chart_container'> </div>

...

FusionCharts.ready(

              function () {
                               document.getElementById('chart_container').style.opacity = 0.0;
                               chart = new FusionCharts(...);
                               chart.render();
               }

);
function FC_Rendered(DOMId)
{
               document.getElementById('chart_container').style.opacity = 1.0;
}

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