Como criar um grafico de Linhas ou Pizza, usando asp.net MVC? Faoç o retorno dos dados em XML ou JSON.
Daí preciso renderizar uma VIEW para mostrar o grafico.
Alguem tem exemplos?
att
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Como criar um grafico de Linhas ou Pizza, usando asp.net MVC? Faoç o retorno dos dados em XML ou JSON.
Daí preciso renderizar uma VIEW para mostrar o grafico.
Alguem tem exemplos?
att
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%' }, });
}