ASP.NET MVC - Renderizando Gráficos do Google Chart com Html Helpers (pt-BR)
Gráficos by Google Chart Tools
Para quem não conhece o Google possui uma API free riquíssima de gráficos chamada Google Chart Tools. O mesmo disponibiliza diversos tipos de gráficos tais como Pizza, Geográfico, Estatístico, Indicador, Linhas e muitos outros, sendo muito simples sua utilização.
Referenciando a API
Para utilizarmos os recursos da API devemos referencia-la em nosso projeto, podemos fazer isso em nossa Master Page para que todas as demais páginas que as utilize já possuam tal referência:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
Abaixo da referência incluída irei criar um novo Content Place Holder para a inclusão de scripts JavaScript pelas páginas que utilizem nossa Master Page:
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
Criando uma View para o Gráfico
Agora vamos criar uma View chamada Graficos e deixa-la como abaixo:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">Gráficos</asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server"></asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> Gráfico 1<div id="divGraficoPizza"></div> </asp:Content>
Em seguida podemos criar a ActionResult da View:
public ActionResult Graficos(){ return View();}
Adicionando o Código para Renderização
Irei criar um gráfico de Pizza para saber a quantidade de usuários por região. Para podermos renderizar nosso gráfico basta adicionarmos o seguinte código em nosso HeadContent:
<script type="text/javascript"> //Carrega o tipo de gráfico a ser utilizadogoogle.load('visualization', '1.0', { 'packages': ['corechart'] });google.setOnLoadCallback(drawChart); function drawChart() {var data = new google.visualization.DataTable(); //Adiciona as colunas do gráficodata.addColumn('string', 'Região');data.addColumn('number', 'Quantidade'); //Adiciona as linhas do gráficodata.addRows([ ['Zona Norte', 7], ['Zona Sul', 1], ['Zona Oeste', 4], ['Zona Leste', 10], ['Demais', 2]]); //Opções adicionais do gráficovar options = { 'title': '', 'width': 400, 'height': 300}; //Define onde será renderizado o gráfico, no caso no elemento divGraficoPizzavar chart = new google.visualization.PieChart(document.getElementById('divGraficoPizza')); //Renderiza o Gráfico com as opções adicionais definidaschart.draw(data, options);}</script>
Agora já podemos testar o gráfico criado, observe que o mesmo é renderizado com sucesso:
http://rafaelzaccanini.net/wp-content/uploads/2011/12/Imagem-1.jpg
Criando o HTML Helper para renderização do Gráfico
Realmente o gráfico já está criado e funcionando perfeitamente, porém podemos melhora-lo. Podemos criar um Html Helper para renderizarmos de forma simples e unificada nosso Gráfico.
Vamos criar uma classe chamada HTMLHelpers que aponte para o namespace System.Web.Mvc e criar o seguinte método auxiliar chamado GraficoPizza:
namespace System.Web.Mvc{ public static class HtmlHelpers { public static string GraficoPizza(this HtmlHelper html, string nomeGrafico, Dictionary<object, object> colunas, Dictionary<object, object> linhas, int width, int height) { StringBuilder sb = new StringBuilder(); sb.AppendFormat("<div id={0}></div>", nomeGrafico); sb.AppendLine("<script language='javascript'>"); sb.AppendLine("google.load('visualization', '1.0', { 'packages': ['corechart'] });"); sb.AppendLine("google.setOnLoadCallback(drawChart);"); sb.AppendLine("function drawChart() {"); sb.AppendLine("var data = new google.visualization.DataTable();"); foreach(var coluna in colunas) sb.AppendLine(String.Format("data.addColumn('{0}', '{1}');", coluna.Key, coluna.Value)); foreach (var linha in linhas) sb.AppendLine(String.Format("data.addRow(['{0}', {1}]);", linha.Key, linha.Value)); sb.AppendLine("var options = { 'title': '',"); sb.AppendLine(String.Format(" 'width': '{0}',", width)); sb.AppendLine(String.Format(" 'height': '{0}' ", height)); sb.AppendLine(" }"); sb.AppendLine(String.Format("var chart = new google.visualization.PieChart(document.getElementById('{0}'));", nomeGrafico)); sb.AppendLine("chart.draw(data, options);"); sb.AppendLine("}"); sb.AppendLine("</script>"); return sb.ToString(); } }}
Observe que o mesmo recebe 5 parâmetros:
- nomeGrafico - O nome do gráfico e da div a ser criada
- colunas - Dicionário com os valores a serem definidas as colunas
- linhas - Dicionário com os valores a serem definidas as linhas
- width - largura do gráfico
- height - altura do gráfico
Agora em nossa View basta adicionarmos a seguinte chamada:
Gráfico 2<%= Html.GraficoPizza("graficoPizza", Suporte.SelecionaColunasGraficoPizza(), Suporte.SelecionaLinhasGraficoPizza(), 400, 300) %>
Observe que são chamados os seguintes métodos SelecionaColunasGraficoPizza e SelecionaLinhasGraficoPizza dentro da classe Suporte. Vamos cria-los então:
public class Suporte{ public static Dictionary<object, object> SelecionaColunasGraficoPizza() { Dictionary<object, object> dic = new Dictionary<object, object>(); dic.Add("string", "Região"); dic.Add("number", "Quantidade"); return dic; } public static Dictionary<object, object> SelecionaLinhasGraficoPizza() { Dictionary<object, object> dic = new Dictionary<object, object>(); dic.Add("Zona Norte", 3); dic.Add("Zona Sul", 7); dic.Add("Zona Oeste", 2); dic.Add("Zona Leste", 14); dic.Add("Outras", 6); return dic; }}
NOTA: Para o exemplo, a fim de não dificultar o entendimento e estender o post, criei o Html Helper recebendo um Dicionário para as colunas e linhas, porém você pode utilizar a forma que melhor convenha a sua necessidade. Como é possível visualizar, o gráfico do exemplo possui apenas duas colunas, porém, existem gráficos que podem utilizar diversas colunas, inviabilizando o uso de um dicionário!
Agora sim, se executarmos nossa aplicação novamente observe que o segundo gráfico é renderizando também:
http://rafaelzaccanini.net/wp-content/uploads/2011/12/Imagem-2.jpg
Rafael Zaccanini
MTAC – Microsoft Technical Audience Contributor
Blog: http://www.rafaelzaccanini.net
**Twitter: **@rafaelzaccanini
Facebook: http://www.facebook.com/RafaelZaccaniniNet