Stevers

Fusionwidgets Not Working With Fusioncharts .js Under Firefox

Recommended Posts

I haven't received an update for a while on a prior thread and my issue looks like a problem with FusionCharts / FusionWidgets, so I thought I'd try again in a better forum.

 

Basically I'm unable to combine FusionWidgets and FusionCharts on the same page because the two FusionCharts.js files do not work together. Nor can I use the one from FusionCharts v3.2.1 to drive FusionWidgets v3.1.1. Here's the code again:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 
<html>
<head>
<title>Failures</title>
<link rel="stylesheet" href="../dashboards.css" type="text/css">
</head>
<body>
<div id="currentChartContainer">loading current chart...</div>
<script type="text/javascript" src="/common2/FusionCharts/v3.2.1/FusionCharts.js"></script><!-- (#1) -->
<!-- <script type="text/javascript" src="/common2/FusionWidgets/v3.1.1/FusionCharts.js"></script> (#2) -->
<script type="text/javascript" src="/common2/FusionCharts/v3.2.1/jquery.min.js"></script>
<script type="text/javascript">

       var chart = new FusionCharts( "/common2/FusionWidgets/v3.1.1/AngularGauge.swf", "currentChart", "100%", "70%", "0", "1" );
//      chart.setChartDataUrl( "current-data.xml", "xml" );
       chart.setDataXML( '<chart caption="Caption" subCaption="SubCaption" animation="0" lowerLimit="0" upperLimit="7" gaugeStartAngle="180" gaugeEndAngle="0" palette="3"><colorRange><color minValue="0" maxValue="3" code="FF654F" /><color minValue="3" maxValue="5" code="F6BD0F" /><color minValue="5" maxValue="7" code="8BBA00" /></colorRange><dials><dial value="2" /></dials></chart>' );
       chart.render( "currentChartContainer" );

</script>
</body>
</html>

 

Option #1 works under IE and Chrome, but not Firefox. Why not?

 

-Stevers

Share this post


Link to post
Share on other sites

Hi Stevers,

 

Thank you for the mail and I sincere apology for the late reply.

 

 

When you set percent size to a chart, it tries to get the width/height of its parent container. It seems that the container where you are rendering the chart is not set with a proper height when the chart is rendered into it.

 

For example, if you have a container <div id="chartContainer"> and this DIV is not set with an absolute or relative height, the DIV's height will be zero. When a chart is rendered in this DIV with 100% height, the chart would try to derive the height of the parent DIV which is zero.

 

Could you please once try the following code and let us know your feedback? Also, please find the attached screenshot for your reference .

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 
<html>
<head>
<title>Failures</title>
<link rel="stylesheet" href="../dashboards.css" type="text/css">
</head>
<body>
<div id="currentChartContainer"  style="width:50%; height:500px;">loading current chart...</div>
<script type="text/javascript" src="FusionCharts.js"></script><!-- (#1) -->
<!-- <script type="text/javascript" src="/common2/FusionWidgets/v3.1.1/FusionCharts.js"></script> (#2) -->
<!-- <script type="text/javascript" src="/common2/FusionCharts/v3.2.1/jquery.min.js"></script> -->
<script type="text/javascript">

   	var chart = new FusionCharts( "AngularGauge.swf", "currentChart", "100%", "70%", "0", "1" );
//  	chart.setChartDataUrl( "current-data.xml", "xml" );
   	chart.setDataXML( '<chart caption="Caption" subCaption="SubCaption" animation="0" lowerLimit="0" upperLimit="7" gaugeStartAngle="180" gaugeEndAngle="0" palette="3"><colorRange><color minValue="0" maxValue="3" code="FF654F" /><color minValue="3" maxValue="5" code="F6BD0F" /><color minValue="5" maxValue="7" code="8BBA00" /></colorRange><dials><dial value="2" /></dials></chart>' );
   	chart.render( "currentChartContainer" );

</script>
</body>
</html>

gauge.PNG

Share this post


Link to post
Share on other sites

Could you please once try the following code and let us know your feedback?

 

Yes, that was part of it. Now on to the fun stuff...

 

I need to use the setChartDataUrl (or equivalent) because I have dynamically generated server content. That, in and of itself, doesn't appear to be a problem. Unless my URL has parameters associated with it. Separated by ampersand (&). Now I have a problem.

 

I want to pass this to my server:

/quality/dashboards/top-failures/current-data.jsp?inctp=P&dashboard=true&dial=true&warning=3&error=5

 

If I use this Javascript

chart.setChartDataUrl( xmlUrl.replace( /\&/g, "&" ), "xml" );

 

I end up with 2 requests to the server with the following query strings:

[9/28/11 10:12:26:340 CDT] 00000152 SystemOut 	O inctp=P&dashboard=true&dial=true&warning=3&error=5
[9/28/11 10:12:26:555 CDT] 00000152 SystemOut 	O inctp=P&dashboard=true&dial=true&warning=3&error=5

 

When I don't replace '&' with '&' I end up with these requests:

[9/28/11 10:13:21:038 CDT] 00000153 SystemOut 	O inctp=P&dashboard=true&dial=true&warning=3&error=5
[9/28/11 10:13:21:265 CDT] 00000153 SystemOut 	O inctp=P

 

This is the only line I changed. I think this proves that this one Javascript line results in 2 data requests. Why? That's twice as many database queries that I need to run, and some of these may take a bit. I can worry about the database side of things, but I don't like it when I'm being asked for things that aren't needed.

 

Now let's switch to the FusionWidgets FusionCharts.js file and use setDataURL. The first thing I notice is that the unnecessary server request is eliminated. Good. The second thing I notice is that only the first parameter makes it to the server, regardless of if I've replaced '&' with '&' or not. Bad #1. But I can't use this .js file because I also have v3.2.1 FusionCharts SWFs on the page. Bad #2.

 

So once again I'm stuck and need some help going forward.

 

-Stevers

 

Later...

 

It's the "chart.render()" Javascript API call that results in the additional server request (the one that drops the additional parameters). I think I can avoid that, but I feel that mixing these two versions is a big pain.

Edited by Stevers

Share this post


Link to post
Share on other sites

I want to pass this to my server:

/quality/dashboards/top-failures/current-data.jsp?inctp=P&dashboard=true&dial=true&warning=3&error=5

 

If I use this Javascript

chart.setChartDataUrl( xmlUrl.replace( /\&/g, "&" ), "xml" );

 

 

Closer. It looks like I was using the wrong encoding. Using "%26" instead of "&" lets all the parameters through to my server. I probably should have known better.

 

Now if there was just a way to make the SWF send just one request instead of two.... Anyone have ideas here?

 

Later...

 

Hmm, now it's not sending 2 requests. It may have something to do with the SWFs in multiple tabs. I'll be watching for this to happen again and see if I can diagnose further.

 

-Stevers

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