El 18/04/12 14:07, Wladimir Szczerban escribió:
Hola Alejrando,

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.

Creo que tu problema está cuando defines el panel le estas indicando como canvas que pinte en un nuevo elemento en esta linea
 .canvas(map.appendChild(document.createElement("div"))) ;

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
deberias tener algo así
.canvas('ch') ;
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



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.
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


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.
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

Saludos,

Bolo

[1] http://mbostock.github.com/protovis/jsdoc/symbols/pv.Panel.html



El 17 de abril de 2012 20:57, J.Alejandro Martinez Linares <[email protected] <mailto:[email protected]>> escribió:

    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.

    <html>
    <head>

    <title>OpenLayers Example</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="charts/protovis.js" type="text/javascript"></script>
    <script src="charts/jquery-1.4.2.min.js"
    type="text/javascript"></script>
    <script src="charts/jquery.tipsy.js" type="text/javascript"></script>
    <script src="charts/tipsy.js" type="text/javascript"></script>
    <script src="lib/Firebug/firebug.js"></script>
    <script src="lib/OpenLayers.js"></script>
    </head>
    <body  onload="load()">
    <div id="map" class="smallmap">
    <div
    
id="pan">fdjfdkjfhkdjhkdfjhgkdjfhgkdjfhgkdfjghkdfjghkdfjghkdfjghkdfjhgkdjfhddurtierutyierutyieryt384y534jnrkjwes</div>

    </div>
    <script defer="defer" type="text/javascript">
    OpenLayers.ProxyHost = "proxy.cgi?url=";

    function  charting(){
       var data = pv.range(10).map(Math.random),
       w = 400,
       h = 250,
       x = pv.Scale.linear(0, 1).range(0, w),
       y = pv.Scale.ordinal(pv.range(10)).splitBanded(0, h, 4/5);

    var vis = new pv.Panel()
       .width(w)
       .height(h)
       .bottom(20)
       .left(20)
       .right(10)
       .top(5)
       .canvas(map.appendChild(document.createElement("div"))) ;

    var bar = vis.add(pv.Bar)
       .data(data)
       .top(function() y(this.index))
       .height(y.range().band)
       .left(0)
       .width(x)
       .title(function(d) d.toFixed(1))
       .event("mouseover", pv.Behavior.tipsy({gravity: "w", fade: true}));

    bar.anchor("left").add(pv.Label)
       .textMargin(5)
       .textAlign("right")
       .text(function() "ABCDEFGHIJK".charAt(this.index));

    vis.add(pv.Rule)
       .data(x.ticks())
       .left(function(d) Math.round(x(d)) - .5)
       .strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000")
     .add(pv.Rule)
       .bottom(0)
       .height(5)
       .strokeStyle("#000")
     .anchor("bottom").add(pv.Label)
       .text(function(d) d.toFixed(1));

    vis.render();
    }

    function mostrarMapa(c){
       var bounds = new OpenLayers.Bounds
           (
           -84.956, 19.825,
           -74.132, 23.984
           );
       vlayer = new OpenLayers.Layer.Vector( "Editable" );
       var options = {
                   controls: [
                               new OpenLayers.Control.Navigation(),
                             //new OpenLayers.Control.PanZoomBar(),
                             new
    OpenLayers.Control.EditingToolbar(vlayer),
                             new OpenLayers.Control.PanZoom(),
                             new OpenLayers.Control.NavToolbar(),
                             new OpenLayers.Control.LayerSwitcher(),
                             new OpenLayers.Control.Attribution(),
                             new OpenLayers.Control.Permalink(),
                             new OpenLayers.Control.ScaleLine(),
                             new OpenLayers.Control.OverviewMap(),
                             new OpenLayers.Control.WMSGetFeatureInfo(),
                             new OpenLayers.Control.MousePosition(),
                             new OpenLayers.Control.MouseToolbar()
                               ],
                   maxExtent: bounds,
                   maxResolution: 0.04228125,
                   projection: "EPSG:4326",
                   units: 'degrees'
               };

       var map = new OpenLayers.Map('map',options);
       nav = new OpenLayers.Control.NavigationHistory();
       map.addControl(nav);
       panel = new OpenLayers.Control.Panel(
                                               {div:
    document.getElementById("panel")}
                                           );
       panel.addControls([nav.next, nav.previous]);
       map.addControl(panel);

       var political = new OpenLayers.Layer.WMS(
                                                   "provincias WMS",
"http://localhost:8080/geoserver/une/wms";,
                                                   {'layers':
    'une:uneProvincia',transparent: true, format: 'image/gif'},
                                                   {isBaseLayer: true}
                                               );

       var highlight = new OpenLayers.Layer.Vector(
                                                       "Highlighted
    Features",
{displayInLayerSwitcher: false, isBaseLayer: false }
                                                   );



       map.addLayers([political, highlight,vlayer]);


    info = new OpenLayers.Control.WMSGetFeatureInfo(
                                                       {
                                                           url:
    'http://localhost:8080/geoserver/une/wms', title: 'Identify
    features by clicking',
queryVisible: true, eventListeners: { getfeatureinfo: function(event) { map.addPopup( new
    OpenLayers.Popup.FramedCloud(
"chicken", map.getLonLatFromPixel(event.xy), null, "<div id='ch'></div>"+charting(), null, true ) ); }
                                                                       }
                                                       }
                                                       );




       //OpenLayers.Console.debug(info.output);

       map.addControl(info);
       info.activate();
       OpenLayers.Console.dir(info);
       map.addControl(new OpenLayers.Control.LayerSwitcher());
       map.zoomToMaxExtent();
    }

    function load() {
       ///var chart=charting();
       mostrarMapa(3);

       ///OpenLayers.Console.dir(a);
       //a.write("map");
    }
    </script>
    <div id="docs">sdfs</div>

    </body>
    </html>






    --

    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

    Infomed: http://www.sld.cu/

    _______________________________________________
    Spanish mailing list
    http://lists.osgeo.org/mailman/listinfo/spanish
    http://es.osgeo.org
    http://twitter.com/osgeoes




--
Saludos,

Bolo
www.geoinquiets.cat <http://www.geoinquiets.cat>


_______________________________________________
Spanish mailing list
http://lists.osgeo.org/mailman/listinfo/spanish
http://es.osgeo.org
http://twitter.com/osgeoes


--

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

Infomed: http://www.sld.cu/
_______________________________________________
Spanish mailing list
http://lists.osgeo.org/mailman/listinfo/spanish
http://es.osgeo.org
http://twitter.com/osgeoes

Responder a