Google Visualization API

Finalmente me desprendi da versão antiga do Google Charts (aquele com imagens estáticas) e comecei a migrar minhas aplicações para utilizar o Google Charts Tools. Achei extremamente flexível e dinâmico. O Google Charts Tools na verdade faz parte de uma API maior chamada Google Visualization API, a democratização da visualização de dados, ao lado da democratização de vídeo (youtube) e a democratização de localização (maps).

A utilização do Google Visualization API para geração de gráficos (charts) é muito simples. Na página de Quick Start existe um tutorial muito bem explicado sobre como começar a utilizar a API de visualização de dados. No entanto, vou compartilhar com vocês o código que escrevi para gerar o gráfico exibido acima.

function atualizarGraficoFinanceiro() {
    var ano = $(".financeiro-ano").val();
    var url = GetPath('home/financeiro?ano=' + ano);
    jQuery.post(url, function (data) {
        var table = new google.visualization.DataTable();
        table.addColumn('string', 'Mês');
        table.addColumn('number', 'Entrada');
        table.addColumn('number', 'Saída');
        table.addRows(data.length);
        $(eval(data)).each(function (i, e) {
            table.setValue(i, 0, e.mes);
            table.setValue(i, 1, e.entrada);
            table.setValue(i, 2, e.saida);
        });
        var formatter = new google.visualization.NumberFormat({
            prefix: 'R$ ',
            decimalSymbol: ',',
            groupingSymbol: '.'
        });
        formatter.format(table, 1);
        formatter.format(table, 2);
        var grafico = new google.visualization.ComboChart(
            document.getElementById('financeiro-grafico')
        );
        grafico.draw(table, {
            title: 'Relatório Financeiro',
            width: 500,
            height: 300,
            seriesType: "area"
        });
    });
}

O mais importante nesse código para quem escrever sistemas aqui no Brasil está nas linhas 15 a 21. Essas linhas mostram como você pode formatar os números para serem exibidos em Real. Mais detalhes sobre a formatação de números pode ser encontrados no próprio site.

Anúncios

Google Charts com ASP.NET MVC

Após procurar algumas soluções de gráficos para incluir em uma aplicação MVC que estou desenvolvendo, usei como principal filtro o ítem simplicidade; então me deparei com a API para geração de gráficos (charts) da Google. Não vou entrar em detalhes (veja o link). Seu funcionamento é, basicamente, fazer uma requisição para uma imagem passando os parâmetros necessários na URL.

Por exemplo: essa URL…

https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=250×100&chl=Hello|World

…gera essa imagem:

Escrever essas URLs manualmente parece bem simples, porém experimente gerar um gráfico semelhante a este logo abaixo usando dados reais vindos de um banco de dados:

Gerar essa URL dinâmicamente não é algo muito amigável. Para facilitar esse trabalho, alguém teve a boa vontade de disponibilizar um wrapper escrito em C# para geração automática dessas URLs através de uma interface super simples.

Para usar essa biblioteca, basta fazer download aqui e adicionar uma referência a DLL ao seu projeto. Agora você já pode usar o “gerador de URL’s” para Google Chart API. Abaixo segue um exemplo de um extension method para geração dessas URLs de forma dinâmica.

public static class ChartHelpers 
{ 
    public static string DynamicChartUrl(this HtmlHelper helper) 
    { 
        BarChart chart = new BarChart(300, 150, BarChartOrientation.Vertical, 
            BarChartStyle.Grouped); 
        chart.SetData(new [] { 190, 1000, 500, 450, 1000, 2000,
                               190, 1000, 500, 450, 1000, 2000}); 
        chart.SetBarWidth(15); 
        return chart.GetUrl(); 
    } 
}

Agora basta adicionar a chamada ao método no código do ASP.NET MVC:

<img alt="Chart" src="@Html.DynamicChartUrl()" />

ps.: A google também possui outra API para geração de gráficos usando flash, bem mais rícos que esses, que apenas geram imagens estáticas. No entanto, ainda não cheguei a olhar seu funcionamento. Mais detalhes podem ser encontrados aqui.

%d blogueiros gostam disto: