Sign in to follow this  
tutoki

Dynamic Chart

Recommended Posts

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.html

The 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 same
var 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

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

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