ASP .NET - Criando gráficos dinâmicos com Google Chart, jQuery e Ajax (VB .NET)

 Neste artigo vou mostrar como podemos criar gráficos dinâmicos usando a API Google Chart em aplicações ASP .NET usando a linguagem VB .NET, jQuery e Ajax.

Quando se trata de apresentar dados  "Uma imagem vale mais do que mil palavras" e por isso os gráficos são tão usados para esta finalidade. Dessa forma ter uma ferramenta simples, rápida e grátis e tudo o que um desenvolvedor deseja para realizar o seu trabalho em aplicações web.

Pois foi pensando nisso que a Google criou a API do Google Chart Tools, também conhecida como Chart API, que faz parte do projeto Google Visualization que também engloba a ferramenta Interactive Charts.

Para usar a ferramenta basta você chamar a sua URL enviando enviando os dados do gráfico via query string e pronto. A chamada retorna a imagem do gráfico.

Se você esta desconfiando da simplicidade copie o código abaixo em um arquivo .html e abra em qualquer navegador:

<img src="http://chart.apis.google.com/chart?chxt=x,y&cht=bvs&chd=t:60,70,85,65,40&chco=76A4FB&chls=2.0&chs=180x150&chxl=0:|Jan|Fev|Mar|Abr|Mai" alt="Macoratti .net" />

E você verá o gráfico de barras conforme mostra a figura abaixo:

Observe que o gráfico foi montado com os eixos x e y e os rótulos (Jan, Fev, Mar, etc.) e os valores nas barras. Note também que o tamanho do gráfico esta definido na URL (380x250).

Da mesma forma que criamos esse gráfico de barras simples podemos criar gráficos de pizza, linha, colunas, etc.

Então se você deseja se aprofundar no assunto consulte a documentação da API neste link : https://developers.google.com/chart/?hl=pt-br

Neste artigo eu vou usar os recursos da API do Google Chart para criar gráficos em páginas ASP .NET usando a linguagem VB .NET e jQuery.

Recursos usados:

Criando o projeto ASP .NET no Visual Studio Express 2013for web

Abra o VS Express 2013 for web e clique em New Project;

A seguir selecione a linguagem Visual Basic e o template Web -> ASP .NET Web Application;

Informe o nome ChartGoogle_AspNet e clique no botão OK;

A seguir selecione o template Empty e marque Web Forms e clique no botão OK;

Vamos agora incluir uma página Web Form no projeto clique no menu PROJECT e a seguir Add New Item;

Selecione Web Form e informe o nome Default.aspx e clique no botão Add;

Para este artigo eu vou criar uma tabela chamada DadosGrafico no banco de dados Cadastro.mdf do SQL Server.

Abaixo vemos a estrutura desta tabela e alguns dados que foram inseridos para utilização na criação do nosso gráfico.

A seguir vamos definir no arquivo code-behind  Default.aspx.vb um método chamado GetDadosGrafico que iremos decorar com o atributo WebMethod de forma que o mesmo será exposto como parte de um XML Web Service.

Defina o código abaixo no arquivo Default.aspx.vb :

Imports System.Web.Services
Imports System.Data
Imports System.Data.SqlClient
Partial Class _Default
    Inherits System.Web.UI.Page
    <WebMethod> _
    Public Shared Function GetDadosGrafico() As List(Of DadosDetalhes)
        Dim dt As New DataTable()
        Using con As New SqlConnection("Data Source=(LocalDB)\v11.0;Initial Catalog=Cadastro;Integrated Security=True")
            con.Open()
            Dim cmd As New SqlCommand("select nome, total=valor from DadosGrafico order by total desc", con)
            Dim da As New SqlDataAdapter(cmd)
            da.Fill(dt)
            con.Close()
        End Using
        Dim listaDados As New List(Of DadosDetalhes)()
        For Each dtrow As DataRow In dt.Rows
            Dim details As New DadosDetalhes()
            details.NomePais = dtrow(0).ToString()
            details.Total = Convert.ToInt32(dtrow(1))
            listaDados.Add(details)
        Next
        Return listaDados
    End Function
End

Public Class DadosDetalhes
    Public Property NomePais() As String
    Public Property Total() As Integer
End Class

Note que no arquivo code-behind temos a definição do método GetDadosGrafico() que acessa o banco de dados Cadastro.mdf e retorna os dados da tabela DadosGrafico.

O código monta uma lista do tipo DadosDetalhes que é uma classe que foi definida para representar os dados que vamos usar no gráfico.

Agora vamos abrir o arquivo Default.aspx no modo Source e definir entre as tags <head> o script para referenciar a biblioteca jQUery e a API GoogleChart:

     <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['corechart'] });
    </script>

 

Para exibir os gráficos do Google Chart precisamos carregar 3 bibliotecas:

  1. Google JSAPI API
  2. Google Visualization library
  3. A biblioteca para os gráficos - corechart

A seguir vamos definir uma função usando jQuery entre as tagas <head> que irá fazer uma chamada a partir do cliente para obter o objeto JSON contendo os dados a serem exibidos no gráfico. (Note que eu não preciso serializar a string JSON).

 <script type="text/javascript">
        $(function () {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                url: 'Default.aspx/GetDadosGrafico',
                data: '{}',
                success:
                    function (response) {
                        drawchart(response.d);
                    },
                error: function () {
                    alert("Erro ao carregar dados! Tente novamente.");
                }
            });
        })
        function drawchart(dataValues) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Column Name');
            data.addColumn('number', 'Column Value');
            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].NomePais, dataValues[i].Total]);
            }
            new google.visualization.PieChart(document.getElementById('chartdiv')).
                draw(data, { title: "JcmSoft - Participação Mercado por País" });
        }
    </script>

Observe que o código jQuery chama o método GetDadosGrafico e retornar os dados JSON para a seguir chamar a função drawchart() passando os valores retornados para exibir no gráfico.

Na função drawchart o DataTable é inicializado, as colunas são adicionados a ele, e, em seguida, os dados são inseridos. Finalmente, o novo PieChart é inicializado e seu método draw é invocado.

O método PieChart da API do Google indica que vamos criar uma gráfico de pizza. Para criar outros tipos de gráficos basta usar outros métodos como:

Para renderizar o gráfico precisamos definir uma <div> na página Default.aspx identificada por 'chartdiv' (pode ser qualquer nome).

 
 ...
body>
    <form id="form1" runat="server">
        <h2>Macoratti .net</h2>
        <hr />
        <div id="chartdiv" style="width: 600px; height: 350px;">
        </div>
    </form>
</body>
...

Abaixo temos o código completo da página Default.aspx:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery Grafico de Pizza Google com asp.net</title>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['corechart'] });
    </script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                url: 'Default.aspx/GetDadosGrafico',
                data: '{}',
                success:
                    function (response) {
                        drawchart(response.d);
                    },
                error: function () {
                    alert("Erro ao carregar dados! Tente novamente.");
                }
            });
        })
        function drawchart(dataValues) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Column Name');
            data.addColumn('number', 'Column Value');
            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].NomePais, dataValues[i].Total]);
            }
            new google.visualization.PieChart(document.getElementById('chartdiv')).
                draw(data, { title: "JcmSoft - Participação Mercado por País" });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h2>Macoratti .net</h2>
        <hr />
        <div id="chartdiv" style="width: 600px; height: 350px;">
        </div>
    </form>
</body>
</html>
 

Executando o projeto ASP .NET iremos obter o seguinte resultado:

Usando o método ColumnChart  e definindo  data.addColumn('number', 'Paises'); teremos o seguinte gráfico:

 

E usando o método LineChart e definindo  data.addColumn('number', 'Paises'); teremos o resultado a seguir:
 

 

Pegue o projeto completo aqui:   ChartGoogle_AspNet.zip

João 3:17 Porque Deus enviou o seu Filho ao mundo, não para que julgasse o mundo, mas para que o mundo fosse salvo por ele.

João 3:18 Quem crê nele não é julgado; mas quem não crê, já está julgado; porquanto não crê no nome do unigênito Filho de Deus.

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

 

 

             Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter
 

Referências:

José Carlos Macoratti