Hola Alejandro, <br><br>Sin internet la verdad es que lo tienes dificil<br><br>Prueba con esto que te debe funcionar, he comentado la parte del tipsy por que me daba error ya que no tengo esas librerias.<br><br><script defer="defer" type="text/javascript"><br>
OpenLayers.ProxyHost = "proxy.cgi?url=";<br><br>function charting(){<br> var data = pv.range(10).map(Math.random),<br> w = 400,<br> h = 250,<br> x = pv.Scale.linear(0, 1).range(0, w),<br> y = pv.Scale.ordinal(pv.range(10)).splitBanded(0, h, 4/5);<br>
<br> var div = document.createElement("div");<br> <br> var vis = new pv.Panel()<br> .width(w)<br> .height(h)<br> .bottom(20)<br> .left(20)<br> .right(10)<br> .top(5)<br>
.canvas(div) ;<br> <br> <br> var bar = vis.add(pv.Bar)<br> .data(data)<br> .top(function() y(this.index))<br> .height(y.range().band)<br> .left(0)<br> .width(x)<br> .title(function(d) d.toFixed(1));<br>
// .event("mouseover", pv.Behavior.tipsy({gravity: "w", fade: true}));<br> <br> bar.anchor("left").add(pv.Label)<br> .textMargin(5)<br> .textAlign("right")<br>
.text(function() "ABCDEFGHIJK".charAt(this.index));<br> <br> vis.add(pv.Rule)<br> .data(x.ticks())<br> .left(function(d) Math.round(x(d)) - .5)<br> .strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000")<br>
.add(pv.Rule)<br> .bottom(0)<br> .height(5)<br> .strokeStyle("#000")<br> .anchor("bottom").add(pv.Label)<br> .text(function(d) d.toFixed(1));<br> <br> vis.render();<br>
<br> return div;<br> <br>}<br><br>function mostrarMapa(c){<br> var bounds = new OpenLayers.Bounds<br> (<br> -84.956, 19.825,<br> -74.132, 23.984<br> );<br> vlayer = new OpenLayers.Layer.Vector( "Editable" );<br>
var options = {<br> controls: [<br> new OpenLayers.Control.Navigation(),<br> //new OpenLayers.Control.PanZoomBar(),<br> new OpenLayers.Control.EditingToolbar(vlayer),<br>
new OpenLayers.Control.PanZoom(),<br> new OpenLayers.Control.NavToolbar(),<br> new OpenLayers.Control.LayerSwitcher(),<br> new OpenLayers.Control.Attribution(),<br>
new OpenLayers.Control.Permalink(),<br> new OpenLayers.Control.ScaleLine(),<br> new OpenLayers.Control.OverviewMap(),<br> new OpenLayers.Control.WMSGetFeatureInfo(),<br>
new OpenLayers.Control.MousePosition(),<br> new OpenLayers.Control.MouseToolbar()<br> ],<br> maxExtent: bounds,<br> maxResolution: 0.04228125,<br>
projection: "EPSG:4326",<br> units: 'degrees'<br> };<br><br> var map = new OpenLayers.Map('map',options);<br> nav = new OpenLayers.Control.NavigationHistory();<br>
map.addControl(nav);<br> panel = new OpenLayers.Control.Panel(<br> {div: document.getElementById("panel")}<br> );<br> panel.addControls([nav.next, nav.previous]);<br> map.addControl(panel);<br><br>
var political = new OpenLayers.Layer.WMS(<br> "provincias WMS",<br> "<a href="http://localhost:8080/geoserver/une/wms">http://localhost:8080/geoserver/une/wms</a>",<br> {'layers': 'une:uneProvincia',transparent: true, format: 'image/gif'},<br>
{isBaseLayer: true}<br> );<br><br> var highlight = new OpenLayers.Layer.Vector(<br> "Highlighted Features",<br> {displayInLayerSwitcher: false, isBaseLayer: false }<br> );<br><br> map.addLayers([political, highlight,vlayer]);<br>
<br> info = new OpenLayers.Control.WMSGetFeatureInfo(<br> {<br> url: '<a href="http://localhost:8080/geoserver/une/wms">http://localhost:8080/geoserver/une/wms</a>', title: 'Identify features by clicking',<br>
queryVisible: true,<br> eventListeners: {<br> getfeatureinfo: function(event) {<br> var chart = charting();<br> var popup = new OpenLayers.Popup.FramedCloud(<br> "chicken",<br>
map.getLonLatFromPixel(event.xy),<br> new OpenLayers.Size(400,250),<br> $(chart).html(),<br> null,<br> true<br> );<br> //popup.autoSize = false;<br>
map.addPopup(popup);<br> <br> }<br> }<br> }<br> );<br><br> //OpenLayers.Console.debug(info.output);<br><br> map.addControl(info);<br> info.activate();<br> OpenLayers.Console.dir(info);<br>
map.addControl(new OpenLayers.Control.LayerSwitcher());<br> map.zoomToMaxExtent();<br>}<br><br>function load() {<br> ///var chart=charting();<br> mostrarMapa(3);<br><br> ///OpenLayers.Console.dir(a);<br> //a.write("map");<br>
}<br></script><br><br>saludos,<br><br>Bolo<br><br><br><div class="gmail_quote">El 18 de abril de 2012 22:22, J.Alejandro Martinez Linares <span dir="ltr"><<a href="mailto:islanis@infomed.sld.cu">islanis@infomed.sld.cu</a>></span> escribió:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><u></u>
<div text="#000000" bgcolor="#ffffff">
<br>
<br>
El 18/04/12 14:07, Wladimir Szczerban escribió:
<div class="im"><blockquote type="cite">Hola Alejrando, <br>
<br>
Veo que ya casi lo tienes, mejor que enviar el código es poner un
enlace a la aplicación para ver como funciona, si es posible.<br>
<br>
Creo que tu problema está cuando defines el panel le estas indicando
como canvas que pinte en un nuevo elemento en esta linea<br>
.canvas(map.appendChild(document.createElement("div"))) ;<br>
<br>
Yo nunca he usar el protovis pero mirando un poco la API[1] en el
canvas le deberías indicar el div que declaras en tu popup<br>
deberias tener algo así<br>
.canvas('ch') ;<br>
</blockquote></div>
Ya intente hacerlo asi pero no me funciona es como si protovis viera
que no existe tal div creado por mi,debe existir alguna forma que el
dic que yo cree ahi pueda ser visto, alguna forma de crear sobre el
mapa un div que sea visto por los demas elementos y que flote sobre el
mapa, gente ayudeneme, gracias de antemano<div class="im"><br>
<br>
<br>
<blockquote type="cite"><br>
Un problema que te puedes encontrar es que tienes que crear primero el
popup añadirlo al mapa para que se pinte y el div con id 'ch' exista y
luego es que deberías llamar a la función que te pinta el grafico. <br>
</blockquote></div>
ese es el problema me parece que no es un grafico lo que pinta o el
mapa de geoserver no lo asimila bien, hay algo raro pero mis
conocimientos no me permiten dar con ello porque tampoco tengo internet<div class="im"><br>
<br>
<blockquote type="cite"><br>
Otra opción es crear el div en el documento luego crear el grafico y
luego al crear el popup añadir en el popup el div con el grafico.<br>
</blockquote></div>
Esta idea esta buena pero como con javascript podria lograr algo asi,
me gustaria que la cosa la llevaran por aqui, si alguien tiene idea de
como hacerlo asi pues sería genial, y seguramente lo mas ideal<div><div class="h5"><br>
<blockquote type="cite"><br>
Saludos,<br>
<br>
Bolo<br>
<br>
[1] <a href="http://mbostock.github.com/protovis/jsdoc/symbols/pv.Panel.html" target="_blank">http://mbostock.github.com/protovis/jsdoc/symbols/pv.Panel.html</a><br>
<br>
<br>
<br>
<div class="gmail_quote">El 17 de abril de 2012 20:57, J.Alejandro
Martinez Linares <span dir="ltr"><<a href="mailto:islanis@infomed.sld.cu" target="_blank">islanis@infomed.sld.cu</a>></span>
escribió:<br>
<blockquote class="gmail_quote" style="border-left:1px solid rgb(204,204,204);margin:0pt 0pt 0pt 0.8ex;padding-left:1ex">Hola
gente es muy complejo usar dojo para poner el peque chart, ya con eso
muere lo facil de manejar el openlayer, por eso les pido que me ayuden
con algho mas facil solo quiero que dentro del popup me muestre un
chart que seguro se puede alguien me dijuo que con la librería protovis
saldría muy bien y trate de hacerlo pero el grafico sale por fuera del
popup, gracias de antemano me gustaria que me ayudaran gracias me hace
mucha falta, porque necesito esto. aca les envío lo que he hecho y la
imagen de lo que me sale, reitero es importante para mi agradezco toda
la ayuda posible gracias.<br>
<br>
<html><br>
<head><br>
<br>
<title>OpenLayers Example</title><br>
<link rel="stylesheet" href="style.css" type="text/css"><br>
<script src="charts/protovis.js" type="text/javascript"></script><br>
<script src="charts/jquery-1.4.2.min.js"
type="text/javascript"></script><br>
<script src="charts/jquery.tipsy.js" type="text/javascript"></script><br>
<script src="charts/tipsy.js" type="text/javascript"></script><br>
<script src="lib/Firebug/firebug.js"></script><br>
<script src="lib/OpenLayers.js"></script><br>
</head><br>
<body onload="load()"><br>
<div id="map" class="smallmap"><br>
<div id="pan">fdjfdkjfhkdjhkdfjhgkdjfhgkdjfhgkdfjghkdfjghkdfjghkdfjghkdfjhgkdjfhddurtierutyierutyieryt384y534jnrkjwes</div>
<br>
</div><br>
<script defer="defer" type="text/javascript"><br>
OpenLayers.ProxyHost = "proxy.cgi?url=";<br>
<br>
function charting(){<br>
var data = pv.range(10).map(Math.random),<br>
w = 400,<br>
h = 250,<br>
x = pv.Scale.linear(0, 1).range(0, w),<br>
y = pv.Scale.ordinal(pv.range(10)).splitBanded(0, h, 4/5);<br>
<br>
var vis = new pv.Panel()<br>
.width(w)<br>
.height(h)<br>
.bottom(20)<br>
.left(20)<br>
.right(10)<br>
.top(5)<br>
.canvas(map.appendChild(document.createElement("div"))) ;<br>
<br>
var bar = vis.add(pv.Bar)<br>
.data(data)<br>
.top(function() y(this.index))<br>
.height(y.range().band)<br>
.left(0)<br>
.width(x)<br>
.title(function(d) d.toFixed(1))<br>
.event("mouseover", pv.Behavior.tipsy({gravity: "w", fade: true}));<br>
<br>
bar.anchor("left").add(pv.Label)<br>
.textMargin(5)<br>
.textAlign("right")<br>
.text(function() "ABCDEFGHIJK".charAt(this.index));<br>
<br>
vis.add(pv.Rule)<br>
.data(x.ticks())<br>
.left(function(d) Math.round(x(d)) - .5)<br>
.strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000")<br>
.add(pv.Rule)<br>
.bottom(0)<br>
.height(5)<br>
.strokeStyle("#000")<br>
.anchor("bottom").add(pv.Label)<br>
.text(function(d) d.toFixed(1));<br>
<br>
vis.render();<br>
}<br>
<br>
function mostrarMapa(c){<br>
var bounds = new OpenLayers.Bounds<br>
(<br>
-84.956, 19.825,<br>
-74.132, 23.984<br>
);<br>
vlayer = new OpenLayers.Layer.Vector( "Editable" );<br>
var options = {<br>
controls: [<br>
new OpenLayers.Control.Navigation(),<br>
//new OpenLayers.Control.PanZoomBar(),<br>
new OpenLayers.Control.EditingToolbar(vlayer),<br>
new OpenLayers.Control.PanZoom(),<br>
new OpenLayers.Control.NavToolbar(),<br>
new OpenLayers.Control.LayerSwitcher(),<br>
new OpenLayers.Control.Attribution(),<br>
new OpenLayers.Control.Permalink(),<br>
new OpenLayers.Control.ScaleLine(),<br>
new OpenLayers.Control.OverviewMap(),<br>
new OpenLayers.Control.WMSGetFeatureInfo(),<br>
new OpenLayers.Control.MousePosition(),<br>
new OpenLayers.Control.MouseToolbar()<br>
],<br>
maxExtent: bounds,<br>
maxResolution: 0.04228125,<br>
projection: "EPSG:4326",<br>
units: 'degrees'<br>
};<br>
<br>
var map = new OpenLayers.Map('map',options);<br>
nav = new OpenLayers.Control.NavigationHistory();<br>
map.addControl(nav);<br>
panel = new OpenLayers.Control.Panel(<br>
{div:
document.getElementById("panel")}<br>
);<br>
panel.addControls([nav.next, nav.previous]);<br>
map.addControl(panel);<br>
<br>
var political = new OpenLayers.Layer.WMS(<br>
"provincias WMS",<br>
"<a href="http://localhost:8080/geoserver/une/wms" target="_blank">http://localhost:8080/geoserver/une/wms</a>",<br>
{'layers':
'une:uneProvincia',transparent: true, format: 'image/gif'},<br>
{isBaseLayer: true}<br>
);<br>
<br>
var highlight = new OpenLayers.Layer.Vector(<br>
"Highlighted
Features",<br>
{displayInLayerSwitcher: false, isBaseLayer: false }<br>
);<br>
<br>
<br>
<br>
map.addLayers([political, highlight,vlayer]);<br>
<br>
<br>
info = new OpenLayers.Control.WMSGetFeatureInfo(<br>
{<br>
url: '<a href="http://localhost:8080/geoserver/une/wms" target="_blank">http://localhost:8080/geoserver/une/wms</a>', title:
'Identify features by clicking',<br>
queryVisible:
true,<br>
eventListeners: {<br>
getfeatureinfo: function(event) {<br>
map.addPopup(<br>
new
OpenLayers.Popup.FramedCloud(<br>
"chicken",<br>
map.getLonLatFromPixel(event.xy),<br>
null,<br>
"<div id='ch'></div>"+charting(),<br>
null,<br>
true<br>
)<br>
);<br>
}<br>
}<br>
}<br>
);<br>
<br>
<br>
<br>
<br>
//OpenLayers.Console.debug(info.output);<br>
<br>
map.addControl(info);<br>
info.activate();<br>
OpenLayers.Console.dir(info);<br>
map.addControl(new OpenLayers.Control.LayerSwitcher());<br>
map.zoomToMaxExtent();<br>
}<br>
<br>
function load() {<br>
///var chart=charting();<br>
mostrarMapa(3);<br>
<br>
///OpenLayers.Console.dir(a);<br>
//a.write("map");<br>
}<br>
</script><br>
<div id="docs">sdfs</div><br>
<br>
</body><br>
</html>
<div>
<div><br>
<br>
<br>
<br>
<br>
<br>
--<br>
<br>
Este mensaje le ha llegado mediante el servicio de correo electronico
que ofrece Infomed para respaldar el cumplimiento de las misiones del
Sistema Nacional de Salud. La persona que envia este correo asume el
compromiso de usar el servicio a tales fines y cumplir con las
regulaciones establecidas<br>
<br>
Infomed: <a href="http://www.sld.cu/" target="_blank">http://www.sld.cu/</a><br>
</div>
</div>
<br>
_______________________________________________<br>
Spanish mailing list<br>
<a href="http://lists.osgeo.org/mailman/listinfo/spanish" target="_blank">http://lists.osgeo.org/mailman/listinfo/spanish</a><br>
<a href="http://es.osgeo.org" target="_blank">http://es.osgeo.org</a><br>
<a href="http://twitter.com/osgeoes" target="_blank">http://twitter.com/osgeoes</a><br>
<br>
</blockquote>
</div>
<br>
<br clear="all">
<br>
-- <br>
Saludos,<br>
<br>
Bolo<br>
<a href="http://www.geoinquiets.cat" target="_blank">www.geoinquiets.cat</a><br>
<br>
<pre><fieldset></fieldset>
_______________________________________________
Spanish mailing list
<a href="http://lists.osgeo.org/mailman/listinfo/spanish" target="_blank">http://lists.osgeo.org/mailman/listinfo/spanish</a>
<a href="http://es.osgeo.org" target="_blank">http://es.osgeo.org</a>
<a href="http://twitter.com/osgeoes" target="_blank">http://twitter.com/osgeoes</a>
</pre>
</blockquote>
</div></div></div>
<br>_______________________________________________<br>
Spanish mailing list<br>
<a href="http://lists.osgeo.org/mailman/listinfo/spanish" target="_blank">http://lists.osgeo.org/mailman/listinfo/spanish</a><br>
<a href="http://es.osgeo.org" target="_blank">http://es.osgeo.org</a><br>
<a href="http://twitter.com/osgeoes" target="_blank">http://twitter.com/osgeoes</a><br>
<br></blockquote></div><br><br clear="all"><br>-- <br>Saludos,<br><br>Bolo<br><a href="http://www.geoinquiets.cat" target="_blank">www.geoinquiets.cat</a><br><br>