Criando gráfico de colunas com a API do Google

Veja o que vai dar

                Olá pessoal, hoje eu vou dar continuação no artigo anterior publicado por mim em dois sites, ecode10.com e imasters.com.br. O gráfico de hoje envolve colunas em vez de linhas, envolve a linguagem de programação C#, linguagem de interpretação JavaScript e Html.

Ferramentas utilizadas

 

Visual Studio 2012

Linguagem de programação: C#

Tipo do projeto: ASP.NET

 

                Depois de entender um pouco melhor sobre as APIs do Google, comecei a fazer gráficos de acompanhamento, gráficos financeiros e gráficos de acesso usando a API. Ela ajuda muito para quem não tem componente desenvolvido para gerar esse tipo de gráfico.

                É necessário ter acesso a Web para que o gráfico seja mostrado de forma correta. Na verdade, todo Javascript está localizado no Google e a função escrita chama ele passando os parâmetros e no final gera o gráfico. Acabei seguindo a mesma solução do artigo anterior, porque passando os valores de forma diferente o javascript do Google não funciona e não mostra o gráfico.

                Lembro que não entrou no mérito de conexão com o banco de dados, existem outros artigos no site www.ecode10.com que falam sobre isso de forma detalhada. O que fiz dessa vez foi retornar um número do banco de dados, na verdade dois números.

                Esse número é somado usando o SELECT SUM ou o COUNT e retornado do banco de dados em forma de INT.

 

HTML da página

                No HTML da página é feito pouca coisa. Adicionei o script do Google. Listagem 1.

<script type="text/javascript" src="https://www.google.com/jsapi">script>

Listagem 1 – Script do Google

                Depois adicionei um componente do C# e ASP.NET chamado Literal. Listagem 2.

<asp:Literal id="ltlResultado" runat="server" />

Listagem 2 – Componente Literal

                Para finalizar com o HTML, adicionei uma div responsável por gerar o gráfico e que o Google pede. Listagem 3.

<div id="chart_div" style="width: 800px; height: 500px;">div>

Listagem 3 – Adicionando Div para gerar gráfico

Página ASPNET (.aspx).

                Criei um método na página .aspx.cs chamado preencherDados(). Ele é responsável por buscar as informações no banco de dados e gerar o relatório. Para o usuário, ao entrar na página, o gráfico é mostrado e pra isso basta adicioná-lo ao Page_Load. Listagem 4.

Listagem 4 – Criando método preencherDados().

                A listagem 4 mostra no meio do método que os dados são buscados de alguma fonte, no meu caso, do banco de dados através de um método. A opção de Twitter e Site, são fixas, só os valores que são variáveis.

                Na variável options eu defini a cor do gráfico, #4C7951 (azul). No final, esse código é exibido na div chamda “chart_div”, aquela colocada no Html da página.  A última linha do método pega todo o valor e atribui ao componente Literal do ASP.NET.

                Depois de atribuir ao Literal, o valor chama a div que chama o script do Google. Bem simples, e ao mesmo tempo engenhoso. Talvez essa não seja a melhor forma de fazer, mas foi a única forma que consegui fazer funcionar o gráfico com C#. Quem quiser dar opinião e mostrar uma outra maneira, fique livre para comentar.

                O resultado final do nosso gráfico está na figura 1.