Converting to javascript

[zugzwang]

Hello All,

We have a webpage that contains 6 fusion charts, it is a couple of years old.  We were told that it doesn't render on ipads or iphones. After reading documentation I learned a little about flash and javascript.  So I tried to convert our webpage but didn't have much success.  So I backed up, and tried to build "myFirstChart" as specified by a help file here: http://docs.fusioncharts.com/charts/contents/FirstChart/UsingPureJS.html#force

 

I successfully built the weekly-sales.html and the supporting files/directories, and the page worked on both flash and ipad. Yay!

 

So then, using weekly-sales as a templet, I built another (using a different chart column2d.swf -added to FusionCharts sub-directory), and placed it in the working file directory structure built for myFirstChart.  attached as ex1.html.  This worked in flash but not on the Ipad.

 

So then I tried to use an alias, as the documentation descibes (column2d, instead of column2d.swf), attached as ex2.html, but this failed on both flash AND Ipad.

 

Finally, I tried to explicitly force javascipt using the following line: FusionCharts.setCurrentRenderer('javascript');

attached as ex3.html.  This also failed on both flash and Ipad.

 

I am attaching the files I mentioned and the .xml file.  Please if anyone could point out my dumb mistake I would be very appreciative

 

Thanks,

Larry, from Hollins University.

ex1.html

ex2.html

ex3.html

ex.xml

weekly-sales.html

[Guest Rishab]

Hi,

In JavaScript charts strict validation is applied on the data so the chart will not render in case of the missing space between the attributes.

After updating the XML you provided, the chart is rendering fine in Flash as well as in JavaScript rendering mode.

Can you please refer the attached sample and let me know if your issue still persists?

Hope this helps.

Flash_JS (2).zip

[zugzwang]

Thank you for replying.

 

Do you mean to say that my code failed because of the lack of blank lines?  are the attributes  in the html or in the xml --sorry still a beginner...

 

Please explain where the attributes are and where the space(s) need to be -- thanks sincerely...

Larry.

Edited November 27, 2013 by zugzwang

[Guest Rishab]

Hi,

The spaces are missing  between the 'label' and the 'value' attributes in the XML file(ex.xml) you provided in the earlier post.

<set label="200709"value="183"/>

Hope this helps.

[zugzwang]

Thank you very much, I am off yesterday and today - but I will check this out and let you know first thing Monday morning! Thank you again!!

[zugzwang]

Hello again Rishab,

I have confirmed that changing the data (adding the space as you indicated) fixes the chart -- YAY!

However there are 3 different charts used a total of 8 times on the production web page.  Making the change fixed 2 of 8 (the ones that were Column2D)

The other six are chart types HLinearGauge and AngularGauge.  These two are part of FusionWidgets.  So I guess my next question is can Widgets be rendered in javascript?  If so, I will upload the xml files to this thread to see if you spot the problems with them...

 

Thanks!  (we are making progress )

[Haritha]

Hi,

 

Yes, charts in FusionWidgets XT too can be rendered in JavaScript mode, similar to the charts in FusionCharts XT.

[zugzwang]

Hello Haritha,

I am uploading 4 files one pair is for an angular gauge (testAG.html, testAG.xml) and the other pair is for an HLinear Gauge (testHLG.html and testHLG.xml).

 

Please note the error message is a bit different, it says: "Chart type not supported".  I have seen that message on the forum elsewhere. Please know that I have cleared my cache and the chart still doesn't render, and I am using version 3.3.1.  Thanks in advance for the help

 

Cheers,

Larry.

testHLG.xml

testHLG.html

testAG.xml

testAG.html

Edited December 3, 2013 by zugzwang

[Haritha]

Hi,

 

The HTML and XML files look fine. Please check if you have the following files present in your "FusionCharts" folder : FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Widgets.js and jquery.min.js 

 

You need to have all the above listed files for rendering a JavaScript variant of FusionWidgets XT.

 

Hope this helps.

[zugzwang]

Hiya Haritha,

Thanks again for helping.

 

I discovererd I was missing FusionCharts.HC.Widgets.js. I started by building the "firstChart" example weekly-sales.html per the documentaion, made sure it worked (it did), and then added test files similar to my production web page to test individual charts/gauges.  Since weekly-sales.html doesn't display a widget, the documentation rightly doesn't say to use the file.

 

After adding  FusionCharts.HC.Widgets.js, I was able to see my test charts displayed on an IPAD - Yay! However adding the file 'broke' the ability to see the charts in flash. Further, the example file weekly-sales.html was broken as well.  I thought I read in the documentation that fusion charts would determine the type of machine and render either flash or javascript as needed?  I need the ability to have my webpage seen by both methods.

 

BTW, there is no error message, instead the string from the html file prints: 'FusionCharts XT will load here!'.  A bit more assistance if you please, I feel we are very close to resolving this!

 

Thank you.

Best,

Larry.

[Guest Sumedh]

Hello Larry,

 

If you are trying to render a widget and a chart in the same page, then you would need to keep these files into your project folder.

 

> FusionCharts.js

> FusionCharts.HC.js

> FusionCharts.HC.Charts.js

> FusionCharts.HC.Widgets.js

> jquery.min.js.

 

Also, if you want to load Flash chart on the Desktop, then you would need to add chart specific SWF file into your project folder.

 

For e.g., If you are rendering Column chart and Angular Gauge in the same page, then you would need to add Column2D.swf file and AngularGauge.swf file into your project folder.

 

Please refer this link: http://docs.fusioncharts.com/charts/contents/FirstChart/maps_charts.html

 

Hope this helps!

[zugzwang]

Well as I said earlier, I created these test files in the "MyFirstChart" testing environment.   Weekly-sales.html using Column3D XT chart.  Per Haritha, I added the FusionCharts.HC.Widgets.js. file. All other files are present, and weekly-sales worked.  I will dig further into it and let you know - not much progress today.

[Guest Sumedh]

Hello,

 

Please find attached sample for your reference.

 

You can test this sample on desktop browser and also on iPad/iPhone.

 

 

Chart_Widget_Map_On_SamePage.zip

[zugzwang]

My frustration grows.

 

I am done with the examples I am not able to resolve them in a meaningful way that relates to my actual page. I want to give you my actual page, but i don't want to post it here.  How can we get this done?

[Guest Sumedh]

Hello Larry,

 

In the sample, you have created 4 div containers you are trying to render chart in ' #chartContainer3'.

 

But in the render function you have provided it as 'chartContainer03', this is why chart was not rendering.

 

Also, the FusionCharts.js path was not configured in the Head tag.

 

And it seems, you have modified the source files, we have tested the sample with the FusionCharts XT v3.3.1 Service Release 2 files and the chart is rendering fine.

 

Please find attached modified sample for your reference.

 

Hope this helps!

 

P.S. We have replaced all the files with trial version.

 

Forum_Sample_Test.zip

[Guest Sumedh]

Larry,

 

I have deleted your last post. Since the sample which you have sent contains the licensed files.

 

If you are using licensed version, please drop a mail at [email protected] for prioritized support.

[zugzwang]

Ok I will send email in a few minutes... Thanks.

[Guest Sumedh]

Hi Larry,

 

I have provided the modified sample in your ticket 218484