Recursos usados:

• .NET Core SDK ou superior
• Visual Studio Code

Criando o projeto via linha de comando usando a NET CLI

Crie uma pasta chamada aspcorechart (ou outro nome a seu gosto) no seu computador local.

A seguir entre nesta pasta e digite o comando : dotnet new mvc

Isto vai criar um projeto ASP .NET Core MVC na pasta aspcorechart com toda estrutura e arquivos prontos para uso. (É igual a criar no VS 2017).

Vamos abrir o projeto no VS Code.

Para isso, estando na pasta aspcorechart, digite na linha de comando : Code .

Acima temos a figura exibindo o nosso projeto aberto no VS Code.

Criando a classe de domínio

Com o projeto aberto no VS Code clique com o botão direito sobre a pasta Models e selecione a opção New C# Class e informe o nome PopulacaoModel.

Nota: Para visualizar as opções do menu suspenso o você tem que ter as extensões C# e C# Extensions instaladas no VS Code.

A seguir defina o código abaixo nesta classe:

namespace aspcoreChart.Models { public class PopulacaoModel { public string Cidade { get; set; } public decimal Populacao2017 { get; set; } public decimal Populacao2010 { get; set; } } }

Esta classe representa o nosso modelo de domínio e expõe o nome da cidade e as populações de 2010 e 2017.

A seguir vamos criar uma pasta Services no projeto. Clique sobre o ícone New Folder e informe o nome Services:

Criando a classe de serviço

Agora que criamos a pasta Services no projeto vamos criar uma classe chamada PopulacaoService que vai fornecer os dados que vamos exibir nos gráficos que vamos criar.

Clique com o botão direito do mouse sobre a pasta Services e a seguir em New C# Class e informe o nome PopulacaoService incluindo o código a seguir:

using System.Collections.Generic;
using aspcoreChart.Models;

namespace aspcoreChart.Services
{
    public class PopulacaoService
    {                  
        public static List<PopulacaoModel> GetPopulacaoPorEstado()
        {
            var lista = new List<PopulacaoModel>();
            lista.Add(new PopulacaoModel{ Cidade="São Paulo", Populacao2017 = 45094 , Populacao2010 = 39585 });
            lista.Add(new PopulacaoModel{ Cidade="Minas Gerais", Populacao2017 = 21119 , Populacao2010 =16715  });
            lista.Add(new PopulacaoModel{ Cidade="Rio de Janeiro", Populacao2017 = 16718 , Populacao2010 = 15464 });
            lista.Add(new PopulacaoModel{ Cidade="Bahia", Populacao2017 = 15344 , Populacao2010 = 10120 });
            lista.Add(new PopulacaoModel{ Cidade="Parana", Populacao2017 = 11320 , Populacao2010 = 8912 });
            return lista;
        }
    }
}

Nota: Os dados foram obtidos da Wikipédia : https://pt.wikipedia.org/wiki/Lista_de_munic%C3%ADpios_do_Brasil_por_popula%C3%A7%C3%A3o

Estamos prontos para definir o nosso controlador.

Criando o controlador PopulacaoController

Clique com o botão direito do mouse sobre a pasta Controllers e a seguir clique em New File e informe o nome PopulacaoController.

A seguir inclua o código abaixo:

using aspcoreChart.Services;
using Microsoft.AspNetCore.Mvc;

namespace aspcoreChart.Controllers
{
    public class PopulacaoController : Controller
    {
        public IActionResult Index()
        {  
           return View();  
        }  
        //Retorna dados JSO da população de cada estado
         public JsonResult PopulacaoGrafico() 
        {  
           var listaPopulacao = PopulacaoService.GetPopulacaoPorEstado();  
           return Json(listaPopulacao);  
        }  
    }
}

Neste controlador temos dois métodos Action:

• Index - Que retorna a view Index;
• PopulacaoGrafico - que obtém os dados do serviço criado sobre a população;

Criando a view Index e definindo o GoogleChart

Vamos ter que criar a view Index e para isso vamos criar primeiro uma pasta chamada Populacao dentro da pasta Views.

Apos criar a pasta Populacao crie um arquivo chamado Index.cshtml dentro desta pasta com o seguinte código :

<title>
    @ViewData["Title"] - Grafico
</title>  
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

<div id="chart_div" style="width: 900px; height: 500px;"></div>  

<script type="text/javascript">  

    google.charts.load('current', {packages: ['corechart', 'bar']});  
    google.charts.setOnLoadCallback(CarregaDados);

    function CarregaDados() {  
        $.ajax({  
            url: '@Url.Action("PopulacaoGrafico","Populacao")',  
            dataType: "json",  
            type: "GET",  
            error: function(xhr, status, error) {  
                var err = eval("(" + xhr.responseText + ")");  
                toastr.error(err.message);  
            },  
            success: function(data) {  
                GraficoPopulacional(data);  
                return false;  
            }  
        });  
        return false;  
    }  

    function GraficoPopulacional(data) {  
        var dataArray = [  
            ['Cidade', '2010' , '2017']  
        ];  
        $.each(data, function(i, item) {  
            dataArray.push([item.cidade, item.populacao2010, item.populacao2017]);  
        });  
        var data = google.visualization.arrayToDataTable(dataArray);  
        var options = {  
            title: 'Brasil - População das 5 Cidades mais populosas',  
            chartArea: {  
                width: '50%'  
            },  
            colors: ['#b0120a', '#ffab91'],  
            hAxis: {  
                title: 'Populacao Total (em milhões)',  
                minValue: 0  
            },  
            vAxis: {  
                title: 'Cidade'  
            }  
        };  
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));  
        chart.draw(data, options);  
        return false;  
    }  
</script> 

Agora vamos entender o código desta view Index.shtml :

1- Para usar os recursos dos gráficos que desejamos criar basta referenciar a biblioteca do GoogleChart.  Estamos fazendo isso via url :

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

2- Carrega a API de visualização e os pacotes de gráficos :
google.charts.load ('current', {'packages': ['corechart']});

3- Define uma chamada de retorno para executar quando a API de visualização do Google for carregada.
google.charts.setOnLoadCallback (CarregaDados);

4- Carrega os dados usando uma requisição ajax onde informamos o nome do controlador,  o método Action e o tipo de requisição (GET).  Se os dados forem obtidos com sucesso chama a função GraficoPopulacional para gerar gráfico:

function CarregaDados() { 
        $.ajax({ 
            url: '@Url.Action("PopulacaoGrafico","Populacao")', 
            dataType: "json", 
            type: "GET", 
            error: function(xhr, status, error) { 
                var err = eval("(" + xhr.responseText + ")"); 
                toastr.error(err.message); 
            }, 
            success: function(data) { 
                GraficoPopulacional(data); 
                return false; 
            } 
        }); 
        return false; 
    } 

5 - Gera o gráfico com os dados informados. Aqui primeiro definimos os dados do cabeçalho preechemos a seguir com os dados obtidos e definimos algumas opções de configuração do gráfico

      function GraficoPopulacional(data) { 
        var dataArray = [ 
            ['Cidade', '2010' , '2017'] 
        ]; 
        $.each(data, function(i, item) { 
            dataArray.push([item.cidade, item.populacao2010, item.populacao2017]); 
        }); 
        var data = google.visualization.arrayToDataTable(dataArray); 
        var options = { 
            title: 'Brasil - População das 5 Cidades mais populosas', 
            chartArea: { 
                width: '50%' 
            }, 
            colors: ['#b0120a', '#ffab91'], 
            hAxis: { 
                title: 'Populacao Total (em milhões)', 
                minValue: 0 
            }, 
            vAxis: { 
                title: 'Cidade' 
            } 
        }; 
        var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
        chart.draw(data, options); 
        return false; 
    } 

Na função drawchart os dados são inicializados, as colunas são adicionados a ele, e, em seguida, os dados são inseridos. Finalmente, o novo Gráfico é inicializado e seu método draw é invocado.

O método LineChart da API do Google indica que vamos criar uma gráfico de linhas. Para criar outros tipos de gráficos basta usar outros métodos como:

• google.visualization.ColumnChart - Gráfico de coluna
• google.visualization.BarChart - Gráfico de barras
• google.visualization.LineChart - Gráfico de linhas

Alterando o arquivo de leiaute

Vamos agora abrir o arquivo _Layout.cshml na pasta /Views/Shared e incluir o código em azul mostrado abaixo substituindo o código original:
   

Agora vamos alterar o código da view Index.cshtml da pasta Views/Home :

@{
    ViewData["Title"] = "Home Page";
}
<br />

<div class="container">
   <div class="jumbotron">
     <h2>Gráficos com GoogleChart</h2>
   </div>
</div>

Agora é só alegria...

Executando projeto iremos obter o seguinte resultado:

1- A página Inicial com o menu de opções

2- O gráfico de linhas

3- O gráfico de barras:

Pegue o código do projeto aqui:   aspcoreChart.zip

(Disse Jesus) "Na verdade, na verdade vos digo que quem ouve a minha palavra, e crê naquele que me enviou, tem a vida eterna, e não entrará em condenação, mas passou da morte para a vida."
João 5:24