Sign in to follow this  
Bluo

Combine Fusioncharts And Fusionwidgets In A Single Page On Html5

Recommended Posts

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)

%>

Share this post


Link to post
Share on other sites

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. :)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Capture.PNG

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

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
Sign in to follow this