misalignment percentages the graphic

[Julian Andres Vela S.]

insert the graphic inside a popup window and percentages are misalignment. Help me

[Daniel LaLiberte]

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. <ingja...@gmail.com> wrote:

insert the graphic inside a popup window and percentages are misalignment. Help me

--
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-visualizati...@googlegroups.com.
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  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Julian Andres Vela S.]

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. <ingja...@gmail.com> wrote:

insert the graphic inside a popup window and percentages are misalignment. Help me

--
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...@googlegroups.com.

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  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

[Daniel LaLiberte]

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.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

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  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Julian Andres Vela S.]

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. <ingja...@gmail.com> 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. <ingja...@gmail.com> wrote:

insert the graphic inside a popup window and percentages are misalignment. Help me

--
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+unsubscr...@googlegroups.com.

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  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 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 google-visualization-api+unsub...@googlegroups.com.
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]

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: dlali...@google.com

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

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  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Julian Andres Vela S.]

 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>

--
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 google-visualizati...@googlegroups.com.

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.

--

---------

      Ingeniero de Sistemas 

      julia...@hotmail.com

      Cel: 300 428 7323

[Daniel LaLiberte]

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 }); });

[Julian Andres Vela S.]

Hola Daniel, no me muestra el gráfico, añada las líneas que sugeriste

​

[Daniel LaLiberte]

Julian,

If you do not see any chart, then perhaps there is a javascript error.  Check your javascript console.

I only suggested how you could change your dialogo2, but if that is not the correct dialog to change, do the same thing for the correct dialog.

Also, I am not sure your version of jQuery works with this 'open' property.  You'll have to investigate how to do the equivalent kind of thing.

[Julian Andres Vela S.]

Daniel many thank you very much for your help !!!