|
<< Click to Display Table of Contents >> Google Chart API |
  
|
|
<< Click to Display Table of Contents >> Google Chart API |
|
Projeto
Gráfico de Barras
GraficoBarra.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GraficoBarra.aspx.cs" Inherits="Graficos.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1.1", { packages: ["bar"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
chart: {
title: 'Fluxo de Caixa',
subtitle: 'Vendas, Despesas e Lucro: 2014-2015',
},
colors: ['#FF6666', '#3399FF', 'orange']
};
$.ajax({
type: "POST",
url: "GraficoBarra.aspx/GetDados",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</form>
</body>
</html>
GraficoBarra.cs
using System;
using System.Collections.Generic;
using System.Web.Services;
namespace Graficos
{
public partial class WebForm1 : System.Web.UI.Page
{
[WebMethod]
public static List<object> GetDados()
{
List<object> chartData = new List<object>();
chartData.Add(new object[] { "Mês", "Despesa", "Receita", "Lucro" });
chartData.Add(new object[] { "12/14", 10.2, 5.0, 2.46 });
chartData.Add(new object[] { "01/15", 110.20, 11.12, -1.87 });
chartData.Add(new object[] { "02/15", 10.22, 2.11, 90.11 });
chartData.Add(new object[] { "03/15", 86.32, 10.12, -3.71 });
chartData.Add(new object[] { "04/15", 50.11, 41.60, 6.33 });
chartData.Add(new object[] { "05/15", 20.1, 50.77, 12.33 });
return chartData;
}
}
}
Gráfico de Linha
GraficoLinha.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GraficoLinha.aspx.cs" Inherits="Graficos.GraficoLinha" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script>
google.load('visualization', '1.1', { packages: ['line'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
chart: {
title: 'Comparativo de despesas',
subtitle: 'Despesas em R$'
}
};
$.ajax({
type: "POST",
url: "GraficoLinha.aspx/GetDados",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="linechart_material" style="width: 1024px; height: 700px;"></div>
</form>
</body>
</html>
GraficoLinha.cs
using System;
using System.Collections.Generic;
using System.Web.Services;
namespace Graficos
{
public partial class GraficoLinha : System.Web.UI.Page
{
[WebMethod]
public static List<object> GetDados()
{
List<object> chartData = new List<object>();
chartData.Add(new object[] { "Mês", "Casa", "Carro", "Pessoal" });
chartData.Add(new object[] { "12/14", 10.2, 5.0, 2.46 });
chartData.Add(new object[] { "01/15", 110.20, 11.12, 1.87 });
chartData.Add(new object[] { "02/15", 10.22, 2.11, 90.11 });
chartData.Add(new object[] { "03/15", 86.32, 10.12, 3.71 });
chartData.Add(new object[] { "04/15", 50.11, 41.60, 6.33 });
chartData.Add(new object[] { "05/15", 20.1, 50.77, 12.33 });
chartData.Add(new object[] { "06/15", 55.2, 15.0, 62.46 });
chartData.Add(new object[] { "07/15", 20.20, 2.12, 10.87 });
chartData.Add(new object[] { "08/15", 12.22, 20.11, 9.11 });
chartData.Add(new object[] { "09/15", 186.32, 14.12, 31.71 });
chartData.Add(new object[] { "10/15", 1.11, 8.60, 61.33 });
chartData.Add(new object[] { "11/15", 20.11, 12.60, 16.33 });
return chartData;
}
}
}
Gráfico de Torta - com evento clique abrir outro sub-gráfico
GraficoPie.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GraficoPie.aspx.cs" Inherits="Graficos.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script>
var chart;
var dados;
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: 'Distribuição de valores por cidade'
};
$.ajax({
type: "POST",
url: "GraficoPie.aspx/GetDados",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
dados = google.visualization.arrayToDataTable(r.d);
chart = new google.visualization.PieChart($("#chart")[0]);
google.visualization.events.addListener(chart, 'select', selecionadoGrafico);
chart.draw(dados, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
function selecionadoGrafico() {
var selectedItem = chart.getSelection()[0];
if (!selectedItem) {
// nada selecionado
return;
}
var titulo = dados.getValue(selectedItem.row, 0);
var id = dados.getValue(selectedItem.row, 2);
var options = {
title: 'Distribuição de valores de ' + titulo
};
$.ajax({
type: "POST",
url: "GraficoPie.aspx/GetDadosDetalhes",
data: '{cidade: "' + titulo + '", id: ' + id + ' }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
chart2 = new google.visualization.PieChart($("#chart2")[0]);
chart2.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="chart" style="width: 1024px; height: 700px;">
</div>
<hr />
<div id="chart2" style="width: 1024px; height: 700px;">
</div>
</form>
</body>
</html>
GraficoPie.cs
using System;
using System.Collections.Generic;
using System.Web.Services;
namespace Graficos
{
public partial class Default : System.Web.UI.Page
{
[WebMethod]
public static List<object> GetDados()
{
List<object> chartData = new List<object>();
chartData.Add(new object[] { "Cidade", "Valor", "Id" });
chartData.Add(new object[] { "Criciuma", 110.20, 1 });
chartData.Add(new object[] { "Içara", 10.22, 2 });
chartData.Add(new object[] { "Nova Veneza", 86.32, 3 });
chartData.Add(new object[] { "Floripa", 50.11, 4 });
chartData.Add(new object[] { "Araranguá", 20.1, 5 });
return chartData;
}
[WebMethod]
public static List<object> GetDadosDetalhes(string cidade, int id)
{
List<object> lista = new List<object>();
lista.Add(new object[] { "Bairro", "Valor" });
lista.Add(new object[] { "Michel", 78.10 });
lista.Add(new object[] { "Pinheirinho", 5.12 });
lista.Add(new object[] { "Próspera", 43.10 });
lista.Add(new object[] { "Ceará", 10.21 });
return lista;
}
}
}