Google Chart API

<< Click to Display Table of Contents >>

Navigation:  Outros >

Google Chart API

Previous pageReturn to chapter overviewNext page

Projeto

 

char1

 

Gráfico de Barras

 

chart-barra

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.25.02.46 });

            chartData.Add(new object[] { "01/15"110.2011.12-1.87 });

            chartData.Add(new object[] { "02/15"10.222.1190.11 });

            chartData.Add(new object[] { "03/15"86.3210.12-3.71 });

            chartData.Add(new object[] { "04/15"50.1141.606.33 });

            chartData.Add(new object[] { "05/15"20.150.7712.33 });

 

            return chartData;

        }

    }

}

 

Gráfico de Linha

 

chart-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.25.02.46 });

            chartData.Add(new object[] { "01/15"110.2011.121.87 });

            chartData.Add(new object[] { "02/15"10.222.1190.11 });

            chartData.Add(new object[] { "03/15"86.3210.123.71 });

            chartData.Add(new object[] { "04/15"50.1141.606.33 });

            chartData.Add(new object[] { "05/15"20.150.7712.33 });

 

            chartData.Add(new object[] { "06/15"55.215.062.46 });

            chartData.Add(new object[] { "07/15"20.202.1210.87 });

            chartData.Add(new object[] { "08/15"12.2220.119.11 });

            chartData.Add(new object[] { "09/15"186.3214.1231.71 });

            chartData.Add(new object[] { "10/15"1.118.6061.33 });

            chartData.Add(new object[] { "11/15"20.1112.6016.33 });

 

            return chartData;

        }

    }

}

 

Gráfico de Torta - com evento clique abrir outro sub-gráfico

 

chart-pie

 

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.201 });

            chartData.Add(new object[] { "Içara"10.222 });

            chartData.Add(new object[] { "Nova Veneza"86.323 });

            chartData.Add(new object[] { "Floripa"50.114 });

            chartData.Add(new object[] { "Araranguá"20.15 });

 

            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;

        }

    }

}