[Parte 6] Capítulo 7: Como inserir grafico em uma pagina web

Nos exemplos anteriores, foi mostrado como criar gráficos renderizados diretamente no browser como uma figura. Em muitos casos, é necessário exibir o gráfico como parte da página, não somente sozinho no browser.

A primeira etapa para isso é criar uma página onde o gráfico seja gerado, como visto anteriormente.

A segunda etapa consiste em incorporar o resultado em outra página.

Para exibir o gráfico, pode-se utilizar um elemento HTML <img>, da mesma forma como são exibidas as imagens. Entretanto, ao invés de referenciar um arquivo .jpg ou .png, o elemento <img> irá referenciar um arquivo .cshtml que contém o helper que irá gerar o gráfico.

Quando a página é executada, o elemento <img> obtém a saída do helper e renderiza o gráfico.

1 - Crie uma página chamada ExibirGrafico.cshtml.
2 - Substitua o código existente pelo a seguir:

O código utiliza o elemento <img> para exibir o gráfico criado anteriormente no post "Como criar gráficos a partir de dados contidos em um array".

3 - Execute a página no browser. O arquivo ExibirGrafico.cshtml exibe a imagem do gráfico baseado no código contido no arquivo GraficoArrayBasico.cshtml

[Parte 5] Capítulo 7: Como criar gráficos a partir de um banco de dados

Se os dados para o gráfico estão em um banco de dados, é possível executar uma query e vincular ao gráfico os dados retornados nessa busca.

Esse procedimento mostra como ler e exibir os dados a partir do banco de dados utilizado nos posts do capítulo 6.

1 - Adicione uma pasta App_Data no diretório do site se essa pasta ainda não existir.
2 - Na pasta App_Data, adicione o banco de dados Padaria.sdf criado nos exemplos do capítulo 6.
3 - Crie um novo arquivo chamado GraficoDadosQuery.cshtml.
4 - Substitua a marcação pela marcação a seguir:

Inicialmente o código abre o banco de dados Padaria e o atribui à variável chamada db. Essa variável representa um objeto que pode ser utilizado para ler e escrever no banco de dados.

Em seguida, o código executa uma query SQL para obter o nome e o preço do produto. O código cria um novo gráfico e o mesmo é preenchido chamando o método DataBindTable. Esse método admite dois parâmetros. O dataSource é para os dados vindos da query e o parâmetro xField permite escolher qual coluna será utilizada para o eixo x do gráfico.

De forma alternativa, pode ser utilizado o método AddSeries para o helper Chart. O AddSeries permite escolher os parâmetros xValue e yValues. Neste caso, o método AddSeries pode ser utilizado assim:

Os dois métodos produzem o mesmo resultado. O AddSeries é mais flexível porque através dele é possível especificar o tipo do gráfico e seus dados de forma mais explícita. Já o DataBindTable é utilizado quando não é necessária flexibilidade extra.

5 - Execute a página no browser. Ambos os métodos retornarão a seguinte página:

[Parte 3] Capítulo 7: Elementos de um gráfico

Gráficos podem exibir elementos adicionais como legendas, séries, títulos, entre outros. A figura seguinte exibe alguns dos elementos que podem ser alterados e personalizados quando utilizamos o helper Chart.

Os posts seguintes mostrarão como configurar vários desses elementos.

[Parte 2] Capítulo 7: O helper Chart

Quando é preciso exibir dados de formna grafica, pode ser utilziado o helper Chart. Através dele pode-se renderizar uma imagem e exibir dados de tipos variados.

O helper oferece suporte à variadas opções para formatação e legenda. Com o helper Chart é possível trabalhar com mais de 30 tipos de gráficos, incluindo os tipos de gráficos disponíveis em ferramentas como o Microsoft Excel - gráficos de área, gráficos de barra, gráficos de colunas, gráficos de linha e graficos de pizza.

Exemplo de gráfico de área e gráfico de barras

Exemplo de gráfico de coluna e gráfico de linha

[Parte 1] Capítulo 7: Exibindo dados em um gráfico

Nos capítulos anteriores, vimos como exibir dados manualmente e em um grid. Este capítulo explica como exibir dados em um gráfico.

Veremos:
- Como exibir dados em um gráfico.
- Como estilizar gráficos usando temas internos.
- Como salvar gráficos e como mantê-los em cache para um melhor desempenho.

Estes são os recursos de programação do ASP.NET introduzidas no capítulo:
- O helper Chart.

[Parte 5] Capítulo 6: Utilizando paginação com WebGrid

Ao invés de exibir todos os dados em um grid de uma vez só, é possível utilizar a paginação de dados. Para pequenas quantidades de dados a serem trabalhados, como é o caso dos exemplos utilizados, a paginação não é tão importante. Mas para grandes quantidades de dados e linhas a serem exibidas, a paginação é muito útil.

Para renderizar um grid utilizando paginação, é necessário especificar um parâmetro adicional ao helper WebGrid.

1- No site, crie uma nova página chamada PaginacaoWebgrid.cshtml
2- Substitua a marcação pelo código a seguir:

O código adiciona o parametro rowsPerPage quando o objeto WebGrid é criado. Esse parâmetro permite definir a quantidade de linhas que serão exibidas na tabela. Incluindo o parâmetro, automaticamente será ativada a paginação.

3 - Execute a página no navegador. Note que existe apenas tres linhas na "página". Através dos botões abaixo da tabela, é possível navegar pelas "páginas" e acessar o restante dos dados.

[Parte 4] Capítulo 6: Como formatar o WebGrid como um todo

Além de especificar como as colunas individuais devem ser exibidas você pode formatar o Grid inteiro. Para fazer isso, é necessário definir as classes CSS que especificam como a tabela será ao ser renderizada (além de estilos definidos para colunas individualmente).

1 - No site, crie uma nova página chamada FormatarTabelaWebGrid.cshtml.
2 - Substitua o código existente pelo código a seguir:

Esse código se baseia no exemplo anterior, mostrando como criar novas classes de estilo. O método grid.GetHtml em seguida atribui esses estilos para vários elementos utilizando TableStyle, HeaderStyle, e os parâmetros AlternatingRowStyle.

3 - Execute a página no navegador. Dessa vez, o grid é exibido utilizando diferentes estilos que se aplicam à tabela como um todo, como por exemplo, cores diferentes em linhas alternadas.

[Parte 3] Capítulo 6: Como formatar colunas específicas e exibir com o helper WebGrid

Por padrão, o helper WebGrid exibe todas as colunas de dados que são retornadas pela consulta SQL. É possível personalizar a exibição desses dados das seguintes maneiras:

- Especificar quais colunas que serão exibidas pelo helper e em qual ordem. Muito útil para quanod desejamos exibir somente um subconjunto de colunas retornadas pela consulta SQL.
- Especificar as instruções de formatação dos dados a serem exibidos como, por exemplo, adicionar o simbolo de moeda (R$) para dados que representem dinheiro.

Este procedimento mostrará como utilizar as opções do helper WebGrid para formatar colunas individualmente.

1 - No site, crie uma nova página chamada FormatarColunaWebGrid.cshtml.
2 - Substitua a marcação pela seguinte:

Este exemplo é como o exemplo do post anterior (Como exibir dados utilizando o helper WebGrid), exceto pela tabela ser renderizada chamando o método grid.GetHtml onde são especificadas as coluans a serem exibidas e como serão exibidas.

O código a seguir mostra como especificar as colunas e a ordem em que serão exibidas:


@grid.GetHtml(
                columns: grid.Columns(
                    grid.Column("Nome", "Produto", style: "produto"),
                    grid.Column("Descrição", format:@<i>@item.Descrição</i>),
                    grid.Column("Preço", format:@<text>R$@item.Preço</text>)
                )
 )



Para dizer ao helper quais colunas devem ser exibidas, devemos incluir um parametro de colunas para o método GetHtml e passar para ele uma coleção de colunas. É possível especificar individualmente uma coluna para ser exibida incluindo um objeto Grid.Column e passar o nome da coluna de dados desejada.

Neste exemplo, o código faz com que o objeto WebGrid exiba apenas tres colunas: Nome, Descrição e Preço. Essas colunas devem ser incluídas na consulta SQL, caso contrário, o helper não será capaz de exibí-las.

Note que junto ao nome da coluna, podem ser passadas outras instruções de formatação. No exemplo, o código exibe a coluna Nome utilizando o codigo a seguir:


grid.Column("Nome", "Produto", style: "produto"),

Esse código diz ao helper para:

- Exibir os valores da coluna Nome
- Utilizar a string "Produto" como título da coluna, ao invés do nome padrão da coluna
- Aplicar a classe CSS chamada "produto". Na marcação da página, essa classe CSS define a largura da coluna como 200px e a fonte em negrito.

O exemplo para a coluna Descrição utiliza o seguinte código:

grid.Column("Descrição", format:@<i>@item.Descrição</i>),

O trecho acima solicita ao helper que exiba a coluna Descrição. Também especifica uma formatação utilizando uma expressão que envolve o valor da coluna em uma marcação HTML:

@<i>@item.Descrição</i>

O exemplo para a coluna Preço mostra uma outra variação para especificar as propriedades de formatação:

grid.Column("Preço", format:@<text>R$@item.Preço</text>)

3 - Execute a página e observe as alterações:

[Parte 2] Capítulo 6: Como exibir dados utilizando o helper WebGrid

Este procedimento mostrará como exibir dados em um helper WebGrid utilizando configurações simples.

1 - Abra o website "Padaria" criado nos posts anteriores. Se você não possui as páginas criadas anteriormente, não será necessário criá-las. Entretanto, será necessário o banco de dados "padaria.sdf", criado no post Como criar e configurar um banco de dados. Este arquivo deve estar na pasta App_Data do site que você estiver trabalhando.

2 - Na pasta raiz do site, crie um arquivo CSHTML chamado WebGridBasico.cshtml.

3 - Substitua a marcação pela marcação abaixo:

Em primeiro lugar, o código abrirá o banco de dados "padaria.sdf" e criará uma declaração SQL:

SELECT * FROM Produto ORDER BY Id

A variável chamada "dado" será populada com os dados retornados pela declaração SELECT. O helper WebGrid é utiolizado então para criar uma tabela a partir dos dados:

var dado = db.QUery(selectQueryString);
var grid = new WebGrid(dado);

O código cria um novo objeto do tipo WebGrid e o atribui à variável "grid". No corpo da página, os dados serão renderizados utilizando o helper WebGrid utilizando o seguinte código:

@grid.GetHtml()

4 - Execute a página. O WebGrid renderizará uma tabela HTML que contem os dados selecionados através da declaração SELECT.

[Parte 1] Capítulo 6: O helper WebGrid

Nos posts anteriores, foi possível trabalhar com a exibição de dados em uma página, realizando todo o trabalho. Existe uma maneira mais fácil de se fazer isso, utilizando o helper WebGrid.

O helper WebGrid renderiza uma tabela HTML para exibir os dados, oferece suporte a opções de formatação, criação de páginas a partir de dados e para criação de filtros que auxiliam os usuários a organizar os dados clicando no cabeçalho das colunas.

Nos próximos posts veremos:

- Como especificar quais colunas de dados devem ser exibidas e qual o formato dessas colunas
- Como aplicar estilos em um grid como um todo
- Como criar páginas através de dados

[Parte 7] Capítulo 3: Criando e utilizando um Helper

Uma outra opção para criar uma aparência consistente em seu site é criar um helper personalizado. Como vimos no post Instalando helpers com package manager. Um helper é um componente que permite realizar uma tarefa utilizando uma única linha de código.

O ASP.NET inclui muitos helpers e utilizaremos muitos deles. O helper pode auxiliar na criação de uma aparência consistente permitindo que utilizemos um bloco comum de código em várias páginas do site.

Suponhamos que será necessário criar um item de nota que ficará separado dos parágrafos, o qual será criado utilizando um elemento <div> e seu estilo será definido como um box com uma borda.

Para não adicionar a mesma marcação em todas as páginas, podemos criar um helper e ele irá inserir a nota com apenas uma linha de código, onde for necessário. A utilização desse recurso fará com que o código das páginas seja simples e mais fácil de ler.

Outro ganho com a criação de helpers é a facilidade para dar manutenção no site, uma vez que se for necessário alterar a aparência das notas, será possível alterar em apenas um local.

Esse procedimento exemplifica como criar um helper responsável por criar notas, como foi descrito acima. Este é um exemplo simples, mas um helper personalizado pode ter incluso qualquer marcação e código ASP.NET.

1 - No diretório principal, crie uma pasta chamada "App_Code", caso ela ainda não exista.
2 - Na pasta App_code, crie um novo arquivo chamado MeuHelper.cshtml
3 - Substitua o código gerado pelo código abaixo:

Esse código utiliza a sintaxe @helper para declarar um novo helper chamado InserirNota. Esse helper específico permite passar um parâmetro chamado content que pode conter a combinação de texto e marcação. O helper insere uma string no corpo da nota utilizando a variável @conteudo.

4 - Salve e feche o arquivo.

O próximo procedimento mostra como utilizar um helper personalizado para inserir uma nota em uma página web.

1 - No diretório principal, crie um arquivo chamado TesteHelper.cshtml
2 - Adicione o seguinte código no arquivo:

Para chamar o helper que acabou de ser criado, utilize @ seguido pelo nome do arquivo onde o helper está, seguido por um ponto e em seguida o nome do helper. O texto entre aspas passado entre parênteses será o texto exibido na nota.

3 - Salve as alterações e execute a página. O helper irá inserir a nota no exato local onde foi chamado.

[Parte 6] Capitulo 1: Começando com WebMatrix Beta e páginas ASP.NET

UTILIZANDO CÓDIGO DE PROGRAMAÇÃO EM PÁGINAS ASP.NET


Nesse procedimento iremos criar uma página com código simples, que exiba a data e a hora do sistema na tela. Este exemplo irá introduzir o conceito Razzor Syntax, que adiciona o código de programação à pagina HTML ou ASP.NET. O exemplo irá utilizar um dos helpers instalados no post anterior.

Abra o arquivo "default.cshtml" e adicione o trecho em destaque abaixo:

Esta página contém as marcações HTML e o caracter "@" identifica o código da programação ASP.NET.

Salve a página e clique em "Run" para rodar a página com as alterações. O resultado será:

Uma única linha de comando adicionada ao código da página foi capaz de capturar a data do sistema, formatá-la e enviá-la ao navegador.

Se quisermos algo mais complexo, como mostrar a rolagem de uma lista de posts do twitter de alguém que você selecionar. Podemos utilizar um helper para isso, simplificando as tarefas relacionadas ao nosso objetivo. Neste caso, tudo que temos que fazer é buscar e exibir um feed do twitter.

Vamos criar então um novo arquivo CSHTML, chamado twitterFeed.cshtml:

No código da página criada, é necessário fazer as alterações para que fique como na figura abaixo:

Esse html cria um box para receber o nome do twitter a ser exibido e um botão para realizar a entrada de dados. Por esse motivo, o trecho relacionado a esses elementos está dentro do primeiro bloco <div>.

No segundo bloco <div> temos o código da página. Para marcar o código utilizamos sempre o caracter "@". Quando a página for carregada, bem como quando o usuário clicar no botão sem digitar nada, será exibido por padrão o twitter da Microsoft. Ao digitar um twitter válido, as postagens serão exibidas abaixo dos campos.

Ao executar a página:

Ao digitar um twitter válido:

[Parte 5] Capitulo 1: Começando com WebMatrix Beta e páginas ASP.NET

INSTALANDO HELPERS COM PACKAGE MANAGER


Agora que já temos o WebMatrix instalado e um site básico criado, vamos instalar as ASP.NET Helpers Library. Essa Library contém componentes que simplificam tarefas comuns da programação e vão ser utilizadas nesse tutorial.

O procedimento a seguir mostra como utilizar o Package Manager na instalação.

1 - Rode a página default.cshtml criada na seção anterior.
2 - Quando a página for aberta no seu navegador, remova da barra de endereços "default.cshtml" e substitua por "_Admin"
3 - Aperte "Enter". Se for a primeira vez que você entra nessa página, será oferecido para que você crie uma senha.
4 - Após digitar a senha, caso seja a primeira vez que você executa o procedimento, será solicitada uma checagem, a seguinte tela será exibida:

5 - Esta página solicita que alteremos o nome do arquivo "_Password.config" presente no diretório "/App_Data/Admin" para "Password.config". Para que isso seja feito no WebMatrix, no painel inferior esquerdo devemos selecionar a opção "Site".

6 - Para alterar o nome do arquivo e validar a checagem, devemos clicar no caminho "Path", encontrar o arquivo e substituir o nome "_Password.config" por "Password.config". Em seguida, podemos voltar à página e clicar para validar a modificação.

7 - Seremos então redirecionados para uma fazer login em outra página:

8 - Após digitar a senha cadastrada anteriormente, teremos acesso ao Package Manager:

9 - Clique no dropdown e selecione "Online". Essa opção irá listar os itens disponíveis para download que você poderá instalar para trabalhar com eles. Caso você já tenha alguma biblioteca instalada, poderá selecionar "Update" para verificar se há atualizações disponíveis.

10 - Devemos procurar e selecionar o "ASP.NET Web Helpers Library 1.15". Após selecionado, clicar em "Install". Será exibida uma mensagem indicando que a instalação foi concluída com êxito.

11 - Repita o passo 10 e procure pelo pacote "Facebook.Helper 1.0" e instale. Aguarde a mensagem indicando o êxito da instalação.