Uma dúvida comum a usuários (especialmente os sponsors) quanto ao desenvolvimento web é sobre a possibilidade de se criar gráficos ricos para demonstrar estatísticas e resultados. Uma crença comum é acreditar que sistemas web dificultam esse tipo de requisito, que é muito bem atendido por componentes no Delphi ou no Visual Basic.

O que é preciso saber, é que a web é antes de tudo, modular. Componentes criados numa linguagem podem ser absorvidos e utilizados em outras linguagens ou plataforma de maneira transparente, como ocorrem diversos projetos. Não é nenhuma novidade encontrar projetos em Java ou Ruby com a gerência de configuração feita pelo Trac [1]. O Flash também é uma poderosa ferramenta para se integrar a outras plataformas.

E é exatamente sobre um componente criado em Flash que eu quero falar, o XML/SWF Charts [2]. O nome é meio, digamos, "genérico", mas não se engane pelo nome, pois ele é rico e amigável de se trabalhar.

O XML/SWF Charts não é livre. Ele está disponível gratuitamente com algumas limitações e pode ser adquirido por um valor baixo para liberar outros recursos (e evitar o link do clique sobre o gráfico).

Resolvida a questão da licença, passemos a um exemplo:

Um gráfico semelhante ao acima está disponível no You Are Hunted [3], um site do qual sou um dos criadores.

Colocando a mão na massa

Antes de tudo é preciso fazer o download do pacote do XML/SWF Charts, que você pode fazer em [4]. Ao concluir o download, descompacte o arquivo em sua pasta MEDIA, de preferência em uma subpasta chamada charts.

Um gráfico de barras simples

Para fazer o gráfico de barras, foi preciso escrever três códigos: a view, o HTML de embed do objeto e o XML que fornece os dados para o gráfico. Veja abaixo como ficou:

URLs

(r'^pagina/$', 'graficos.app.views.pagina'),
(r'^grafico.xml$', 'graficos.app.views.grafico_xml'),
(r'^media/(?P.*)', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT}),

Views

from django.shortcuts import render_to_response

def pagina(request):
    return render_to_response(
            'pagina.html',
            )

def grafico_xml(request):
    vocations_stats = []
    vocations_stats.append({'title': 'Knight', 'value': 15})
    vocations_stats.append({'title': 'Paladin', 'value': 25})
    vocations_stats.append({'title': 'Sorcerer', 'value': 5})
    vocations_stats.append({'title': 'Druid', 'value': 10})

    return render_to_response(
            'grafico.xml',
            locals(),
            )

como você pode notar, a view é extremamente simples, com um código comum de resgate de uma coleção de dados.

Template HTML que exibe o gráfico

XML

    
    
    

    
    
        
            Titulo
            {% for vocation in vocations_stats %}
            {{ vocation.title }}
            {% endfor %}
        
        
            Total de Membros
            {% for vocation in vocations_stats %}
            {{ vocation.value }}
            {% endfor %}
        
    
    
    
    3d column
    

    
    

    
        558855
        768bb3
    
    

Para compreender melhor a sintaxe do XML acima, veja em [5] e [6].

Como você pode notar, é bastante simples a criação de um gráfico com o XML/SWF Charts, basta pegar o jeito com a sintaxe, o que é feito lendo a documentação. É possível criar gráficos de dezenas de tipos diferentes, que vão de simples pizzas, barras, colunas e linhas a complexos gráficos de área, rede e Gantt. Para outros exemplos, veja em [7]

Links relacionados