segunda-feira, 6 de fevereiro de 2012

Android - Gerando gráficos com Google Chart API

Olá,


Atualmente todo aplicativo comercial que se preze necessita exibir dados em formas de gráficos e hoje vou mostrar como desenvolver gráficos para Android utilizando a Api Google Chart, a princípio é muito fácil, para isto basta utilizar um controle WebView e habilitar a permissão para utilização de INTERNET.

No projeto apresentado abaixo os dados do gráfico estão fixos no fonte, cabe a você montar em seu aplicativo uma string dinâmica com dados reais e passar como URL no método loadUrl do componente WebView, abaixo seguem todos os fontes utilizados no sistema.


Arquivo main.xml, layout da única tela apresentada nesse projeto:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

    <WebView
        android:id="@+id/wvGrafico"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"/>    
</LinearLayout>

Arquivo AndroidManifest.xml, contém configurações iniciais do aplicativo:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="br.com.EscoladeAndroid.Grafico"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="8" />

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".main"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    <activity android:name="org.achartengine.GraphicalActivity"/> 

    </application>
    <uses-permission android:name="android.permission.INTERNET"></uses-permission>    
</manifest>

Arquivo main.java, classe que irá exibir o gráfico:
package br.com.EscoladeAndroid.Grafico;

import android.app.Activity;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.widget.Toast;

public class main extends Activity {
    WebView wvGrafico;
    String strURL;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        strURL = "https://chart.googleapis.com/chart?" + 
            "cht=lc&" + //define o tipo do gráfico "linha"
            "chxt=x,y&" + //imprime os valores dos eixos X, Y
            "chs=300x300&" + //define o tamanho da imagem
            "chd=t:10,45,5,10,13,26&" + //valor de cada coluna do gráfico
            "chl=Jan|Fev|Mar|Abr|Mai|Jun&" + //rótulo para cada coluna
            "chdl=Vendas&" + //legenda do gráfico
            "chxr=1,0,50&" + //define o valor de início e fim do eixo 
            "chds=0,50&" + //define o valor de escala dos dados 
            "chg=0,5,0,0&" + //desenha linha horizontal na grade
            "chco=3D7930&" + //cor da linha do gráfico 
            "chtt=Vendas+x+1000&" + //cabeçalho do gráfico
            "chm=B,C5D4B5BB,0,0,0"; //fundo verde 

        
        //Abaixo seguem outros exemplo de gráfico:
        //strURL = "https://chart.googleapis.com/chart?cht=lc&chxt=x,y&chs=300x300&chd=t:10,45,5,10,13,26&chl=Janeiro|Fevereiro|Marco|Abril|Maio|Junho&chdl=Vendas%20&chxr=1,0,50&chds=0,25&chg=0,5,0,0&chco=3D7930&chtt=Vendas+x+1000&chm=v,FF0000,0,::.10,4";
        //strURL = "http://chart.apis.google.com/chart?cht=bhg&chs=550x400&chd=t:100,50,115,80|10,20,15,30&chxt=x,y&chxl=1:|Janeiro|Fevereiro|Marco|Abril&chxr=0,0,120&chds=0,120&chco=4D89F9&chbh=35,0,15&chg=8.33,0,5,0&chco=0A8C8A,EBB671&chdl=Vendas|Compras";
        //strURL = "https://chart.googleapis.com/chart?cht=lc&chxt=x,y&chs=700x350&chd=t:10,45,5,10|30,35,30,15|10,10.5,30,35&chl=Janeiro|Fevereiro|Marco|Abril&chdl=Vendas|Compras|Outros&chxr=1,0,50&chds=0,50&chg=0,5,0,0&chco=DA3B15,3072F3,000000&chtt=grafico+de+vendas";
        //strURL = "https://chart.googleapis.com/chart?cht=p3&chs=200x90&chd=t:40,45,5,10&chl=Jan|Fev|Mar|Abr";
        //strURL = "http://chart.apis.google.com/chart?chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec&chxt=x,y&chs=300x300&cht=r&chco=FF0000&chd=t:63,64,67,73,77,81,85,86,85,81,74,67,63&chls=2,4,0&chm=B,FF000080,0,0,0";

        wvGrafico = (WebView)findViewById(R.id.wvGrafico);
        wvGrafico.loadUrl(strURL);
        
    }
}

Ao executar esse aplicativo teremos a seguinte imagem:


Agora vamos ver uma pequena explicação sobre cada um dos principais atributos de nosso gráfico:


Chart Type (cht) : tipo de gráfico que será utilizado (pizza (p, p3, pc), barra (bhs, bvs, bhg, bvg, bvo), linha (lc, ls, lxy))

Chart Size (chs) : define o tamanho em pixels para seu gráfico (width x height)

Chart Data (chd) : dados que você irá apresentar em seu gráfico

Chart Colour (chco) : cor ou cores que serão utilizados em seu gráfico deve-se utilizar a representação Hex (RRGGBB)

Chart Labels (chl) : define os rótulos que seu gráfico terá, normalmente você irá utilizar um rótulo para cada Dado utilizados em (chd)

Chart Grid Lines (chg) : desenha linhas dentro de seu gráfico para facilitar e leitura de cada gráfico, esse atributo possui 4 parâmetros que são chg = <verticalGridLines>, <horizontalGridLines>, <lineSize>, <gapSize>

Char Title (chtt) : define o título do gráfico

Chart Legend (chdl) : define a legenda do gráfico, normalmente será definida por uma barra lateral vertical

Chart Data Scale (chds) : define os valores de mínimo e máximo para o gráfico, qualquer valor maior que o máximo será exibido como se fosse o máximo.

Char Axis Range (chxr) : determina de início e fim do eixo, esse atributo possui três parâmetros, o primeiro determina qual eixo está sendo utilizado, o segundo e o terceiro definem a própria faixa de atuação do gráfico

Chart Shape Markers (chm) : Preenche o conteúdo do gráfico com uma cor definida, exemplo: (chm=B,C5D4B5BB,0,0,0) ou (chm=v,FF0000,0,::.10,4)

Char Visible Axis (chxt) : mostra os números dos eixos X,Y



Referência:
http://code.google.com/intl/pt-BR/apis/chart/image/docs/gallery/chart_gall.html


Desenvolvi o jogo Circus Puzzle Free ele é um quebra-cabeça e está publicado no Android Market, agradeço a todos que baixarem, jogarem e comentarem.


Desenv com qualidade!

8 comentários:

Ueslei Barroso disse...

Olá! Belo tutorial, mas queria saber se é necessário utilizar uma URL para gerar esses gráficos. Eu posso gerar gráficos com valores inseridos manualmente no aplicativo sem que seja necessário utilizar uma URL e Internet?
Até mais!Grato!

Marcio de Souza disse...

Ueslei,

Para gerar gráficos através das API's do Google parece que sim... também estou procurando uma forma de gerar gráficos de forma offline.

Assim que eu achar um bom exemplo pode ter certeza que eu posto aqui no blog.

Até mais...

Ueslei Barroso disse...

Olá Márcio! Encontrei nesse link uma API que desenvolve gráficos, eu ainda não li as especificações e tutoriais no site, mas provavelmente trabalhe offline.http://androidplot.com/wiki/Home

Diogo disse...

Buenas, fiz como mostra o exemplo e recebo o seguinte erro (já traduzido):
503. Isso é um erro.

O serviço que você requisitou não está disponível no momento.

Serviço erro -27. Isso é tudo o que sabemos.

Sabe me dizer o que pode ser...
Não encontrei resposta na net...
Obrigao

Diogo disse...

Buenas, já resolvi... Desculpa a "teimozia", mas como minha tela do grafico já estava montada, eu não quiz alterar o RelativeLayout...Então copiei o xml do exemplo e funcionou perfeitamente.. Obrigado...

Diogo disse...

Olá, será que existe alguma função para desenhar uma linha fixa no grafico? Ou nesse tipo de gráfico tem como colocar mais uma linha...

Diogo disse...

Ok, já descobri...

Divide-se os valores das colunas atrevés do "|".

"chd=t:34,34,34,34,34,15,34,34,34|24,34,56,77,88,9,66,3,23&"

Para diferenciar as cores das linhas:
chco=3D7930,FF0000&

Unknown disse...

Márcio, parabéns pelo blog, tem me ajudado bastante
Eu não estou acreditando que é tão fácil assim gerar gráfico, que legal