Combine Fusioncharts And Fusionwidgets In A Single Page On Html5

[Bluo]

I have two types of chart which are FusionCharts and FusionWidgets in a single page. They work normally on the browser with Flash Player. But if the browser doesn't have the Flash Player, just like an iPad, I assume that they should be rendered with the HTML5 ability from the XT version also. Anyway, it doesn't, I find that only the first chart is shown while the second chart isn't. It shows the message "Loading Chart. Please Wait". Can you give me an idea how to fix it? Now I'm using the XT version. Thanks.

 

 

<script LANGUAGE="Javascript" SRC="FusionWidgets/Charts/FusionCharts.js"></SCRIPT>

<%

str = "<chart lowerLimit='0' upperLimit='50' lowerLimitDisplay='Critical Risk' upperLimitDisplay='Excellent' gaugeStartAngle='180' gaugeEndAngle='0' palette='1' numberSuffix='%25' tickValueDistance='20' showValue='1'><trendpoints><point dashed='1' dashLen='3' dashGap='3' useMarker='1' markerColor='F1f1f1' markerBorderColor='666666' markerRadius='7' startValue='13.25' displayValue='Previous Month GM' color='666666' thickness='2' alpha='100' /></trendpoints><colorRange><color minValue='0' maxValue='7' code='F82319' label='test'/><color minValue='7' maxValue='13' code='E67671'/><color minValue='13' maxValue='18' code='FFCC33'/><color minValue='18' maxValue='23' code='09F630'/><color minValue='23' maxValue='50' code='0066FF'/></colorRange><dials><dial value='14.25' rearExtension='10'/></dials></chart>"

 

Call renderChart("FusionWidgets/Charts/AngularGauge.swf ", "123", str, "guage", 510, 220, false, false)

%>

 

<script LANGUAGE="Javascript" SRC="FusionCharts/Charts/FusionCharts.js"></SCRIPT>

<%

 

str2 = "<chart caption='PPI vs. GM' animation='1' bgColor='E0E0E0' showBorder='1' showValues ='0' canvasPadding='10' decimals='2'><categories><category label = '4/2008' showLabel ='0'/><category label = '5/2008' showLabel ='0'/><category label = '6/2008' showLabel ='0'/><category label = '7/2008' showLabel ='0'/><category label = '8/2008' showLabel ='0'/><category label = '9/2008' showLabel ='0'/><category label = '10/2008' showLabel ='0'/><category label = '11/2008' showLabel ='0'/><category label = '12/2008' showLabel ='0'/><category label = '1/2009' showLabel ='0'/><category label = '2/2009' showLabel ='0'/><category label = '3/2009' showLabel ='0'/><category label = '4/2009' showLabel ='0'/><category label = '5/2009' showLabel ='0'/><category label = '6/2009' showLabel ='0'/><category label = '7/2009' showLabel ='0'/><category label = '8/2009' showLabel ='0'/><category label = '9/2009' showLabel ='0'/></categories><dataset seriesName='GM'><set value = '14.2' /><set value = '16.9274906274062' /><set value = '14.5719038754408' /><set value = '14.6013302457835' /><set value = '14.5598656559888' /><set value = '13.63332627236' /><set value = '13.2384984709246' /><set value = '13.159148200272' /><set value = '11.5534147986739' /><set value = '14.0234208528301' /><set value = '3.3983861736928' /><set value = '-7.31089480130785' /><set value = '3.55916090813669' /><set value = '3.04019814777285' /><set value = '17.8553954255524' /><set value = '20.6032786007964' /><set value = '18.5144830262162' /><set value = '16.3581920840632' /><set value = '15.1172215237914' /><set value = '15.140448432782' /><set value = '13.0943176905129' /><set value = '12.6664691909924' /><set value = '13.631477078707' /><set value = '14.1661667462652' /></dataset><dataset seriesName='PPI'><set value = '26.4040755409273' /><set value = '35.3070790468489' /><set value = '76.1162942854188' /><set value = '52.3784834246375' /><set value = '51.9914883498117' /><set value = '47.5019333127531' /><set value = '47.712165131952' /><set value = '51.041783274974' /><set value = '48.3862807118157' /><set value = '45.8268362147176' /><set value = '38.1496189721467' /><set value = '19.4053946274981' /><set value = '30.7428566900598' /><set value = '30.3011845655452' /><set value = '57.3649395872955' /><set value = '59.9760058070382' /><set value = '57.0490961142645' /><set value = '56.4104865265066' /></dataset></chart>"

 

Call renderChart("FusionCharts/Charts/MSLine.swf", "1", str2, "MSLine", 450, 220, false, false)

%>

[Sanjukta]

Hi,

 

Please try using the JS files from the latest version of the FusionCharts XT Service Release 3 pack?

 

Also, could you please confirm if you have included FusionCharts.HC.Widgets.js and FusionCharts.HC.Charts.js files along with FusionCharts.js, FusionCharts.HC.js & jquery.min.js to render the JavaScript charts and gauges?

 

Hope this helps.

[Bluo]

Thank you Sanjukta.

 

 

I have used the FusionCharts.js version 3.2.3-sr3.5347, I think it should be the Service Release 3. And also included all other javascripts file in the same folder of FusionCharts.js. My problem is that if I try to include the JS file in this way,

 

 

<script LANGUAGE="Javascript" SRC="FusionCharts/Charts/FusionCharts.js"></SCRIPT>

<script LANGUAGE="Javascript" SRC="FusionWidgets/Charts/FusionCharts.js"></SCRIPT>

 

 

the MSLine chart will be rendered while the Gauge Chart not.

 

 

And if I swap these lines of code to this

 

 

<script LANGUAGE="Javascript" SRC="FusionWidgets/Charts/FusionCharts.js"></SCRIPT>

<script LANGUAGE="Javascript" SRC="FusionCharts/Charts/FusionCharts.js"></SCRIPT>

 

 

only the Gauge Chart will be rendered.

 

 

PS. This is when I test with the device that doesn't have flash player. If the device containing flash player, both charts will be rendered normally.

 

 

Thanks

[Swarnam]

Hey,

 

Could you please try including FusionCharts.js version 3.2.3-sr3.5347 once rather than loading twice?

 

Ref.Code:

<script LANGUAGE="Javascript" SRC="FusionCharts/Charts/FusionCharts.js"></SCRIPT>

 

Also, please ensure you have included FusionCharts.HC.Widgets.js and FusionCharts.HC.Charts.js ,FusionCharts.HC.js & jquery.min.js to render the JavaScript charts and gauges are present in the same folder as FusionCharts.js?

 

Please find the attached screenshot.

[Bluo]

Oh.....It works now. Thank you everybody for your help.

[Swarnam]

[vishal_a]

Hello everyone,

I too had similar problem.

 

I just included <script LANGUAGE="Javascript" SRC="FusionCharts/Charts/FusionCharts.js"></SCRIPT>

 

But i didn't include the other files. I just copied the file FusionChart.HC.Widget.js from FusionWidgetCharts/charts/ and required SWF files and pasted in the FusionChart/charts/

Thats it.... and it worked

 

 

Thanks.

[Guest Sumedh]

Hi,

 

This is a correct method. You have added only required files.

 

But for all conditions/scenarios we recommend to add all the necessary library files in the project folder.