JQueryPlugin Issue:

[Rajavelu]

Hi

    We have different jQueryPlugin for map & charts(jQueryPlugin.js & jqueryplugin.js resp), I need to show all type of fusion charts(maps, powerchart,widgets, linecharts) in a page using jqueryplugin, Please give an example zip file .

[Swarnam]

Hey,

 

Please find the sample attached to showcase multiple charts/widgets/maps within a single page using jQuery plugin.

 

The JavaScript file present within FusionMaps and FusionCharts are the same.

 

Hope this helps.

Fusion_charts_jQuery_plugin.zip

[Rajavelu]

Thanks for your reply.

           But still I have meet an issue by using Fusioncharts with ajax:

           I have generate the following code(bold) in java, and this code will set as innerhtml for a div / td / ... tags, by using ajax, but the chart is not rendering.

 

           My sample code:

     <script>

           function test(){

               var details="<span id='chart'></span><script>$('#chart').insertFusionCharts({ dataSource: 'test.xml',height : '100%',width : '90%',renderer  : 'JavaScript',quality : 'high',swfUrl:'/FusionCharts/ZoomLine.swf',dataFormat: 'xmlurl', debugMode: '1' }); </script>";

               document.getElementById("chart_td").innerHtml=details;

           }

    <script>

    <table><tr><td id="chart_id"></td></tr></table>

Edited June 24, 2013 by Rajavelu

[Haritha]

Hi,

 

The HTML specification specifies that script tags inserted using innerHTML should not be executed. For information on this, please refer http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0

 

You may use "appendChild" method to insert elements inside the desired node, thus, modifying the DOM structure.

 

We have modified your code accordingly. Can you please confirm if the below given code works at your end?

 <script>
           function test(){
        	   
        	   var spanElement = document.createElement('span');
        	   spanElement.setAttribute('id', 'chart');
        	   document.getElementById("chart_td").appendChild(spanElement);
        	   
        	   var scripts="$('#chart').insertFusionCharts({ dataSource: 'test.xml',height : '100%',width : '90%',renderer  : 'JavaScript',quality : 'high',swfUrl:'/FusionCharts/ZoomLine.swf',dataFormat: 'xmlurl', debugMode: '1' });";
        	   var scriptElement = document.createElement('script');
                   scriptElement.setAttribute('type', 'text/javascript');
                   scriptElement.innerText = scripts;
                   document.getElementById("chart_td").appendChild(scriptElement);
           }
 </script>
 
 <table><tr><td id="chart_td" width="500" height='500'></td></tr></table>

Hope this helps. 

[Rajavelu]

@Guru: Thanks

How to enable debugMode through jqueryplugin for a javascript chart. i found in docs debugMode='1', but not working.

Also i tried as

 

<script>

FusionCharts.debugMode.enabled(true);

$('#chart').insertFusionCharts({

dataSource: 'test.xml',height : '100%',width : '90%',renderer  : 'JavaScript',quality : 'high',swfUrl:'/FusionCharts/ZoomLine.swf',dataFormat: 'xmlurl', debugMode: '1'

});

</script>

 

but not working

[Haritha]

Hi,

 

Please refer the post http://forum.fusioncharts.com/topic/14770-debugmode-in-jqueryplugin-is-not-working/#entry55433

 

Hope this helps