Sign in to follow this  
zugzwang

Converting to javascript

Recommended Posts

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

Share this post


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

Share this post


Link to post
Share on other sites

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 by zugzwang

Share this post


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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by zugzwang

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


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

Share this post


Link to post
Share on other sites
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].com for prioritized support.

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