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>
<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" />
<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>
<%@ Page Title=
""
Language=
"C#"
MasterPageFile=
"~/Views/Shared/Site.Master"
Inherits=
"System.Web.Mvc.ViewPage<dynamic>"
%>
<asp:Content ID=
"Content1"
ContentPlaceHolderID=
"TitleContent"
>
Gráficos
</asp:Content>
"Content3"
"Content2"
"MainContent"
Gráfico 1
<div id=
"divGraficoPizza"
></div>
Em seguida podemos criar a ActionResult da View:
public ActionResult Graficos(){ return 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>
//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'
);
'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
options = {
'title'
:
''
'width'
: 400,
'height'
: 300
};
//Define onde será renderizado o gráfico, no caso no elemento divGraficoPizza
chart =
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(); } }}
namespace
System.Web.Mvc
static
class
HtmlHelpers
string
GraficoPizza(
this
HtmlHelper html,
nomeGrafico,
Dictionary<
object
> colunas,
> linhas,
int
width,
height)
StringBuilder sb =
StringBuilder();
sb.AppendFormat(
"<div id={0}></div>"
, nomeGrafico);
sb.AppendLine(
"<script language='javascript'>"
"google.load('visualization', '1.0', { 'packages': ['corechart'] });"
"google.setOnLoadCallback(drawChart);"
"function drawChart() {"
"var data = new google.visualization.DataTable();"
foreach
(var coluna
in
colunas)
sb.AppendLine(String.Format(
"data.addColumn('{0}', '{1}');"
, coluna.Key, coluna.Value));
(var linha
linhas)
"data.addRow(['{0}', {1}]);"
, linha.Key, linha.Value));
"var options = { 'title': '',"
" 'width': '{0}',"
, width));
" 'height': '{0}' "
, height));
" }"
"var chart = new google.visualization.PieChart(document.getElementById('{0}'));"
, nomeGrafico));
"chart.draw(data, options);"
"}"
"</script>"
sb.ToString();
Observe que o mesmo recebe 5 parâmetros:
Agora em nossa View basta adicionarmos a seguinte chamada:
Gráfico 2<%= Html.GraficoPizza("graficoPizza", Suporte.SelecionaColunasGraficoPizza(), Suporte.SelecionaLinhasGraficoPizza(), 400, 300) %>
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; }}
Suporte
> SelecionaColunasGraficoPizza()
> dic =
>();
dic.Add(
"string"
"Região"
"number"
"Quantidade"
dic;
> SelecionaLinhasGraficoPizza()
"Zona Norte"
, 3);
"Zona Sul"
, 7);
"Zona Oeste"
, 2);
"Zona Leste"
, 14);
"Outras"
, 6);
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
Estava procurando sobre gráficos para colocar em um projeto nosso aqui, nos relatórios, muito bem explicado!, e com a criação do helper fica muito simples a utilização, estou adorando usar o ASP.NET MVC!
Aí sim, matou a pau! Ótimo wiki!
Rafael, conhece alguma forma de gerar os gráficos a partir de uma base em SQL Server ou outro banco de dados?
Grato
Parabéns pelo artigo. Ajuda muita gente e representa a demanda de muitos profissionais em seu dia-a-dia .
Não conhecia esses gráficos do Google Chart, muito TOP