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 utilizado
google.load('visualization', '1.0', { 'packages': ['corechart'] });
google.setOnLoadCallback(drawChart);
 
function drawChart() {
var data = new google.visualization.DataTable();
 
//Adiciona as colunas do gráfico
data.addColumn('string', 'Região');
data.addColumn('number', 'Quantidade');
 
//Adiciona as linhas do gráfico
data.addRows([
  ['Zona Norte', 7],
  ['Zona Sul', 1],
  ['Zona Oeste', 4],
  ['Zona Leste', 10],
  ['Demais', 2]
]);
 
//Opções adicionais do gráfico
var options = { 'title': '',
  'width': 400,
  'height': 300
};
 
//Define onde será renderizado o gráfico, no caso no elemento divGraficoPizza
var chart = new google.visualization.PieChart(document.getElementById('divGraficoPizza'));
 
//Renderiza o Gráfico com as opções adicionais definidas
chart.draw(data, options);
}
</script>

Agora já podemos testar o gráfico criado, observe que o mesmo é renderizado com sucesso:

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:

Rafael Zaccanini
MTAC – Microsoft Technical Audience Contributor
Blog: http://www.rafaelzaccanini.net
Twitter: @rafaelzaccanini
Facebook: http://www.facebook.com/RafaelZaccaniniNet