Rajavelu

Javascript chart with JQueryPlugin

Recommended Posts

Hi!

    We are using fusion charts with flash rendering still now, but now changed to javascript rendering using jquery plugin.

    Now we meet lot of issues on chart.

    some of them:

    1) slantLabels is not working for line charts, but works on AreaChart(refer attached image - fc1.png),

    2) Chart data displays outside of chart(refer attached image - fc.png),

    3) debugMode is not working properly. Even i refer http://forum.fusionc...ing/#entry55433 and try as,

       <script>

             FusionCharts.debugMode.enabled(true);
             FusionCharts.debugMode.outputTo( function() { console.log(arguments); } );
             $("#chart").insertFusionCharts({ dataSource: 'test.xml',height : "350",width : "410",renderer  : "JavaScript",quality :    "high",swfUrl:"ZoomLine.swf",dataFormat: "xmlurl", debugMode: "1" });

       </script>

    4) For JS rendering charts we needn't swf files, but why we have to give swfUrl as "ZoomLine.swf"

    5) When show Diff type of charts in a page , we meet some errors(example:Uncaught TypeError: Cannot read property 'parent' of undefined,Invalid value for <rect> attribute x="NaN"),

           Even i follow as our docs, (Please give also minimum version for each type of charts)
        

  From individual packs of the products, copy all the necessary javascript files and keep them in a single folder (say "JS"). The necessary JavaScript files are:

  • FusionCharts.js (from FusionMaps XT pack or from the latest pack you have)
  • FusionCharts.HC.js (from FusionMaps XT pack or from the latest pack you have)
  • FusionCharts.HC.Maps.js (from FusionMaps XT pack)
  • FusionCharts.HC.world.js (from FusionMaps XT pack)
  • FusionCharts.HC.Charts.js (from FusionCharts XT pack)
  • FusionCharts.HC.PowerCharts.js (from PowerCharts XT pack)
  • FusionCharts.HC.Widgets.js (from FusionWidgets XT pack)
  • jquery.min.js (from any of the packs)

 

......

post-38320-0-49213100-1372403466_thumb.png

post-38320-0-19606400-1372403515_thumb.png

Share this post


Link to post
Share on other sites

6) Chart values are overlapping one on another (see attached image - fc2.png).

7) I used document.getElementById(id).getValue() instead of value;, but when include jquerymin.js for our charts, meet the error,  (Uncaught TypeError: Cannot call method 'toLowerCase' of undefined)but i think this may come due to prototype.js

...

post-38320-0-28579700-1372411134_thumb.png

Share this post


Link to post
Share on other sites

For point 4, "For JS rendering charts we needn't swf files, but why we have to give swfUrl as ZoomLine.swf" - it is not needed. You may drop .swf or use "type" parameter as specified as advanced construction method in docs.

Share this post


Link to post
Share on other sites
Hi,

 

Apologies for delay.

 

Please find the answers to your queries below:

 

1) slantLabels is not working for line charts, but works on AreaChart(refer attached image - fc1.png),

Ans: We are looking into your query and will get back to you soon.

   

2) Chart data displays outside of chart(refer attached image - fc.png),

Ans: We are looking into your query and will get back to you soon.

 

3) debugMode is not working properly. Even i refer http://forum.fusionc...ing/#entry55433 and try as,

       <script>

             FusionCharts.debugMode.enabled(true);

             FusionCharts.debugMode.outputTo( function() { console.log(arguments); } );

             $("#chart").insertFusionCharts({ dataSource: 'test.xml',height : "350",width : "410",renderer  : "JavaScript",quality :    "high",swfUrl:"ZoomLine.swf",dataFormat: "xmlurl", debugMode: "1" });

       </script>

Ans: Can you please refer the link http://docs.fusioncharts.com/charts/contents/Debug/JS.html and check if you are looking for debug information in the right place? Also, can you please let us know the browser you are using to see the debug information?

 

4) For JS rendering charts we needn't swf files, but why we have to give swfUrl as "ZoomLine.swf"

Ans: As already said by Shamasis, you may use "ZoomLine" in the swfUrl instead of "ZoomLine.swf". Alternatively, you may use the attribute "type" instead of "swfUrl" and provide the chart alias like "ZoomLine".


 

5) When show Diff type of charts in a page , we meet some errors(example:Uncaught TypeError: Cannot read property 'parent' of undefined,Invalid value for <rect> attribute x="NaN"),Even i follow as our docs, (Please give also minimum version for each type of charts)

Ans: Can please try refering the sample sent to you in the post http://forum.fusioncharts.com/topic/14769-jqueryplugin-issue/#entry55421 and modify your code accordingly? If this does not resolve your problem, please send us a sample replicating the problem so that we can test it here.

 

6) Chart values are overlapping one on another (see attached image - fc2.png).

Ans: We are fixing the issue and let you know about its developments soon.

 

7) I used document.getElementById(id).getValue() instead of value;, but when include jquerymin.js for our charts, meet the error,  (Uncaught TypeError: Cannot call method 'toLowerCase' of undefined)but i think this may come due to prototype.js

Ans: Can you please send us a sample replicating the problem so that we can test it here ?

Share this post


Link to post
Share on other sites

@guru:Thank you so much for your reply.

 

8) yAxisMaxValue property is not working fine.(refer image fc3.png).

Also I need minimum versions for each type of charts in a single page

post-38320-0-44547400-1372740533_thumb.png

Share this post


Link to post
Share on other sites

Hi,


 


Could you please try providing the "yAxisMinValue" as equal or lesser than the smallest value in the XML and "yAxismaxValue" as equal or greater than the largest value mentioned in the XML to get the closest range of values along the Y-axis?


 


The chart would adjust its axis and divisional lines based on the values provided using decimals if the interval is not qually divisible. In case you want whole numbers, equally divided without any decimal values, you would need to perform the calculation manually before setting the Y-axis minimum and maximum values.


 


Could you please elaborate more on your requirement "Also I need minimum versions for each type of charts in a single page" ? If possible, please send us a screenshot of your requirement so that we can help you better.


 


Awaiting your response.

Share this post


Link to post
Share on other sites

Hi!

    In my page I need to show Maps, charts, widgets, etc. So I need to use all Js classess(namely FusionChart.js,FusionChart.HC.js,FusionMaps.js, etc ) from various folders(Maps, Charts, Widgets) . My question is what is the minimum versions for each(maps, charts, widgets) for take js classes?. Is 3.2.1 support javascript charts rendering, using jquery plugin for all types(maps,charts,widgets)?

Share this post


Link to post
Share on other sites

Hi,

 

jQuery plugin support for JavaScript rendering of charts has been started since FusionCharts v3.2.2. 

 

The version of FusionCharts v3.2.1 that you are using does not support the use of jQuery plugin to render charts. You may please upgrade to the latest version of FusionCharts v3.3.1 SR2 since each version of FusionCharts comes with some bug fixes and enhancements.

 

You may download the evaluation copy of the latest version from http://www.fusioncharts.com/download/trials/

 

Hope this helps.

Share this post


Link to post
Share on other sites

@ guru: Thank you once again,

   Also Please give minimum versions for each types(maps, wigdets, charts, powercharts) for javascript rendering(not jquery plugin, using HTML embedding) support without bugs.

 

Is it possible to see old versions document(Eg: 3.1 , 3.2)?

Edited by Rajavelu

Share this post


Link to post
Share on other sites

Hi !

     As stated before, we are using flash charts till now(using version 3.2.2) as HTML embedding, now we want to change as javascript rendering without change fusioncharts version. I have seen in doc HTML embed method does not support JavaScript (HTML5) chart fallback mechanism. So if i need to render JS charts, the only way is jquery plugin? (but i can't change my version, Is jqueryplugin working fine in 3.2.2?). What can I do ?

Share this post


Link to post
Share on other sites

Hi,

 

Yes, HTML embed method does not support JavaScript chart fallback mechanism. But using jQuery plugin is not the only way to render JavaScript charts. You can use JavaScript code to render JavaScript charts. For information on creating JavaScript charts, please refer http://docs.fusioncharts.com/charts/contents/FirstChart/UsingPureJS.html

 

Hope this helps.

Share this post


Link to post
Share on other sites

Hi,

FusionCharts Suite v3.6.0 is released recently.

 

Please try upgrading to the latest version, that will resolve your reported issues.

Also, we have released updated plugins, wrappers and export handlers which can be checked from here: http://www.fusioncha...com/extensions/

To download the Evaluation version of FusionCharts Suite XT v3.6.0, please visit the link: http://www.fusioncharts.com/download/

I hope this helps. Looking forward to your valuable feedback.

 

Thanks.

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