[Spanish] openlayer bar charts

Tue Apr 17 14:57:04 EDT 2012

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/
------------ próxima parte ------------
Se ha borrado un mensaje que no est? en formato texto plano...
Nombre     : index.jpg
Tipo       : image/jpeg
Tama?o     : 63718 bytes
Descripci?n: no disponible
Url        : http://lists.osgeo.org/pipermail/spanish/attachments/20120417/291bd893/index-0001.jpg