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


  Neste artigo veremos como criar gráficos em aplicações ASP  .NET MVC 5 usando a biblioteca JavaScript Chart.js.
 

A biblioteca Chart.js é uma biblioteca JavaScript para criação de gráficos em aplicações web, fácil de usar e de aprender, sendo open source, e,  podendo se obtida no GitHub ou ser usada via CDN.

Para mais detalhes sobre a Chart.js com exemplos visite o site oficial lem : http://www.chartjs.org/

Para usar a Chart.js você só precisa fazer de duas coisas :

1) Referenciar a biblioteca - neste artigo eu vou usar a distribuição CDN, pois creio que seja a maneira mais fácil :

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" type="text/javascript"></script>

No nosso exemplo vamos fazer essa referência na View e vamos fazer uma chamada Ajax para chamar o método no Controlador e obter os dados do gráfico.

2) Definir um elemento <canvas>: A Chart.js utiliza o <canvas> do HTML5 para renderizar os gráficos:

</canvas><canvas id="mChart"></canvas>

Vamos definir o canvas também na view para renderizar o gráfico.

Uma outra opção seria você usar um gerenciador de pacotes, como o Nuget, para baixar a biblioteca no projeto. Veja detalhes no site oficial.

Simples, não é mesmo ???

Agora, sem mais delongas, vejamos como usar o Chart.js com ASP .NET MVC 5.

Recursos usados :

Criando o projeto ASP .NET MVC

Abra o VS 2017 Community e clique em New Project;

A seguir selecione Visual C# -> Web -> ASP .NET Web Application (.NET Framework) e  Informe o nome Mvc_Chart1 e clique no botão OK;

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

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

Definindo os dados do gráfico no Controlador

Como o objetivo do artigo é mostrar de forma bem simples é rápida como usar o Chart.js, vou cometer um sacrilégio e definir no controlador os dados que iremos usar para criar o gráfico.

Em uma aplicação robusta você criaria um serviço para obter os dados de outra fonte.

Abra o controlador HomeController na pasta Controllers e inclua um novo método Action chamado NovoGrafico com o seguinte código :

        [HttpPost]
        public JsonResult NovoGrafico()
        {
            List<object> iDados = new List<object>();
            //Criando dados de exemplo
            DataTable dt = new DataTable();
            dt.Columns.Add("Vendas", System.Type.GetType("System.String"));
            dt.Columns.Add("Unidades", System.Type.GetType("System.Int32"));
            DataRow dr = dt.NewRow();
            dr["Vendas"] = "Chevrolet Onix";
            dr["Unidades"] = 171;
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["Vendas"] = "Huynday HB20";
            dr["Unidades"] = 96;
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["Vendas"] = "Ford Ka(Hatch)";
            dr["Unidades"] = 87;
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["Vendas"] = "WolksVagem Gol";
            dr["Unidades"] = 67;
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["Vendas"] = "Renaul Sandero";
            dr["Unidades"] = 63;
            dt.Rows.Add(dr);
            //Percorrendo e extraindo cada DataColumn para List<Object>
            foreach (DataColumn dc in dt.Columns)
            {
                List<object> x = new List<object>();
                x = (from DataRow drr in dt.Rows select drr[dc.ColumnName]).ToList();
                iDados.Add(x);
            }
            //Dados retornados no formato JSON
            return Json(iDados, JsonRequestBehavior.AllowGet);
        }

Definimos um DataTable e criamos duas colunas: Vendas e Unidades que vão representar as vendas em unidades de 5 veículos para o ano de 2017.

Vendas Unidades
Chevrolet Onix 171326
Huynday HB20 96769
Ford Ka(Hatch) 87012
WolksVagem Gol 67865
Renaul Sandero 63434

Atribuimos 5 valores e percorremos o DataTable e preenchemos a lista de objetos com os valores retornado os dados no formato JSON

Nota: Para facilitar a leitura eu estou dividindo os valores por 1000 e arredondando o resultado.

Criando a View

Vamos agora ajustar a View Index do controlador HomeController.

Abra o arquivo Index.cshtml na pasta Views/Home e altere o código conforme mostrado abaixo:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_ChartLayout.cshtml";
}
<h2>Gráfico com Chart.js</h2>
@section head
{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
}
@using (Html.BeginForm("Index", "Home", null, FormMethod.Post))
{
    <div Style="font-family: Corbel; font-size: small ;text-align:center " class="row">
        <div>
            <div style="width:100%;height:100%">
                <canvas id="mChart1" style="padding: 0;margin: auto;display: block; "> </canvas>
            </div>
        </div>
    </div>
    <div Style="font-family: Corbel; font-size: small ;text-align:center; " class="row">
        <div>
        </div>
        <div>
        </div>
    </div>
    <script>
        $.ajax({
            type: "POST",
            url: "/Home/NovoGrafico",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (mems) {
                var aData = mems;
                var aLabels = aData[0];
                var aDatasets1 = aData[1];
                var dataT = {
                    labels: aLabels,
                    datasets: [{
                        label: "Veículos",
                        data: aDatasets1,
                        fill: false,
                        backgroundColor: ["rgba(54, 162, 235, 0.2)", "rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", 
"rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
                        borderColor: ["rgb(54, 162, 235)", "rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)",
"rgb(75, 192, 192)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
                        borderWidth: 1
                    }]
                };
                var ctx = $("#mChart1").get(0).getContext("2d");
                var myNewChart = new Chart(ctx, {
                    type: 'bar',
                    data: dataT,
                    options: {
                        responsive: true,
                        title: { display: true, text: 'Vendas de Veículos - 2017 (milhares)' },
                        legend: { position: 'bottom' },
                        scales: {
                            xAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' } }],
                            yAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' }, 
ticks: { stepSize: 50, beginAtZero: true } }]
                        },
                    }
                });
            }
        });
    </script>
}

No código acima definimos a referência a biblioteca Chart.js e o <canvas> para renderizar o gráfico.

A variável aData [0] contém os dados para rótulos do Eixo X e aData[1] tem os dados para o eixo Y.

Fazemos uma chamada Ajax ao método NovoGrafico do controlador Home que irá retorna os dados no formato JSON. A chamda AJAX quando retornada com sucesso, vai processar os dados JSON retornados.

Os dados JSON são processados para extrair os rótulos e os dados dos eixos para a preparação do gráfico. O contexto 2D da canvas 'mChart1' é criado usando o método 'getContext ("2d")' , e, em seguida, o contexto é usado para criar o objeto do gráfico no novo método Chart() dentro do script.

Para concluir vamos criar o arquivo de Layout : _ChartLayout.cshtml na pasta /Views/Shared com seguinte código:

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
    <link href="~/Content/CTable.css" rel="stylesheet" type="text/css" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @RenderSection("head", false)
    <style>
        .modal-content {
            width: 600px !important;
            margin: 30px auto !important;
        }
    </style>
</head>
<body>
    <div class="container body-content">
        @RenderBody()
    </div>
    @RenderSection("scripts", required: false)
</body>
</html>
 

Executando o projeto iremos obter o seguinte resultado para o gráfico das vendas dos veículos:

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

"Mas nós não recebemos o espírito do mundo, mas o Espírito que provém de Deus, para que pudéssemos conhecer o que nos é dado gratuitamente por Deus. "
1 Coríntios 2:12

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