« anterior próximo »
Páginas: [1]   Ir Abajo

Autor Tema: Ayuda Para enviar correo web Utilizando google chart  (Leído 6336 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado SiKa

  • -^- Elite Silver -^-
  • The Communiter-
  • *
  • Mensajes: 2548
  • .
Ayuda Para enviar correo web Utilizando google chart
« : junio 01, 2012, 07:08:12 pm »
Hola amigos, necesito de su ayuda.

SITUACION:

Tengo un codigo HTML (que bien puede probarse de que funciona con algun probador de codigo html) el cual utiliza javascripts para generar un grafico haciendo uso de la API de Google.

Hasta alli todo bien.   

PROBLEMA:
Necesito enviar ese codigo html en correos de usuario.. es decir que el la parte del asunto del correo yo inyecto dicho codigo html y me debe parecer todo su contenido de forma normal.. El problema es que al agregarle graficas utilizando la api de google no funciona. no se mira nada.. y no entiendo porque..

¿alguna sugerencia?

mi codigo utilizado es este.  Como podran ver  esta perfecto y en el browser si se mira todo bonito.. pero en el correo no se visualiza la grafica.. ¿porque sera?

Código: [Seleccionar]
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          ['Month', 'CIE/COL', 'ALM/COL', 'PROV/CAP', 'ACC/ALM', 'ALM/CAP', 'Average'],
          ['Enero',  165,      938,         522,             998,           450,      614.6],
          ['Febrero',  135,      1120,        599,             1268,          288,      682],
          ['Marzo',  157,      1167,        587,             807,           397,      623],
          ['Abril',  139,      1110,        615,             968,           215,      609.4],
          ['Mayo',  136,      691,         629,             1026,          366,      569.6],
          ['Junio',  136,      691,         629,             1026,          366,      569.6]
        ]);

        var options = {
          title : 'Tiempos de Cierres diarios año 2012',
          vAxis: {title: "Minutos"},
          hAxis: {title: "Meses"},
          seriesType: "bars",
          legendTextStyle: {color:'#666666'},
          titleTextStyle: {color: '#5c5c5c'},
          colors: ['#c7cfc7', '#b2c8b2', '#d9e0de', '#cdded1'],
          series: {5: {type: "line"}}
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>



En línea

Desconectado SiKa

  • -^- Elite Silver -^-
  • The Communiter-
  • *
  • Mensajes: 2548
  • .
Re:Ayuda Para enviar correo web Utilizando google chart
« Respuesta #1 : junio 01, 2012, 09:13:22 pm »
Hola, aunque nadie me ha comentado nada... comentarles que lo que alcanzo a entender es que por regla general.. javascripts esta desactivado para correr en correos.. es decir como HTML MAILS...  la pregunta es como burlar esa restruccion?
En línea

Desconectado hkadejo

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 3345
Re:Ayuda Para enviar correo web Utilizando google chart
« Respuesta #2 : junio 01, 2012, 09:43:52 pm »
Mejor da por hecho que no hay javascript en los clientes de correo....

Algunos links que te pueden ayudar en tu problema

http://stackoverflow.com/questions/9347514/sending-google-visualization-chart-to-email

https://groups.google.com/forum/?fromgroups#!topic/google-chart-api/DKVMgoGVIAU

Aqui podrias guardar la grafica como imagen y enlazarla en tu correo...no se, se me ocurre como alternativa
http://stackoverflow.com/questions/3738839/how-to-save-google-charts-to-the-server
En línea

Desconectado JaiMe

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 1485
  • λ | h+
Re:Ayuda Para enviar correo web Utilizando google chart
« Respuesta #3 : junio 01, 2012, 10:19:19 pm »
Google tiene un API para generar gráficas como imagenes desde urls: Image Charts

En la documentación podes encontrar un wizard que te facilita crear los graficos, luego solo agregas la url adentro de IMG tags. Por ejemplo, aqui medio hice un chart parecido al que queres

Código: [Seleccionar]
http://chart.apis.google.com/chart?chbh=a,7,15&chs=280x150&cht=bvg&chco=76A4FB,FF9900,3399CC,FF0000,0000FF&chd=s4:YsopiVT,ngmngnf,WRRhijt,jRULUUT,ZfjcZho&chm=D,4D89F9,4,0,5,1


No tiene tantas opciones como la visualization API, pero te puede sacar de aguas. Solo ten en cuenta que el API ha sido deprecated, pero de acuerdo a las policies de Google podes seguir usandola hasta el 2015.

Personalmente para enviar emails solo tomaria screenshots de el chart que ya tenes hecho con un link hacia el grafico o landing page con los últimos datos.
En línea
"Unless you try to do something beyond what you have already mastered, you will never grow."
 ― Ralph Waldo Emerson

Desconectado SiKa

  • -^- Elite Silver -^-
  • The Communiter-
  • *
  • Mensajes: 2548
  • .
Re: poner dos graficos de google chart en una pagina HTML
« Respuesta #4 : octubre 30, 2012, 03:25:26 pm »
Gracias mis amigos...  Ahora sigo con otro problema... Olvidemos lo de mandarlo por CORREO... ahora quiero poner mas de un grafico en un documento html  ¿coomo lo logro?

recuerden que de HTML no como  :yao_ming:   asi que por favor hablenme en español.. jeje.. pego aqui el codigo de mi grafico.. si yo lo pego dos veces tendria que salir el mismo grafico.. pero no me sale.. ¿como lo logro?


Código: [Seleccionar]

<html>
  <head><h1 style="border: 0px none ; margin: 0px; padding-top: 16px; padding-right: 0px; padding-bottom: 0px ! important; padding-left: 10px; font-size: 19px ! important; vertical-align:
baseline; background-color: rgb(255, 255, 255); font-weight: normal; line-height: .5 ! important; color: rgb(51, 51, 51); font-family:UbuntuBeta,Ubuntu,
Tahoma,sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;
">INSTANCIA CUAL ES TU CHIRRIA PUNTO COM<span class="Apple-converted-space"></span></h1><p class="tagline"
 style="border: 0px none ; padding: 0px; margin-top: 15px; margin-right: 0px; margin-bottom: 45px ! important; margin-left: 0px; font-size: 16px; vertical-align: baseline; background-color: rgb(255, 255, 255);
  line-height: .5em; color: rgb(51, 51, 51); font-family:UbuntuBeta,Ubuntu,Tahoma,sans-serif; font-style: normal; font-variant: normal; font-weight: normal;
  letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
  (Información estadística desde 30-10-2012 14:00 hasta 30-10-012 15:00)</p><script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([['Application','Commit','Concurrency','Configuration','Network','Other','System I/O','User I/O'],['14:00',4.56,4.77,0,1.28,.39,63.16,18.31],
['14:01',12.29,0,0,2.21,.01,61.79,4.26],
['14:02',5.62,.11,0,1.57,.01,49.44,5.05],
['14:03',11.72,0,0,1.16,0,122.26,82.35],
['14:04',5.93,26.29,0,1.47,0,29.93,162.53],
['14:05',9.97,0,0,1.1,0,48.09,116.42],
['14:06',5.81,4.96,0,1.24,0,42.18,4.77],
['14:07',2.5,0,0,1,0,10.29,2.9],
['14:08',1.35,0,0,1.16,0,32.13,3.6],
['14:09',5.19,26.69,0,1.42,0,54.06,3.39],
['14:10',6.32,0,0,1.38,.04,15.5,6.8],
['14:11',4.24,0,0,1.12,0,43.12,17.63],
['14:12',6.16,0,0,1.31,.02,44.79,30.28],
['14:13',3.19,6.43,0,1.44,0,14.84,12.01],
['14:14',5.47,32.65,0,1.2,0,51.99,10.03],
['14:15',7.02,0,0,1.04,.02,43.7,6.18],
['14:16',2.36,6.17,0,1.44,.04,12.44,3.99],
['14:17',2.61,0,0,1.15,0,11.35,7.75],
['14:18',.82,0,0,.73,0,25.72,2.01],
['14:19',1.62,31.67,0,.89,23.77,9.08,1.99],
['14:20',2.38,0,0,1.18,0,16.04,4.3],
['14:21',4.17,0,0,1.3,0,15.85,10.16],
['14:22',1.18,0,0,1.25,0,5.16,2.61],
['14:23',3.46,0,0,1.42,0,10.92,5.3],
['14:24',5.58,36.23,0,1.55,.01,13.45,7.51],
['14:25',1.88,0,0,1.45,0,10.86,4.43],
['14:26',8.26,6.43,0,1.16,.01,37.5,8.93],
['14:27',9.45,0,0,1.53,0,23.16,11.23],
['14:28',5.45,0,0,1.6,.05,27.29,10.87],
['14:29',12.18,52.98,0,1.34,.01,32.39,8.73],
['14:30',3.94,4.52,0,.94,0,33.4,4.96],
['14:31',8.46,0,0,1.23,0,49.43,2.51],
['14:32',8.28,0,0,1.39,.01,93.1,4.05],
['14:33',8.56,6.04,0,1.24,0,74.18,8.17],
['14:34',3.76,15.18,0,.93,0,24.65,13.99],
['14:35',5.05,0,0,1.6,.02,24.61,15.31],
['14:36',6.6,0,0,2,0,112.06,48.38],
['14:37',6.93,0,0,2.37,0,137.04,8.62],
['14:38',6.67,0,0,2.04,.02,113.55,17.32],
['14:39',8.43,23.34,0,2.23,0,141.16,10.36],
['14:40',4.63,0,0,2.08,.03,139.51,13.58],
['14:41',5.89,0,0,2.33,.04,155.88,17],
['14:42',15.99,0,0,2.54,0,93.84,12.8],
['14:43',5.13,0,0,1.46,0,29.15,5.46],
['14:44',5.49,35.85,0,1.54,0,23.94,8.85],
['14:45',10.13,0,0,1.35,0,39.44,1.79],
['14:46',6.93,12.92,0,1.29,.01,138.35,18.41],
['14:47',6.3,0,0,1.31,0,29.94,8.9],
['14:48',6.7,0,0,1.48,.02,34.66,7.39],
['14:49',1.21,25.85,0,1.23,0,21.41,21.02],
['14:50',48.21,0,0,1.62,.02,95.89,97.9],
['14:51',53.16,0,0,2.5,.41,98.18,5.3],
['14:52',98.41,0,0,2.7,.06,172.45,9.33],
['14:53',164.23,0,0,2.97,0,253.16,2.46],
['14:54',151.9,24.75,0,2.41,0,221.33,7.45],
['14:55',59.24,.01,0,2.66,0,198.56,2.48],
['14:56',105.23,9.86,0,3.61,.08,456.71,16.91],
['14:57',106.34,0,0,3.17,.08,580.44,8.54],
['14:58',42.42,0,0,2.83,.01,251.53,9.25],
['14:59',5.67,60.79,0,1.65,.01,206.13,10.03]       ]);
        var options = {
          title:'Métrica de esperas en la última hora',
          hAxis: {title:'Hora',  titleTextStyle: {color: 'blue'}}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 1400px; height: 400px;"></div>
  </body>
</html>







<html>
  <head><h1 style="border: 0px none ; margin: 0px; padding-top: 16px; padding-right: 0px; padding-bottom: 0px ! important; padding-left: 10px; font-size: 19px ! important; vertical-align:
baseline; background-color: rgb(255, 255, 255); font-weight: normal; line-height: .5 ! important; color: rgb(51, 51, 51); font-family:UbuntuBeta,Ubuntu,
Tahoma,sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;
">INSTANCIA CUAL ES TU CHIRRIA PUNTO COM<span class="Apple-converted-space"></span></h1><p class="tagline"
 style="border: 0px none ; padding: 0px; margin-top: 15px; margin-right: 0px; margin-bottom: 45px ! important; margin-left: 0px; font-size: 16px; vertical-align: baseline; background-color: rgb(255, 255, 255);
  line-height: .5em; color: rgb(51, 51, 51); font-family:UbuntuBeta,Ubuntu,Tahoma,sans-serif; font-style: normal; font-variant: normal; font-weight: normal;
  letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
  (Información estadística desde 30-10-2012 14:00 hasta 30-10-012 15:00)</p><script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([['Application','Commit','Concurrency','Configuration','Network','Other','System I/O','User I/O'],['14:00',4.56,4.77,0,1.28,.39,63.16,18.31],
['14:01',12.29,0,0,2.21,.01,61.79,4.26],
['14:02',5.62,.11,0,1.57,.01,49.44,5.05],
['14:03',11.72,0,0,1.16,0,122.26,82.35],
['14:04',5.93,26.29,0,1.47,0,29.93,162.53],
['14:05',9.97,0,0,1.1,0,48.09,116.42],
['14:06',5.81,4.96,0,1.24,0,42.18,4.77],
['14:07',2.5,0,0,1,0,10.29,2.9],
['14:08',1.35,0,0,1.16,0,32.13,3.6],
['14:09',5.19,26.69,0,1.42,0,54.06,3.39],
['14:10',6.32,0,0,1.38,.04,15.5,6.8],
['14:11',4.24,0,0,1.12,0,43.12,17.63],
['14:12',6.16,0,0,1.31,.02,44.79,30.28],
['14:13',3.19,6.43,0,1.44,0,14.84,12.01],
['14:14',5.47,32.65,0,1.2,0,51.99,10.03],
['14:15',7.02,0,0,1.04,.02,43.7,6.18],
['14:16',2.36,6.17,0,1.44,.04,12.44,3.99],
['14:17',2.61,0,0,1.15,0,11.35,7.75],
['14:18',.82,0,0,.73,0,25.72,2.01],
['14:19',1.62,31.67,0,.89,23.77,9.08,1.99],
['14:20',2.38,0,0,1.18,0,16.04,4.3],
['14:21',4.17,0,0,1.3,0,15.85,10.16],
['14:22',1.18,0,0,1.25,0,5.16,2.61],
['14:23',3.46,0,0,1.42,0,10.92,5.3],
['14:24',5.58,36.23,0,1.55,.01,13.45,7.51],
['14:25',1.88,0,0,1.45,0,10.86,4.43],
['14:26',8.26,6.43,0,1.16,.01,37.5,8.93],
['14:27',9.45,0,0,1.53,0,23.16,11.23],
['14:28',5.45,0,0,1.6,.05,27.29,10.87],
['14:29',12.18,52.98,0,1.34,.01,32.39,8.73],
['14:30',3.94,4.52,0,.94,0,33.4,4.96],
['14:31',8.46,0,0,1.23,0,49.43,2.51],
['14:32',8.28,0,0,1.39,.01,93.1,4.05],
['14:33',8.56,6.04,0,1.24,0,74.18,8.17],
['14:34',3.76,15.18,0,.93,0,24.65,13.99],
['14:35',5.05,0,0,1.6,.02,24.61,15.31],
['14:36',6.6,0,0,2,0,112.06,48.38],
['14:37',6.93,0,0,2.37,0,137.04,8.62],
['14:38',6.67,0,0,2.04,.02,113.55,17.32],
['14:39',8.43,23.34,0,2.23,0,141.16,10.36],
['14:40',4.63,0,0,2.08,.03,139.51,13.58],
['14:41',5.89,0,0,2.33,.04,155.88,17],
['14:42',15.99,0,0,2.54,0,93.84,12.8],
['14:43',5.13,0,0,1.46,0,29.15,5.46],
['14:44',5.49,35.85,0,1.54,0,23.94,8.85],
['14:45',10.13,0,0,1.35,0,39.44,1.79],
['14:46',6.93,12.92,0,1.29,.01,138.35,18.41],
['14:47',6.3,0,0,1.31,0,29.94,8.9],
['14:48',6.7,0,0,1.48,.02,34.66,7.39],
['14:49',1.21,25.85,0,1.23,0,21.41,21.02],
['14:50',48.21,0,0,1.62,.02,95.89,97.9],
['14:51',53.16,0,0,2.5,.41,98.18,5.3],
['14:52',98.41,0,0,2.7,.06,172.45,9.33],
['14:53',164.23,0,0,2.97,0,253.16,2.46],
['14:54',151.9,24.75,0,2.41,0,221.33,7.45],
['14:55',59.24,.01,0,2.66,0,198.56,2.48],
['14:56',105.23,9.86,0,3.61,.08,456.71,16.91],
['14:57',106.34,0,0,3.17,.08,580.44,8.54],
['14:58',42.42,0,0,2.83,.01,251.53,9.25],
['14:59',5.67,60.79,0,1.65,.01,206.13,10.03]       ]);
        var options = {
          title:'Métrica de esperas en la última hora',
          hAxis: {title:'Hora',  titleTextStyle: {color: 'blue'}}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 1400px; height: 400px;"></div>
  </body>
</html>

En línea

Desconectado adolira

  • Sv Member
  • ***
  • Mensajes: 440
Re:Ayuda Para enviar correo web Utilizando google chart
« Respuesta #5 : octubre 30, 2012, 04:08:31 pm »
Para lograr poner otra grafica o mas graficas tenes q poner otro contenedor osea los div donde va imprimir la grafica, te separe el codigo de las graficas para q no te confundas
para cada grafica tenes q poner su propio contenedor
Código: [Seleccionar]
<div id="chart_div2" style="width: 1400px; height: 400px;"></div>
Código: [Seleccionar]
<html>
  <head><h1 style="border: 0px none ; margin: 0px; padding-top: 16px; padding-right: 0px; padding-bottom: 0px ! important; padding-left: 10px; font-size: 19px !

important; vertical-align:
baseline; background-color: rgb(255, 255, 255); font-weight: normal; line-height: .5 ! important; color: rgb(51, 51, 51); font-family:UbuntuBeta,Ubuntu,
Tahoma,sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-

space: normal; widows: 2; word-spacing: 0px;
">INSTANCIA CUAL ES TU CHIRRIA PUNTO COM<span class="Apple-converted-space"></span></h1><p class="tagline"
 style="border: 0px none ; padding: 0px; margin-top: 15px; margin-right: 0px; margin-bottom: 45px ! important; margin-left: 0px; font-size: 16px; vertical-align:

baseline; background-color: rgb(255, 255, 255);
  line-height: .5em; color: rgb(51, 51, 51); font-family:UbuntuBeta,Ubuntu,Tahoma,sans-serif; font-style: normal; font-variant: normal; font-weight: normal;
  letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
  (Información estadística desde 30-10-2012 14:00 hasta 30-10-012 15:00)</p><script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([['Application','Commit','Concurrency','Configuration','Network','Other','System I/O','User I/O'],

['14:00',4.56,4.77,0,1.28,.39,63.16,18.31],
['14:01',12.29,0,0,2.21,.01,61.79,4.26],
['14:02',5.62,.11,0,1.57,.01,49.44,5.05],
['14:03',11.72,0,0,1.16,0,122.26,82.35],
['14:04',5.93,26.29,0,1.47,0,29.93,162.53],
['14:05',9.97,0,0,1.1,0,48.09,116.42],
['14:06',5.81,4.96,0,1.24,0,42.18,4.77],
['14:07',2.5,0,0,1,0,10.29,2.9],
['14:08',1.35,0,0,1.16,0,32.13,3.6],
['14:09',5.19,26.69,0,1.42,0,54.06,3.39],
['14:10',6.32,0,0,1.38,.04,15.5,6.8],
['14:11',4.24,0,0,1.12,0,43.12,17.63],
['14:12',6.16,0,0,1.31,.02,44.79,30.28],
['14:13',3.19,6.43,0,1.44,0,14.84,12.01],
['14:14',5.47,32.65,0,1.2,0,51.99,10.03],
['14:15',7.02,0,0,1.04,.02,43.7,6.18],
['14:16',2.36,6.17,0,1.44,.04,12.44,3.99],
['14:17',2.61,0,0,1.15,0,11.35,7.75],
['14:18',.82,0,0,.73,0,25.72,2.01],
['14:19',1.62,31.67,0,.89,23.77,9.08,1.99],
['14:20',2.38,0,0,1.18,0,16.04,4.3],
['14:21',4.17,0,0,1.3,0,15.85,10.16],
['14:22',1.18,0,0,1.25,0,5.16,2.61],
['14:23',3.46,0,0,1.42,0,10.92,5.3],
['14:24',5.58,36.23,0,1.55,.01,13.45,7.51],
['14:25',1.88,0,0,1.45,0,10.86,4.43],
['14:26',8.26,6.43,0,1.16,.01,37.5,8.93],
['14:27',9.45,0,0,1.53,0,23.16,11.23],
['14:28',5.45,0,0,1.6,.05,27.29,10.87],
['14:29',12.18,52.98,0,1.34,.01,32.39,8.73],
['14:30',3.94,4.52,0,.94,0,33.4,4.96],
['14:31',8.46,0,0,1.23,0,49.43,2.51],
['14:32',8.28,0,0,1.39,.01,93.1,4.05],
['14:33',8.56,6.04,0,1.24,0,74.18,8.17],
['14:34',3.76,15.18,0,.93,0,24.65,13.99],
['14:35',5.05,0,0,1.6,.02,24.61,15.31],
['14:36',6.6,0,0,2,0,112.06,48.38],
['14:37',6.93,0,0,2.37,0,137.04,8.62],
['14:38',6.67,0,0,2.04,.02,113.55,17.32],
['14:39',8.43,23.34,0,2.23,0,141.16,10.36],
['14:40',4.63,0,0,2.08,.03,139.51,13.58],
['14:41',5.89,0,0,2.33,.04,155.88,17],
['14:42',15.99,0,0,2.54,0,93.84,12.8],
['14:43',5.13,0,0,1.46,0,29.15,5.46],
['14:44',5.49,35.85,0,1.54,0,23.94,8.85],
['14:45',10.13,0,0,1.35,0,39.44,1.79],
['14:46',6.93,12.92,0,1.29,.01,138.35,18.41],
['14:47',6.3,0,0,1.31,0,29.94,8.9],
['14:48',6.7,0,0,1.48,.02,34.66,7.39],
['14:49',1.21,25.85,0,1.23,0,21.41,21.02],
['14:50',48.21,0,0,1.62,.02,95.89,97.9],
['14:51',53.16,0,0,2.5,.41,98.18,5.3],
['14:52',98.41,0,0,2.7,.06,172.45,9.33],
['14:53',164.23,0,0,2.97,0,253.16,2.46],
['14:54',151.9,24.75,0,2.41,0,221.33,7.45],
['14:55',59.24,.01,0,2.66,0,198.56,2.48],
['14:56',105.23,9.86,0,3.61,.08,456.71,16.91],
['14:57',106.34,0,0,3.17,.08,580.44,8.54],
['14:58',42.42,0,0,2.83,.01,251.53,9.25],
['14:59',5.67,60.79,0,1.65,.01,206.13,10.03]       ]);
        var options = {
          title:'Métrica de esperas en la última hora',
          hAxis: {title:'Hora',  titleTextStyle: {color: 'blue'}}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>


 <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([['Application','Commit','Concurrency','Configuration','Network','Other','System I/O','User I/O'],

['14:00',4.56,4.77,0,1.28,.39,63.16,18.31],
['14:01',12.29,0,0,2.21,.01,61.79,4.26],
['14:02',5.62,.11,0,1.57,.01,49.44,5.05],
['14:03',11.72,0,0,1.16,0,122.26,82.35],
['14:04',5.93,26.29,0,1.47,0,29.93,162.53],
['14:05',9.97,0,0,1.1,0,48.09,116.42],
['14:06',5.81,4.96,0,1.24,0,42.18,4.77],
['14:07',2.5,0,0,1,0,10.29,2.9],
['14:08',1.35,0,0,1.16,0,32.13,3.6],
['14:09',5.19,26.69,0,1.42,0,54.06,3.39],
['14:10',6.32,0,0,1.38,.04,15.5,6.8],
['14:11',4.24,0,0,1.12,0,43.12,17.63],
['14:12',6.16,0,0,1.31,.02,44.79,30.28],
['14:13',3.19,6.43,0,1.44,0,14.84,12.01],
['14:14',5.47,32.65,0,1.2,0,51.99,10.03],
['14:15',7.02,0,0,1.04,.02,43.7,6.18],
['14:16',2.36,6.17,0,1.44,.04,12.44,3.99],
['14:17',2.61,0,0,1.15,0,11.35,7.75],
['14:18',.82,0,0,.73,0,25.72,2.01],
['14:19',1.62,31.67,0,.89,23.77,9.08,1.99],
['14:20',2.38,0,0,1.18,0,16.04,4.3],
['14:21',4.17,0,0,1.3,0,15.85,10.16],
['14:22',1.18,0,0,1.25,0,5.16,2.61],
['14:23',3.46,0,0,1.42,0,10.92,5.3],
['14:24',5.58,36.23,0,1.55,.01,13.45,7.51],
['14:25',1.88,0,0,1.45,0,10.86,4.43],
['14:26',8.26,6.43,0,1.16,.01,37.5,8.93],
['14:27',9.45,0,0,1.53,0,23.16,11.23],
['14:28',5.45,0,0,1.6,.05,27.29,10.87],
['14:29',12.18,52.98,0,1.34,.01,32.39,8.73],
['14:30',3.94,4.52,0,.94,0,33.4,4.96],
['14:31',8.46,0,0,1.23,0,49.43,2.51],
['14:32',8.28,0,0,1.39,.01,93.1,4.05],
['14:33',8.56,6.04,0,1.24,0,74.18,8.17],
['14:34',3.76,15.18,0,.93,0,24.65,13.99],
['14:35',5.05,0,0,1.6,.02,24.61,15.31],
['14:36',6.6,0,0,2,0,112.06,48.38],
['14:37',6.93,0,0,2.37,0,137.04,8.62],
['14:38',6.67,0,0,2.04,.02,113.55,17.32],
['14:39',8.43,23.34,0,2.23,0,141.16,10.36],
['14:40',4.63,0,0,2.08,.03,139.51,13.58],
['14:41',5.89,0,0,2.33,.04,155.88,17],
['14:42',15.99,0,0,2.54,0,93.84,12.8],
['14:43',5.13,0,0,1.46,0,29.15,5.46],
['14:44',5.49,35.85,0,1.54,0,23.94,8.85],
['14:45',10.13,0,0,1.35,0,39.44,1.79],
['14:46',6.93,12.92,0,1.29,.01,138.35,18.41],
['14:47',6.3,0,0,1.31,0,29.94,8.9],
['14:48',6.7,0,0,1.48,.02,34.66,7.39],
['14:49',1.21,25.85,0,1.23,0,21.41,21.02],
['14:50',48.21,0,0,1.62,.02,95.89,97.9],
['14:51',53.16,0,0,2.5,.41,98.18,5.3],
['14:52',98.41,0,0,2.7,.06,172.45,9.33],
['14:53',164.23,0,0,2.97,0,253.16,2.46],
['14:54',151.9,24.75,0,2.41,0,221.33,7.45],
['14:55',59.24,.01,0,2.66,0,198.56,2.48],
['14:56',105.23,9.86,0,3.61,.08,456.71,16.91],
['14:57',106.34,0,0,3.17,.08,580.44,8.54],
['14:58',42.42,0,0,2.83,.01,251.53,9.25],
['14:59',5.67,60.79,0,1.65,.01,206.13,10.03]       ]);
        var options = {
          title:'Métrica de esperas en la última hora',
          hAxis: {title:'Hora',  titleTextStyle: {color: 'blue'}}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div2'));
        chart.draw(data, options);
      }
    </script>

  </head>
  <body>
    <div id="chart_div" style="width: 1400px; height: 400px;"></div>

    <div id="chart_div2" style="width: 1400px; height: 400px;"></div>
  </body>
</html>
En línea
<a href="http://profile.mygamercard.net/eternal258">
<img src="http://card.mygamercard.net/community/360style/eternal258.png" border=0>
</a>

Desconectado JaiMe

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 1485
  • λ | h+
Re:Ayuda Para enviar correo web Utilizando google chart
« Respuesta #6 : octubre 30, 2012, 04:14:10 pm »
@alberto.arevalo, lee lo que dijiste "quiero poner mas de un grafico en un documento html". Ese copy paste que haz hecho produce dos documentos HTML.

En lugar de hacer copy/paste a lo loco, lo primero que debes hacer es crear dos divs, uno para cada grafico

Código: [Seleccionar]
<div id="chart1" style="width: 1400px; height: 400px;"></div>
<div id="chart2" style="width: 1400px; height: 400px;"></div>
Luego debes crear dos data tables que contengan tus datos

Código: [Seleccionar]
var data1 = google.visualization.arrayToDataTable(
               [['Application','Commit','Concurrency', 'Configuration',
                 'Network','Other','System I/O','User I/O'],
                ['14:00',4.56,4.77,0,1.28,.39,63.16,18.31],
                ['14:01',12.29,0,0,2.21,.01,61.79,4.26],
                ['14:02',5.62,.11,0,1.57,.01,49.44,5.05],
                ['14:03',11.72,0,0,1.16,0,122.26,82.35],
                ['14:04',5.93,26.29,0,1.47,0,29.93,162.53],
                ['14:05',9.97,0,0,1.1,0,48.09,116.42] ]);

var data2 = google.visualization.arrayToDataTable(
               [['Application','Commit','Concurrency', 'Configuration',
                 'Network','Other','System I/O','User I/O'],
                ['14:00',4.56,4.77,0,1.28,.39,63.16,18.31],
                ['14:01',12.29,0,0,2.21,.01,61.79,4.26],
                ['14:02',5.62,.11,0,1.57,.01,49.44,5.05],
                ['14:03',11.72,0,0,1.16,0,122.26,82.35],
                ['14:04',5.93,26.29,0,1.47,0,29.93,162.53],
                ['14:05',9.97,0,0,1.1,0,48.09,116.42] ]);
En este caso estoy usando menos datos pero los mismos para ambos gráficos - mientras que hay maneras de duplicarlos, lo hago asi por que me imagino que queres diferentes datos en el segundo grafico. Ahora que tenes dos data tables, necesitas diferentes opciones

Código: [Seleccionar]
var options1 = {
   title:'Métrica de esperas en la última hora',
   hAxis: {title:'Hora',  titleTextStyle: {color: 'blue'}}
};

var options2 = {
   title:'Otro Grafico',
   hAxis: {title:'Hora',  titleTextStyle: {color: 'blue'}}
};
Ahora necesitas dos graficos, uno para cada div

Código: [Seleccionar]
var chart1 = new google
                  .visualization
                  .AreaChart(document.getElementById('chart1'));

var chart2 = new google
                  .visualization
                  .AreaChart(document.getElementById('chart2'));
Luego simplemente llamas el metodo draw de ambos charts, pasando los data tables y options que creaste anteriormente

Código: [Seleccionar]
chart1.draw(data1, options1);
chart2.draw(data2, options2);


Ejemplo: http://jsfiddle.net/jaimem/8dNaZ/1/
« Última Modificación: octubre 30, 2012, 04:22:32 pm por JaiMe »
En línea
"Unless you try to do something beyond what you have already mastered, you will never grow."
 ― Ralph Waldo Emerson

Desconectado SiKa

  • -^- Elite Silver -^-
  • The Communiter-
  • *
  • Mensajes: 2548
  • .
Re:Ayuda Para enviar correo web Utilizando google chart
« Respuesta #7 : octubre 30, 2012, 04:31:49 pm »
Jaime   sos la mera mata.. gracias.... justo lo que necesitaba
En línea
Páginas: [1]   Ir Arriba
« anterior próximo »