Criar Graficos

Olá, Adriano!

Estou trabalhando recentemente num projeto com MVC que utiliza Google Charts (https://developers.google.com/chart/) para gerar esses gráficos de rosca ("donut", que é uma modificação do gráfico de pizza "pie") e também gráfico de barras e linhas.

Infelizmente não posso te dar o código do projeto, mas aqui vão algumas provas de conceito que usamos com jsFiddle:

https://jsfiddle.net/wuLn7qcu/3/

https://jsfiddle.net/p98eozju/3/

Como colocamos esses gráficos dentro de um projeto MVC?

1 - colocamos o script na master view:

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

2 - Colocamos a div do gráfico dentro da dialog que exibe o gráfico:

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

2 - Quando a dialog modal do gráfico é aberta, fazemos uma chamada AJAX com Angular (você pode usar jQuery, ou outro framework)

3 - Temos um controller que pega a requisição AJAX e busca do banco de dados os dados necessários para o gráfico e os retorna para a função JavaScript chamadora.

4 - Quando a requisição AJAX recebe o resultado do controller, ele já foi convertido de C# para JSON, por exemplo:

[
    ['Leitura dos Comunicados', 'Porcentual'],
    ['NÃO UTILIZA', 41],
    ['BAIXO', 39],
    ['LEVE', 12],
    ['MODERADO', 4],
    ['FREQUENTE', 4]
]

5 - Em seguida, a função JavaScript que fez a chamada AJAX converte esses dados JSON para um array JavaScript (dadosDoGrafico), que por sua vez é passado para a função arrayToDataTable do Google Charts, na linha:

var data = google.visualization.arrayToDataTable(dadosDoGrafico)

6 - O gráfico é então gerado pelo Google Charts na div que selecionamos (div com id="donutchart").

Acho que é isso. Existem outros detalhes que você pode ver nos links do jsFiddle que passei.

Boa sorte e bons estudos!

Sim, Marcelo!

Boa parte esta igual. Algumas diferencas!

** O problema agora, esta no loop de retorno do Ajax! Especificamnete no "addRows"

function drawchart(dataValues) { var data = new google.visualization.DataTable(); data.addColumn('string', 'DataHora'); data.addColumn('number', 'TemperaturaAtual');

data.addRows(dataValues.length-1);

var dadosDoGrafico = JSON.parse(dataValues);

for (var i = 0; i < dadosDoGrafico.length; i++) {

data.setValue(i, 0, dadosDoGrafico[0].DataHora); data.setValue(i, 1, dadosDoGrafico[0].TemperaturaAtual);

data.addRow([dadosDoGrafico[0].DataHora]); data.addRow([dadosDoGrafico[i].TemperaturaAtual]);

var chart = new google.visualization.LineChart(document.getElementById('chartdiv'));

chart.draw(dataTable, { title: "Temperatura diária", position: "top", fontsize: "14px", chartArea: { width: '100%' }, });

}