[OpenLayers-Users] openlayers and charts

J.Alejandro Martinez Linares islanis at infomed.sld.cu
Thu Aug 2 00:29:24 PDT 2012


Hi people i am trying get a popup with a barchart and finally i made it 
but i dont know how to customize de bars of my chart , for example i 
want to change the green color of the bars that comes by default, and i 
want to put a red border color of the longest bar and a blue border 
color of the smallest bar, but i dont know how to made it, help please i 
have not internet, this code is the code that actually a have to show 
the popup when i click the map, and show a popup with a statical data in 
a year in a form of chart, and it work, but i need customize the chart 
thanks for all.

wmsFeatureInfo = new OpenLayers.Control.WMSGetFeatureInfo({
      autoActivate : true,
      infoFormat : "application/vnd.ogc.gml",
      maxFeatures : 1,
      eventListeners : {
           "getfeatureinfo" : function(e) {
                  var store = new Ext.data.JsonStore({
                     fields: ['mes', 'valor'],
             data: [
                 {mes: "Enero", valor: e.features[0].attributes.dni01 },
                 {mes: "Febrero", valor: e.features[0].attributes.dni02 },
                 {mes: "Marzo", valor: e.features[0].attributes.dni03 },
                 {mes: "Abril", valor: e.features[0].attributes.dni04 },
                 {mes: "Mayo", valor: e.features[0].attributes.dni05 },
                 {mes: "Junio", valor: e.features[0].attributes.dni06 },
                 {mes: "Julio", valor: e.features[0].attributes.dni07 },
                 {mes: "Agosto", valor: e.features[0].attributes.dni08 },
                 {mes: "Septiembre", valor: 
e.features[0].attributes.dni09 },
                 {mes: "Octubre", valor: e.features[0].attributes.dni10 },
                 {mes: "Noviembre", valor: 
e.features[0].attributes.dni11 },
                 {mes: "Diciembre", valor: e.features[0].attributes.dni12 }
                 ]
             });
                var items1 = [];

                var paneChar = new Ext.Panel({
                 title: 'Lon: '+e.features[0].attributes.lon+' Lat: 
'+e.features[0].attributes.lat,
                 items: new Ext.chart.BarChart({
                         store: store,
                         yField: 'mes',
                         xField: 'valor',
                         chartStyle: {
                             border:{color:'#FF8080',size:2},
                             xAxis: {
                                 labelRotation: 45
                             },
                             //background:{color:'#F4710F'},
                             //padding:5,
                             /*legend:
                             {
                                 display: 'bottom',
                                 padding: 5,
                                 font:
                                 {
                                     family: 'Tahoma',
                                     size: 13
                                 }
                             },*/

                             dataTip: {
                     padding: 5,
                     border: {
                         color: 0x99bbe8,
                         size:1
                     },
                     background: {
                         color: 0xDAE7F6,
                         alpha: .4
                     },
                     font: {
                         name: 'Tahoma',
                         color: 0x15428B,
                         size: 10,
                         bold: true
                     }
                 },

                     majorTicks: {color: '#F4710F', length: 
2,display:'inside'},
                     minorTicks: {color: '#F4710F', length: 2},


                         }/*,
                         style: {
                             image:'assets/ge/img/bar.gif',
                             mode: 'stretch',
                             color:0x99BBE8
                             }*/
                         })
                 });

                 paneChar.add(new Ext.form.Label({
                 text:"Latitud = "+e.features[0].attributes.lat
                 }));

                 paneChar.add(new Ext.form.Label({
                 text:"Longitud = "+e.features[0].attributes.lon
                 }));

                new GeoExt.Popup({
                     title : "Potencial Solar",
                     width : 260,
                     height : 360,
                     layout : "accordion",
                     map : mapPanel,
                     location : e.xy,
                     items : paneChar
                }
                ).show();
           }
      }
});

--

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/


More information about the Users mailing list