Stevers Report post Posted September 26, 2011 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
Swarnam Report post Posted September 27, 2011 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> Share this post Link to post Share on other sites
Stevers Report post Posted September 28, 2011 (edited) 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 September 28, 2011 by Stevers Share this post Link to post Share on other sites
Stevers Report post Posted September 28, 2011 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
