Sv Community El Salvador
Soporte y Tecnología => Programación => Scripts => Mensaje iniciado por: SiKa en 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?
<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>
-
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?
-
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 (http://stackoverflow.com/questions/9347514/sending-google-visualization-chart-to-email)
https://groups.google.com/forum/?fromgroups#!topic/google-chart-api/DKVMgoGVIAU (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 (http://stackoverflow.com/questions/3738839/how-to-save-google-charts-to-the-server)
-
Google tiene un API para generar gráficas como imagenes desde urls: Image Charts (https://developers.google.com/chart/image/)
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
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
(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.
-
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?
<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>
-
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
<div id="chart_div2" style="width: 1400px; height: 400px;"></div>
<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>
-
@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
<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
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
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
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
chart1.draw(data1, options1);
chart2.draw(data2, options2);
(http://i.minus.com/ira6U1ec4kcl5.png)
Ejemplo: http://jsfiddle.net/jaimem/8dNaZ/1/ (http://jsfiddle.net/jaimem/8dNaZ/1/)
-
Jaime sos la mera mata.. gracias.... justo lo que necesitaba