[Spanish] openlayer bar charts
Wladimir Szczerban
bolosig at gmail.com
Wed Apr 18 08:07:03 EDT 2012
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') ;
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.
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.
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 <
islanis en infomed.sld.cu> 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">**fdjfdkjfhkdjhkdfjhgkdjfhgkdjfh**
> gkdfjghkdfjghkdfjghkdfjghkdfjh**gkdjfhddurtierutyierutyieryt38**4y534jnrkjwes</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 <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<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
------------ próxima parte ------------
Se ha borrado un adjunto en formato HTML...
URL: http://lists.osgeo.org/pipermail/spanish/attachments/20120418/59ccd098/attachment.html
More information about the Spanish
mailing list