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
%d blogueiros gostam disto: