Background Style On Error

[Jim van Gulik]

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 March 6, 2013 by Jim van Gulik

[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!

[Jim van Gulik]

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 March 7, 2013 by Jim van Gulik

[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?

[Jim van Gulik]

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.

 

Is this possible?

 

 

Edited March 11, 2013 by Jim van Gulik

[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!

[Jim van Gulik]

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 March 11, 2013 by Jim van Gulik

[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.

[Jim van Gulik]

Hi Jim,

 

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

 

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!!

[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.

[joaobmonteiro]

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!

[Jim van Gulik]

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.

[Guest Sumedh]

Hi Jim,

 

I am afraid, there is no work-around for this. 

[Jim van Gulik]

Hi Jim,

 

I am afraid, there is no work-around for this. 

We know. That's why we are bumping this thread so you will put it on the backlog 

[thomaschoy]

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;
}

[Swarnam]

Hi,

 

Thanks for sharing the code. :-)