Utilizando o Google Charts – Parte 4: Exibindo os Valores dos Dados

Aproveitando uma dúvida que me enviaram estou escrevendo esta pequena dica. Conhecemos bem algumas interatividades dos gráficos, como por exemplo mostrar uma caixa do tipo ToolTip ao posicionar o mouse sobre as séries. Porém as vezes necessitamos que os valores dos dados estejam sempre em exibição junto com as linhas ou colunas, para que o usuário tenha uma rápida interpretação dos dados.

Em outras linguagens isso é uma tarefa muito simples (como o showDataTips do Adobe Flex), mas com o Goole Charts precisamos de um pouco mais de linhas de código, embora não seja impossível.

Image Chart with Value Marker

Continue lendo “Utilizando o Google Charts – Parte 4: Exibindo os Valores dos Dados”

Auto ajuste de Posição e Zoom no Google Maps em Adobe Flex

Essa dica vai para quem trabalha com a API do Google Maps para Flex (que aliás não será continuada pelo Google depois que a Adobe jogou a toalha na guerra contra a Apple). A dica também vale para as API´s de outras linguagens.

Após criar uma série de elementos no seu mapa, como marcas ou polígonos, é comum você querer visualizar todos os elementos de uma só vez. Para tanto é necessário identificar a coordenada de latitude e longitude que representa o centro entre todas suas coordendas e identificar o melhor nível de zoom para que todos os elementos fiquem visíveis.

Por sorte a API já possibilita fazer isso de forma automática utilizando a classe LatLngBounds.

Basta criar um loop para ler todas suas coordenadas e executar o método extend da classe LatLngBounds, passando como parâmetro um LatLng.

for each (var coor:XML in coordenadas.coordenada) {
 var latlng:LatLng = new LatLng(<a href="mailto:coor.@lat">coor.@lat</a>, <a href="mailto:coor.@long">coor.@long</a>);  
 latlngbounds.extend( latlng ); 
}

Após isso, a classe LatLngBounds retorna o ponto central através do método getCenter e o melhor nível de zoom através do método getBoundsZoomLevel. Em seguida é só chamar o método setCenter do seu map, passando estes valores como seus parâmetros.

map.setCenter( latlngbounds.getCenter( ), map.getBoundsZoomLevel( latlngbounds ) );

Realmente muito fácil!

Em seguida meu código completo para o exemplo. Abraços!


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="<a href="http://www.adobe.com/2006/mxml">http://www.adobe.com/2006/mxml</a>" layout="absolute" xmlns:ns1="com.google.maps.*">
 <mx:Script>    
  <![CDATA[
   import com.google.maps.controls.ZoomControl;
   import com.google.maps.controls.PositionControl;
   import com.google.maps.overlays.Marker;
   import com.google.maps.LatLngBounds;        
  
   import com.google.maps.LatLng;    
   import com.google.maps.Map;    
   import com.google.maps.MapEvent;    
   import com.google.maps.MapType; 
   
   private var coordenadas:XML =  <Coordenadas>
            <coordenada lat="40.725536353580054" long="-74.0279584510972"/>
            <coordenada lat="40.73699441500612" long="-73.95928881794303"/>
            <coordenada lat="40.74114835218548" long="-74.00160709841569"/>
            <coordenada lat="40.732606151031106" long="-73.96607223885681"/>
            <coordenada lat="40.72625822524804" long="-74.03205298109546"/>
            <coordenada lat="40.72575598523321" long="-74.02672837265969"/>
            <coordenada lat="40.74094766828434" long="-74.02550009149331"/>
            <coordenada lat="40.74386527348633" long="-73.99121805396857"/>
            <coordenada lat="40.72263440857748" long="-73.9793768120008"/>
            <coordenada lat="40.73356963372927" long="-74.02600361168126"/>
           </Coordenadas>;   
   
   private function onMapReady(event:Event):void {      
    
    this.map.addControl(new PositionControl());
    map.addControl(new ZoomControl());
    this.map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);  
    
    for each (var coor:XML in coordenadas.coordenada) {
     var latlng:LatLng = new LatLng(<a href="mailto:coor.@lat">coor.@lat</a>, <a href="mailto:coor.@long">coor.@long</a>);  
     map.addOverlay(new Marker(latlng));         
    }
     
   } 
   
   private function zoomToFit():void {
    
    var latlngbounds:LatLngBounds = new LatLngBounds();
    
    for each (var coor:XML in coordenadas.coordenada) {
     var latlng:LatLng = new LatLng(<a href="mailto:coor.@lat">coor.@lat</a>, <a href="mailto:coor.@long">coor.@long</a>);  
     latlngbounds.extend( latlng ); 
    }
    map.setCenter( latlngbounds.getCenter( ), map.getBoundsZoomLevel( latlngbounds ) );

   }  
   
  ]]>
 </mx:Script>

 <mx:Button label="Ajustar..." left="10" top="10" click="zoomToFit()"/>

 <ns1:Map top="40" bottom="10" left="10" right="10"  id="map" mapevent_mapready="onMapReady(event)" sensor="false"
  key=""/>
 
</mx:Application>