Comunicado

Bom, pessoal... Fiz uma atualização para o Webmatrix 2 e estou tendo problemas para rodar os projetos. Tenho alguns posts prontos para colocar aqui, mas só conseguirei postar quando resolver esse problema.

Peço desculpas a todos e espero em breve poder voltar a postar.

Abraços

[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

Declarações "using" e nomes completamente qualificados (fully qualified names)

As vezes é necessário trabalhar com um componente (ou classe) que está disponível na biblioteca .NET Framework, mas que não está totalmente disponível para páginas utilizando Razor.

É possível fazer isso de duas maneiras:

- Fully qualified name

A primeira maneira é utilizar um nome totalmente qualificado para o componente. Esse nome não será apenas o nome da classe, mas também o namespace que contém a referida classe.

O namespace é uma coleção - como se fosse uma biblioteca - que contém classes relacionadas, tornando prática a tarefa de organizar milhares de classes no .NET Framework.

Ao fornecer um nome totalmente qualificado, é possível certificar-se que o ASP.NET poderá encontrar a classe que será utilizada quando a página for executada.

Por exemplo, a classe DataSet está no namespace System.Data. Esse namespace não está disponível automaticamente para páginas Razor ASP.NET. Portanto, para trabalhar com a classe DataSet utilizando seu fully qualified name, podemos utilizar o seguinte código:

var dataSet = new System.Data.DataSet();

- Using

Caso seja necessário utilizar a classe DataSet várias vezes no mesmo documento (ou quaisquer outras classes do namespace System.Data), essa pode não ser a melhor forma de declarar. Como alternativa, portanto, é possível importar um namespace.

Para fazer isso, é possível utilizar a instrução using. Dessa forma, não é necessário utilizar nomes totalmente qualificados para classes desse namespace:

@using System.Data; 
@{ 
     var dataSet = new DataSet(); 
     // etc. 
}

Observe que sempre que o namespace for importado, o ASP.NET saberá onde pesquisar para encontrar a classe que está sendo referenciada.

[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 4] Capítulo 7: Como criar gráficos a partir de dados contidos em um array

Como apresentado no post (Objetos e Coleções), um array permite que seja armazenada uma coleção de itens semelhante sem uma única variável. Podemos utilizar arrays que contenham dados a serem exibidos no gráfico que será criado.

Este procedimento mostra como criar um gráfico a partir de dados de um array, utilizando o tipo de gráfico padrão. Também será mostrado como exibir o gráfico na página Web.

1 - Crie um arquivo chamado GraficoArrayBasico.cshtml
2 - Substitua a marcação pelo código a seguir:

Inicialmente o código cria um novo gráfico e configura sua largura e altura. É possível especificar o título do gráfico utilizando o método AddTitle. Para adicionar dados, é utilizado o método AddSeries.

Nesse exemplo, foram utilizados os parâmentros xValue e yValues do método AddSeries. O parâmetro name é exibido na legenda do gráfico.

o Parâmetro xValue contém um array de dados que são exibidos no eixo horinzontal do gráfico. O parâmetro yValues contém um array de dados utilizados para marcar os pontos verticais no gráfico.

O método Write renderiza efetivamente o gráfico. Nesse caso, como não foi especificado o tipo de gráfico, é utilizado como padrão o gráfico de colunas.

3 - Execute a página no navegador. O gráfico deve ser exibido da seguinte forma:

[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