ASP .NET MVC 5 - Criando gráficos com Helper Chart

  Neste artigo veremos como criar gráficos em aplicações ASP  .NET MVC 5 usando o HTML Helper Chart.
 

Chegou o curso Curso ASP .NET .MVC 5 Vídeo Aulas onde você vai aprender a criar aplicações web dinâmicas usando a ASP .NET MVC 5.

O Helper Chart permite exibir dados em um gráfico em mais de 30 tipos diferentes de gráficos incluindo os tipos usados pelo Excel.

Para criar um novo gráfico basta criar uma instância da classe Chart e definir as dimensões do gráfico :

var MyChart = new Chart(width: 500, height: 300)

Podemos usar o método AddTitle para informar o título do gráfico.

A seguir basta usar o método AddSeries para incluir dados no gráfico. Neste método temos:

-  os parâmetros xValue e yValues representam os eixos x e y
- o parâmetro ChartType define o tipo de gráfico que será usado
- o parâmetro name que da nome a série com um id exclusivo

Exemplo :

.AddSeries(name: "Vendas", charType: "Line",  xValue: new[] {"S","T","Q","Q","S","Sb"}, yValues: new[] {"50","80","9","8","5","6",})

Para adicionar uma legenda ao gráfico temos o método AddLegend.

Para exibir o gráfico no navegador basta usar o método Write:   .Write()     ou      .Write(format: "gif")

Para salvar o gráfico use o método Save:  .Save(@"c:\teste\grafico.jpg")

Neste artigo veremos alguns exemplos de como usar o helper Chart.

Recursos usados :

Criando o projeto ASP .NET MVC

Abra o VS 2015 Community e clique em New Project;

A seguir selecione Visual C# -> ASP .NET Web Application;

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

A seguir selecione o template Empty e o marque o item MVC e clique no botão OK;

A seguir selecione o template Empty, marque MVC  e clique no botão OK;

Será criado um projeto vazio contendo toda a estrutura de pastas criadas pelo framework ASP .NET MVC.

Definindo o Model

Vamos definir um modelo de dados que iremos usar para gerar o gráfico de vendas do semestre na pasta Models.

Clique com o botão direito do mouse sobre a pasta Models e a seguir em Add Class;

Informe o nome ChartModel e a seguir informe o código abaixo neste controlador:

using System;
using System.Collections;
namespace Mvc_Chart.Models
{
    public class ChartModel
    {
        public IList GetDadosGrafico()
        {
            return new ArrayList
            {
                 new { X = DateTime.Now.AddMonths(-5).ToString("MMMM"), Y = 90 }, 
                 new { X = DateTime.Now.AddMonths(-4).ToString("MMMM"), Y = 190 },
                 new { X = DateTime.Now.AddMonths(-3).ToString("MMMM"), Y = 250 },
                 new { X = DateTime.Now.AddMonths(-2).ToString("MMMM"), Y = 210 },
                 new { X = DateTime.Now.AddMonths(-1).ToString("MMMM"), Y = 300 },
                 new { X = DateTime.Now.ToString("MMMM"), Y = 450 }
            };
        }
    }
}

 

Esses dados serão usados pelo método Action Grafico do controlador HomeController.

Criando o controlador HomeController   

Vamos criar o controlador HomeController na pasta Controllers.

Clique com o botão direito do mouse sobre a pasta Controllers e a seguir em Add Controller;

Selecione o Scaffold MVC5 Controller Empty;

Informe o nome HomeController e a seguir informe o código abaixo neste controlador:

using System.Web.Helpers;
using System.Web.Mvc;
using Mvc_Chart.Models;
namespace Mvc_Chart.Controllers
{
   public class HomeController : Controller
   {
        // GET: Home
        public ActionResult Index()
        {
             return View();
        }
        public ActionResult Grafico()
        {
            var model = new ChartModel();
            var dados = model.GetDadosGrafico();
            new Chart(800, 500, ChartTheme.Yellow)
                .AddTitle("Vendas dos últimos 6 meses - 2015")
                .DataBindTable(dados, "X")
                .Write("png");
            return View(model);
        }
   }
}

Neste controlador definimos dois métodos Action :

- Index() - Vamos gerar um gráfico de linha com notas de alunos
- Grafico() - Vamos gerar um gráfico de colunas com as vendas dos últimos seis meses

Agora vamos criar a view Index a partir do método Action Index deste controlador.

Clique com o botão direito do mouse no método Index e a seguir em Add View;

Aceite o nome padrão e informe o template Empty(without model) e clique no botão Add;

Será criada a view Index.cshtml na pasta /Views/Home. Inclua o código abaixo nesta view:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
        Macoratti .net - Usando Chart Helper
        <hr />
        <div>
            @{
                var grafico = new Chart(width: 800, height: 300, theme: ChartTheme.Green)
                    .AddTitle("Nota Final dos Alunos da 8a Série")
                    .AddLegend("Fechamento do semestre")
                    .AddSeries(
                        name: "Aluno", chartType: "Line",
                        xValue: new[] { "Macoratti", "Pedro", "Ana", "Mario", "Vera" } , xField: "Alunos",
                        yValues: new[] { "7", "8", "6", "5", "9" }, yFields : "Nota"
                    )
                    .Write();
            }
        </div>
</body>
</html>

Neste código estamos criando uma instância da classe Chart e definindo o tamanho, o tema usado no gráfico, o título, a legenda e a série de valores para x e y representando o nome e as notas dos alunos.

Agora vamos criar a view Grafico() a partir do método Action Grafico deste controlador.

Clique com o botão direito do mouse no método Grafico e a seguir em Add View;

Aceite o nome padrão e informe o template Empty(without model) e clique no botão Add;

@model dynamic
}

Executando o projeto iremos obter o seguinte resultado para o gráfico das notas dos alunos:

A seguir acionando a url /Home/Grafico teremos o gráfico de colunas para as vendas mensais:

Existem outros tipos de gráfico e outras temas que você pode usar para gerar seus gráficos e pode usar o método Save para salvar os seus gráficos.

Pegue o projeto completo aqui: Mvc_Chart.zip (sem as referências)

Tornou, pois, Jesus a dizer-lhes: Em verdade, em verdade vos digo que eu sou a porta das ovelhas.
Todos quantos vieram antes de mim são ladrões e salteadores; mas as ovelhas não os ouviram.
Eu sou a porta; se alguém entrar por mim, salvar-se-á, e entrará, e sairá, e achará pastagens.
João 10:7-9

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 ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?

 

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti