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!