ASP.NET MVC – Renderizando Gráficos com HTML Helpers

Standard

Neste artigo demonstrarei como podemos utilizar diversos tipos de gráficos em aplicações ASP.NET MVC, renderizando-os através de um HTML Helper.

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 é chamado 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 extender 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:


Não deixe de ver os demais tipos de gráficos disponíveis do Google Chart Tools.
Abraços 🙂

5 thoughts on “ASP.NET MVC – Renderizando Gráficos com HTML Helpers

  1. Hugo

    Boa noite,

    eu to precisando coloca um grafico em um site que estou fazendo e seu tutorial cai feito um luva. Eu fiz da forma que vc explico, porém no html ele ta retorna a string que a StringBuilder ta gerando, será q falta eu faze mais alguma coisa?

    • rafaelzaccanini

      Olá Hugo,

      Vamos ver se entendi, você está retornando um StringBuilder para seu javascript, porém ao invés de renderizar o gráfico, é apresentado o texto da StringBuilder?

      Cara, como você está fazendo? No exemplo as informações do gráfico são estáticas, provavelmente você está fazendo dinâmico, certo?

      Tem como você mostrar como fez, ou algum erro, ou código mesmo ?

      Abs.

      • Hugo

        Oi Rafael, fiz alguns estudos e acredito que o seu exemplo foi feito na versão 3.5. Porém eu estou utilizando a versão 4.0. E metodo GraficoPizza no seu exemplo é do tipo string. Na versão 4.0 não funciona, na 4.0 o metodo tem que ser do tipo IHtmlString, depois que fiz a alteração funciono normalmente.

        Obrigago por ter respondido minha duvida

      • Hugo

        Ahh e esqueci de dizer no post anterior eu tbm estou utilizando o razor. Depois vou fazer um teste na versão 4.0 so que ao inves de utilizar o razor vo faze normal com pagina aspx.

Leave a Reply

Your email address will not be published. Required fields are marked *