Actually, I see your source if I download the html. But thanks for including the HTML in the post.
Since you are using jQuery dialogs, look at this page for ideas: http://stackoverflow.com/questions/12337271/run-a-function-after-loading-jquery-dialog What you need to do is: - Do not call google.setOnLoadCallback(drawChart) since it would otherwise try to draw the chart then. - Add an 'open' property to your dialogs that references drawChart. like this: $("#b2").click(function() { $("#dialogo2").dialog({ width: 590, height: 350, show: "scale", hide: "scale", resizable: "false", position: "center", open: drawChart }); }); On Tue, Jan 13, 2015 at 12:14 PM, Julian Andres Vela S. < [email protected]> wrote: > you I will copy here, watch it, thank Daniel > > > > <!DOCTYPE html> > <html lang="es"> > <head> > <title>Ejemplo Dialogos Emergentes</title> > <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> > <link rel="stylesheet" href="jquery-ui.css" /> > <script src=" > http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js > "></script> > <script src=" > http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js > "></script> > <script type="text/javascript" src="https://www.google.com/jsapi > "></script> > <script type="text/javascript"> > > // Load the Visualization API and the piechart package. > google.load('visualization', '1.0', {'packages':['corechart']}); > > // Set a callback to run when the Google Visualization API is loaded. > google.setOnLoadCallback(drawChart); > > // Callback that creates and populates a data table, > // instantiates the pie chart, passes in the data and > // draws it. > function drawChart() { > > // Create the data table. > var data = new google.visualization.DataTable(); > data.addColumn('string', 'Topping'); > data.addColumn('number', 'Slices'); > data.addRows([ > ['Estudia', 5], > ['Trabaja', 3], > ['Servicio Militar', 2], > ['Ninguna', 2], > ]); > > // Set chart options > var options = {'title':'Actividad actual', > 'width':400, > 'height':300}; > > // Instantiate and draw our chart, passing in some options. > var chart = new > google.visualization.PieChart(document.getElementById('chart_div')); > chart.draw(data, options); > } > </script> > > </head> > > <style type="text/css"> > > html { > background: url(paisajes-playas-palmeras.jpg) no-repeat center > center fixed; > -webkit-background-size: cover; > -moz-background-size: cover; > -o-background-size: cover; > background-size: cover; > } > > body { > font-family:Tahoma, Geneva, sans-serif; > } > > .contenido { > width:460px; > margin:0 auto; > } > > .boton { > float:left; > margin-right:10px; > margin-top:200px; > width:130px; > height:40px; > background:#222; > color:#fff; > padding:16px 6px 0 6px; > cursor:pointer; > text-align:center; > } > > .boton:hover{color:#01DF01} > > .ventana{ > > display:none; <!-- -------------------------> es importante ocultar > las ventanas previamente --> > font-family:Arial, Helvetica, sans-serif; > color:#808080; > line-height:28px; > font-size:15px; > text-align:justify; > > > } > > > > </style> > > <body> > <div class="contenido"> > <div id="b1" class="boton">Dialogo modal</div> > <div id="b2" class="boton">Dialogo no modal</div> > <div id="b3" class="boton">Otra animación</div> > > <div id="dialogo" class="ventana" title="Dialogo Modal"> > <div id="chart_div"></div> > </div> > </div> > <script type="text/javascript"> > $(document).ready(function(){ <!-- --------> ejecuta el script jquery > cuando el documento ha terminado de cargarse --> > $("#b1").click(function() { <!-- ------> al pulsar (.click) el boton 1 > (#b1) --> > $("#dialogo").dialog({ <!-- ------> muestra la ventana --> > width: 590, <!-- -------------> ancho de la ventana --> > height: 350,<!-- -------------> altura de la ventana --> > show: "scale", <!-- -----------> animación de la ventana al aparecer --> > hide: "scale", <!-- -----------> animación al cerrar la ventana --> > resizable: "false", <!-- ------> fija o redimensionable si ponemos este > valor a "true" --> > position: "center",<!-- ------> posicion de la ventana en la pantalla > (left, top, right...) --> > modal: "true" <!-- ------------> si esta en true bloquea el contenido de > la web mientras la ventana esta activa (muy elegante) --> > }); > }); > $("#b2").click(function() { > $("#dialogo2").dialog({ > width: 590, > height: 350, > show: "scale", > hide: "scale", > resizable: "false", > position: "center" > }); > }); > $("#b3").click(function() { > $("#dialogo3").dialog({ > width: 590, > height: 350, > show: "blind", > hide: "shake", > resizable: "false", > position: "center" > }); > }); > }); > </script> > > > </body> > > > </html> > > 2015-01-13 12:10 GMT-05:00 'Daniel LaLiberte' via Google Visualization API > <[email protected]>: > >> Julian, >> >> I don't think you posted what you wanted to post. I don't see a button, >> but only a chart_div. The html you attached also doesn't help, since I >> only see this: >> >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> >> <html> >> <head><META http-equiv="Content-Type" content="text/html; >> charset=utf-8"></head> >> <body> >> <div> >> <div> >> <div>Dialogo modal</div> >> <div>Dialogo no modal</div> >> <div>Otra animación</div> >> <div title="Dialogo Modal"> <div></div> </div> >> </div> </div> >> </body> >> </html> >> >> Perhaps you should email to me directly: [email protected] >> >> On Tue, Jan 13, 2015 at 12:04 PM, Julian Andres Vela S. < >> [email protected]> wrote: >> >>> hello again thanks Daniel, I'll let my little code, I'm calling the >>> script from a button like this: >>> >>> <div id = "chart_div"> </ div> >>> >>> not how to make then run me open the popup >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> El martes, 13 de enero de 2015, 11:48:13 (UTC-5), Daniel LaLiberte >>> escribió: >>>> >>>> How you proceed depends on how your popup code works. You might have a >>>> way of calling a javascript function when the popup has been created, which >>>> you could use to then call the chart.draw() method. If not, then perhaps >>>> you need to first draw the chart in some element that you create, and give >>>> that element to the popup code. >>>> >>>> I hope that helps give you some ideas. If you need more help, it would >>>> be better if you could give more details about your popup code. Better >>>> would be if you could point to a page that shows the problem you are >>>> experiencing. >>>> >>>> On Tue, Jan 13, 2015 at 11:36 AM, Julian Andres Vela S. < >>>> [email protected]> wrote: >>>> >>>>> >>>>> Hi Daniel >>>>> >>>>> >>>>> thanks for your help, is right the problem is with the PieChart, how >>>>> could run the script when opening PieChart my popup? >>>>> >>>>> >>>>> >>>>> El martes, 13 de enero de 2015, 11:11:50 (UTC-5), Daniel LaLiberte >>>>> escribió: >>>>>> >>>>>> Hi Julian, >>>>>> >>>>>> This problem with PieChart showing its labels in the wrong place is >>>>>> typically caused by drawing the chart when the container is not visible, >>>>>> since the Chart drawing process needs to measure text when it is actually >>>>>> displayed. One solution is to draw it off-screen. Another is to defer >>>>>> the >>>>>> drawing until you first make the container visible. >>>>>> >>>>>> If this is not the case for you, please post more details and we can >>>>>> try to help. >>>>>> >>>>>> On Tue, Jan 13, 2015 at 10:53 AM, Julian Andres Vela S. < >>>>>> [email protected]> wrote: >>>>>> >>>>>>> insert the graphic inside a popup window and percentages are >>>>>>> misalignment. Help me >>>>>>> >>>>>>> >>>>>>> <https://lh4.googleusercontent.com/-Hdb84k1spAU/VLU_RH_GN2I/AAAAAAAABV0/PUjuSBLSxc4/s1600/Capturagcharts.PNG> >>>>>>> >>>>>>> -- >>>>>>> You received this message because you are subscribed to the Google >>>>>>> Groups "Google Visualization API" group. >>>>>>> To unsubscribe from this group and stop receiving emails from it, >>>>>>> send an email to google-visualization-api+unsub >>>>>>> [email protected]. >>>>>>> To post to this group, send email to google-visua...@googlegroups. >>>>>>> com. >>>>>>> Visit this group at http://groups.google.com/group >>>>>>> /google-visualization-api. >>>>>>> For more options, visit https://groups.google.com/d/optout. >>>>>>> >>>>>> >>>>>> >>>>>> >>>>>> -- >>>>>> Daniel LaLiberte >>>>>> <https://plus.google.com/100631381223468223275?prsrc=2> - >>>>>> 978-394-1058 >>>>>> [email protected] 5CC, Cambridge MA >>>>>> [email protected] 9 Juniper Ridge Road, Acton MA >>>>>> >>>>> -- >>>>> You received this message because you are subscribed to the Google >>>>> Groups "Google Visualization API" group. >>>>> To unsubscribe from this group and stop receiving emails from it, send >>>>> an email to [email protected]. >>>>> To post to this group, send email to [email protected]. >>>>> Visit this group at http://groups.google.com/ >>>>> group/google-visualization-api. >>>>> For more options, visit https://groups.google.com/d/optout. >>>>> >>>> >>>> >>>> >>>> -- >>>> Daniel LaLiberte >>>> <https://plus.google.com/100631381223468223275?prsrc=2> - 978-394-1058 >>>> [email protected] 5CC, Cambridge MA >>>> [email protected] 9 Juniper Ridge Road, Acton MA >>>> >>> -- >>> You received this message because you are subscribed to the Google >>> Groups "Google Visualization API" group. >>> To unsubscribe from this group and stop receiving emails from it, send >>> an email to [email protected]. >>> To post to this group, send email to >>> [email protected]. >>> Visit this group at >>> http://groups.google.com/group/google-visualization-api. >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> >> >> -- >> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> >> - 978-394-1058 >> [email protected] <[email protected]> 5CC, Cambridge MA >> [email protected] <[email protected]> 9 Juniper Ridge >> Road, Acton MA >> >> -- >> You received this message because you are subscribed to a topic in the >> Google Groups "Google Visualization API" group. >> To unsubscribe from this topic, visit >> https://groups.google.com/d/topic/google-visualization-api/CK1lS637dPA/unsubscribe >> . >> To unsubscribe from this group and all its topics, send an email to >> [email protected]. >> To post to this group, send email to >> [email protected]. >> Visit this group at >> http://groups.google.com/group/google-visualization-api. >> For more options, visit https://groups.google.com/d/optout. >> > > > > -- > --------- > <http://www.mylivesignature.com/> > Ingeniero de Sistemas > [email protected] > Cel: 300 428 7323 > > -- > You received this message because you are subscribed to the Google Groups > "Google Visualization API" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To post to this group, send email to > [email protected]. > Visit this group at > http://groups.google.com/group/google-visualization-api. > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> - 978-394-1058 [email protected] <[email protected]> 5CC, Cambridge MA [email protected] <[email protected]> 9 Juniper Ridge Road, Acton MA -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
