[Spanish] openlayer bar charts
J.Alejandro Martinez Linares
islanis at infomed.sld.cu
Thu Apr 19 04:54:00 EDT 2012
Hola Wladimir,
aca hice lo que me pediste y me esta dando un error ahora, que es
this.size is null,pero bueno en la imagen que pongo aparece el error y
ni idea porque al popup le estoy pasando un tamaño nuevo, uff esto es
mas pesado de lo que parece. bueno aca les dejo el codigo y la imagen de
lo que dicho codigo hace, gracias aprecio mucho su trabajo, no saben la
ayuda que me estan dando,
<html>
<head>
<title>OpenLayers Example</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="lib/Firebug/firebug.js"></script>
<script src="lib/OpenLayers.js"></script>
<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>
<link href="charts/tipsy.css" type="text/css" rel="stylesheet"/>
</head>
<body onload="load()">
<div id="map" class="smallmap">
<div id="panel"></div>
</div>
<script defer="defer" type="text/javascript">
//OpenLayers.ProxyHost = "proxy.cgi?url=";
//OpenLayers.Console.log();
var nuchart=null;
var oldchart;
var map;
var chart;
function charting(){
if(nuchart==null)
{
}else
{
document.getElementById('map').removeChild(nuchart);
nuchart=null;
}
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(document.getElementById('map').appendChild(nuchart=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();
return vis;
}
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.NavigationHistory(),
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'
};
map = new OpenLayers.Map('map',options);
nav = new OpenLayers.Control.NavigationHistory();
// parent control must be added to the map
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]);
map.events.register('click',map,pop);
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//OpenLayers.Console.debug(info.output);
//OpenLayers.Console.dir(map);
// map.addControl(info);
// info.activate();
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
function pop(e){
chart=charting();
var p=new OpenLayers.Popup.FramedCloud(
"chicken",
map.getLonLatFromPixel(e.xy),
new OpenLayers.Size(400,250),
$(chart).html(),//charting()+"hola",//charting(),
null,
true
);
map.addPopup(p);
}
function load() {
///var chart=charting();
mostrarMapa(3);
///OpenLayers.Console.dir(a);
//a.write("map");
}
</script>
<br>
<br>
<br>
<br>
<br>
<div id="docs">
<?php
if (isset($_GET['ancho']) AND isset($_GET['altura'])) {
// imprimir las variables de geometria
echo "El ancho de la pantalla es: ". $_GET['ancho'] ."<br />\n";
echo "La altura de la pantalla es: ". $_GET['altura'] ."<br />\n";
}
else
{
// pasar las variables de geometria
// (preservar la cadena query original
// -- las variables post deberan ser pasadas de otra forma)
echo "<script language='javascript'>\n";
echo "
location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}".
"&ancho=\" + screen.width + \"&altura=\" + screen.height;\n";
echo "</script>\n";
exit();
}
?>
</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 : 19-04-12.rar
Tipo : application/x-rar
Tama?o : 74605 bytes
Descripci?n: no disponible
Url : http://lists.osgeo.org/pipermail/spanish/attachments/20120419/78fdfe9b/19-04-12-0001.bin
More information about the Spanish
mailing list