tutoki Report post Posted January 28, 2014 Hi I need to improve some dynamism producing charts, for example using a select multiple tag and passing the variables to Javascript/Jquery functions ( I don´t use php), All the data files (XMLs) are created. I have advanced but when i mark two o more option in the select multiple tag it doesn´t work.Obviously there are more ways to do this...You can try an example here :http://www.guarderia-nuevavida.org/escuelait/select/selectrev1.htmlThe main blocks are : I have all the xml files with gpe.txt I create a dynamic select with javascript/jquery and another function to generte the chart One of the problem that i have found y that the object "ChartId_1" can´t be the samevar myChart = new FusionCharts("fusion/MSLine.swf", "ChartId_1 ", "365", "400", "0", "1")Any help will be appreciate The code: <!DOCTYPE HTML> <html lang="es"> <head> <meta charset="UTF-8"> <title>Selecto Multiple</title> <script type="text/javascript" src="fusion/FusionCharts.js"></script> <style type="text/css"> </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var url = "gpe.txt"; var arreglo = $.get(url, function(data) { vista = data.split(" "); console.log(vista); //$selector = "<form action='' method='get' > "; $selector = "<select multiple id=graf>"; for (var i = 0; i < vista.length; i++) { $selector += "<option name="+'valor'+i+" value="+vista[i]+">"+vista[i] +"</option>"; console.log(vista[i]); }; $selector += "</select>"; $selector += "<br>"; $selector += '<input type="button" value="Submit" onclick="graficos();">'; //$selector += "</form>"; $("#resultado").html($selector); }); }); function graficos() { $(function() { $("#graf").change(function() { var texto = "Manage Charts: "; $("#graf option:selected").each(function() { texto += '<br>'; var atributo = $(this).text(); texto += "<span id="+atributo+">FusionCharts will load here!</span>" ; //no va texto += '<script type="text/javascript" >'; texto += 'var myChart = new FusionCharts("fusion/MSLine.swf", "ChartId_1 ", "365", "400", "0", "1");'; texto += "myChart.setXMLUrl('data/vm/"+$(this).text();+".xml');"; texto += "');myChart.render('"+$(this).text();+"')"; texto += "')"; //texto += $(this).text(); }); $("#grafico").html(texto); }) .trigger('change'); }); } </script> </head> <body> <h1>seleciona</h1> <div id="resultado"></div> <div id="grafico">aqui</div> </body> </html> Share this post Link to post Share on other sites
Guest Sashibhusan Report post Posted January 29, 2014 Hi, It seems in your code, on each time creating the FusionCharts object instance, it takes the same ID "ChartId_1", which generates the error that you have reported. Because, the previous FusionCharts object instance with same ID is not disposed. So, could you please try creating the FusionCharts object instance, only after disposing the object with same ID. Ref. JavaScript code snippet: texto += 'if ( FusionCharts("ChartId_1") && FusionCharts("ChartId_1").dispose ) FusionCharts("ChartId_1").dispose();'; texto += 'var myChart = new FusionCharts("fusion/MSLine.swf", "ChartId_1 ", "365", "400", "0", "1");'; Hope this helps! Share this post Link to post Share on other sites
