2

Olá, estou começando a usar ajax e a API do Google (chart) para criar gráficos.

Utilizo um Generic Handler que chamei de 'ColaboradoresEmpresa.ashx', nele eu faço uma consulta no banco de dados e retorno uma string dessa forma;

context.Response.Write(valores.ToString());

Os dados que eu recebo vem pro Ajax como uma string (no formato correto do parâmetro que devo passar) da seguinte forma;

inserir a descrição da imagem aqui

A minha dúvida: 'É possível converter essa string para um array ou parâmetro válido para que a minha chamada a API do Google funcione?' pois da forma que está agora eu recebo uma mensagem de erro dizendo: 'Erro em tempo de execução do JavaScript: Not an array'

Função Ajax:

< script type = "text/javascript" >
  google.load("visualization", "1", {
    packages: ["corechart"]
  });
$(document).ready(function() {
  var urlH = "GenericHandler/ColaboradoresEmpresa.ashx";
  $.ajax({
    url: urlH,
    type: "POST",
    data: {},
    async: true,
    success: function(Valores) {
      alert(Valores);
      var data = google.visualization.arrayToDataTable(Valores);
      var options = {
        title: '',
        is3D: false
      };
      var chart = new google.visualization.PieChart(document.getElementById('Empresa'));
      chart.draw(data, options);
    },
    error: function(data) {
      alert("ERRO: " + data.status);
    },
    timeout: 15000
  });
}); < /script>


Código do arquivos .ASHX que retorna a string pro Ajax;

public void ProcessRequest(HttpContext context)
        {
            SqlCommand comando = new SqlCommand();
            comando.Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["NOMEDB"].ConnectionString);
            comando.CommandText = "SELECT/CONSULTA NO BANCO DE DADOS";
            comando.Connection.Open();
            string valores = "[['Empresa_', 'Colaboradores'], ";
            SqlDataReader dr = comando.ExecuteReader();
            while (dr.Read())
            {
                if (dr["NOMEFANTASIA"] != DBNull.Value)
                {
                    valores += "['" + dr["NOMEFANTASIA"].ToString() + "',";
                }
                if (dr["QTD"] != DBNull.Value)
                {
                    valores += dr["QTD"].ToString() + "],";
                }
            }
            if (valores.Length > 0)
            {
                valores = valores.Substring(0, valores.Length - 1) + ", ]";
            }
            comando.Connection.Close();
            context.Response.Write(valores.ToString());
        }
13
  • uma pergunta, a variável valores do lado do servidor, é um array? Commented 13/11/2014 às 11:59
  • @EnzoTiezzi é uma string no formato: "[['Empresa_', 'Colaboradores'], ['Cleber', 27000], ['Jonathan', 27000], ['Leonardo', 27000], ]". Não sei como convertê-la.
    – CleberTXR
    Commented 13/11/2014 às 12:01
  • Como você obtém o valor dessa String no seu servidor? Commented 13/11/2014 às 12:11
  • @EnzoTiezzi eu faço uma consulta num banco de dados atravésde um arquivo .ashx, concateto e retorno uma string no formato acima e retorno ela pro ajax com um context.Response.Write(valores.ToString()); mas você também pode ler isso como context.Response.Write("[['Empresa_', 'Colaboradores'], ['Cleber', 27000], ['Jonathan', 27000], ['Leonardo', 27000], ]");
    – CleberTXR
    Commented 13/11/2014 às 12:21
  • 1
    Vamos continuar esta discuss&#227;o no bate-papo. Commented 13/11/2014 às 13:05

1 Resposta 1

1

Fiz um teste utilizando esses links e consegui utilizar o Generic Handler utilizando essa biblioteca

https://github.com/zoranmax/GoogleDataTableLib

e o código disponível no docs do google chart (https://developers.google.com/chart/interactive/docs/php_example)

outra resposta: https://stackoverflow.com/questions/2363721/how-to-create-the-google-datatable-json-expected-source-using-c

Código aspx

<head runat="server">
<title>Teste Google Chart</title>

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

function drawChart() {
  var jsonData = $.ajax({
      url: "chartData.ashx",
      dataType:"json",
      async: false
      }).responseText;

  // Create our data table out of JSON data loaded from server.
  var data = new google.visualization.DataTable(jsonData);

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 400, height: 240});
}

</script>

Código ashx

using Google.DataTable.Net.Wrapper;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TesteGoogleChart
{
    /// 
    /// Summary description for chartData
    /// 
    public class chartData : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";

            List funcs = new List();

            funcs.Add(new Funcioanrios { Nome = "Araujo", Salario = 550 });
            funcs.Add(new Funcioanrios { Nome = "Araujo a", Salario = 500 });
            funcs.Add(new Funcioanrios { Nome = "Araujo b", Salario = 400 });
            funcs.Add(new Funcioanrios { Nome = "Araujo c", Salario = 350 });
            funcs.Add(new Funcioanrios { Nome = "Araujo d", Salario = 300 });
            funcs.Add(new Funcioanrios { Nome = "Araujo e", Salario = 250 });

            var dt = new Google.DataTable.Net.Wrapper.DataTable();
            dt.AddColumn(new Column(ColumnType.String, "Nome", "Nome"));
            dt.AddColumn(new Column(ColumnType.Number, "Salario", "Salario"));

            foreach (var item in funcs)
            {
                Row r = dt.NewRow();
                r.AddCellRange(new Cell[]
                {
                    new Cell(item.Nome),
                    new Cell(item.Salario)
                });
                dt.AddRow(r);
            }

            //Let's create a Json string as expected by the Google Charts API.
            context.Response.Write(dt.GetJson());

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }


    public class Funcioanrios
    {
        public string Nome { get; set; }
        public decimal Salario { get; set; }
    }

}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .