Exibindo dados em gráfico utilizando MVC 3 Razor - PARTE 1

Olá,

Esse artigo explicará como apresentar gráficos em uma pagina ASP.NET (Razor).

Chart Helper

Quando você tiver a necessidade de apresentar o gráfico em sua pagina web, você pode usar o Chart Helper. O Chart Helper pode renderizar que exibe uma imagem em diversos formatos de gráficos, suportando muitas opções para formatação e rotulos, conforme sua necessidade. O Chart Helper pode gerar mais de 30 tipos de gráficos, incluindo todos os tipos de gráficos que você pode estar familiarizado com o Microsoft Excel ou de outras ferramentas - gráficos de área, gráficos de barras, gráficos de colunas, gráficos de linha e gráficos de pizza, juntamente com mais gráficos especializados como gráficos de ações.

Chart Elements

Gráficos mostram dados e elementos adicionais, tais como legendas, eixos, séries, e assim por diante.

Criar um gráfico a partir de dados

Os dados que você mostra em um gráfico pode ser de uma matriz, a partir dos resultados retornados de um banco de dados, ou a partir de dados que está em um arquivo XML.

Usando uma matriz

Uma matriz permite armazenar uma coleção de itens semelhantes em uma única variável. Você pode usar matrizes para conter os dados que você deseja incluir no seu gráfico.
Este procedimento mostra como você pode criar um gráfico a partir de dados armazenados em matrizes, usando o tipo de gráfico padrão. Ele também mostra como para exibir o gráfico dentro da página.

1. Crie um novo arquivo chamado ChartArrayBasic.cshtml .
2. Substituir o conteúdo existente com o seguinte:

@{    
var myChart = new Chart(width: 600, height: 400)        
.AddTitle("Chart Title")        
.AddSeries( name: "Employee",
xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
  yValues: new[] { "2", "6", "4", "5", "3" }) .Write();
}

O primeiro código cria um novo gráfico e define sua largura e altura.

Você especifica o título do gráfico usando o AddTitle método.

Para adicionar dados, você usa o AddSeries método. Neste exemplo, você usar o nome , xValue , e yValues ​​parâmetros do AddSeries método.

O nome do parâmetro é exibido na legenda do gráfico. O xValue parâmetro contém uma matriz de dados que é exibida ao longo do eixo horizontal do gráfico. O yValues ​​parâmetro contém uma matriz de dados que é usado para traçar os pontos verticais do gráfico.

1. Executar a página no navegador. O navegador exibe o gráfico.

Usando uma consulta de banco de dados para dados de gráficos

Se a informação que você quer apresentar está em um banco de dados, você pode executar uma consulta de banco de dados e, em seguida, usar os dados a partir dos resultados para criar o gráfico.

1. Adicionar um App_Data pasta para a raiz do site, se a pasta não existir.
2. No App_Data pasta, adicione o arquivo de banco de dados chamado SmallBakery.sdf que está descrito na introdução ao trabalho com um banco de dados em páginas ASP.NET Web Sites .
3. Crie um novo arquivo chamado ChartDataQuery.cshtml .
4. Substituir o conteúdo existente com o seguinte:

   @ {  
       var db = Database.Open ("SmallBakery");  
       dados var = db.Query ("SELECT nome, preço de produto");  
       var myChart = novo Plano (largura: 600, height: 400)  
           . AddTitle (Produto " Venda ")  
           . DataBindTable (dataSource: dados, xField: "Nome")  
           . Write ();  
   }

O primeiro código abre o banco de dados SmallBakery e atribui a uma variável chamada db . Esta variável representa um banco de dados objeto que pode ser usado para ler e escrever para o banco de dados.

 

Em seguida, o código executa uma consulta SQL para obter o nome e preço de cada produto. O código cria um novo gráfico e passa a consulta de banco de dados a ele chamando o gráfico DataBindTable método. Este método tem dois parâmetros: o dataSource parâmetro é para os dados da consulta, e o xField parâmetro que permite definir qual coluna de dados é usado para o gráfico do eixo-x.

 

Como uma alternativa ao uso do DataBindTable método, você pode usar o AddSeries método do Gráfico ajudante. O AddSeries método permite que você defina os xValue e yValues ​​parâmetros. Por exemplo, em vez de usar o DataBindTable método como este:

 

DataBindTable ( dados , "Nome" )

 

Você pode usar o AddSeries método como este:

 

. AddSeries ( "Default" , xValue : dados , xField : "Nome" , yValues ​​: dados , yFields : "Preço" )

 

Ambos apresentam os mesmos resultados. O AddSeries método é mais flexível, pois você pode especificar o tipo de gráfico e os dados de forma mais explícita, mas o DataBindTable método é mais fácil de usar se você não precisa de flexibilidade extra.

 

Espero que tenha ajudado com esse exemplo de apresentação de gráficos no ASP.NET MVC.

 

Na conclusão deste artigo irei mostar como fazemos para trabalhar com XML e definir estilos ao gráficos.

 

Referencia: http://www.asp.net/web-pages/tutorials/data/7-displaying-data-in-a-chart