Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

vinitf

Atribuir os dados da url para o gráfico com JSON e underscore

Recommended Posts

Pessoal, estou com problemas para colocar os dados resultantes no gráfico. Eles obrigatoriamente precisam ser colocados por JSON e a verificação do status, por underscore (acredito eu que esse último já esteja certo). A minha dificuldade é não saber o que inserir em 'data', e o que está faltando para o gráfico aparecer. A atribuição dos dados pode ser tanto pela var dados, quanto pela url, escolham o que acharem mais apropriado. Ajudem, por favor

Obs: Não esquecer de adicionar os recursos externos

<div class ="container">
  <body>
    <center> <h1>Status das empresas </h1> <br> </center>
<div><canvas id="grafico" width="200" height="40"></canvas> </div> 
  </body>
</div>
var dados = [{
  "Nome": "IPP",
  "Status": true
}, {
  "Nome": "PAC",
  "Status": true
}, {
  "Nome": "PAIC",
  "Status": true
}, {
  "Nome": "PAS",
  "Status": true
}, {
  "Nome": "PIA",
  "Status": true
}, {
  "Nome": "PIAPROD",
  "Status": true
}, {
  "Nome": "PIMES",
  "Status": true
}, {
  "Nome": "PIMPF",
  "Status": true
}, {
  "Nome": "PMCC",
  "Status": true
}, {
  "Nome": "PMS",
  "Status": true
}, {
  "Nome": "BMOPATATV.GetBMOPATATV",
  "Status": true
}, {
  "Nome": "BMOPATATV.GetCountBMOPATATV",
  "Status": true
}, {
  "Nome": "CESSAOBM",
  "Status": true
}, {
  "Nome": "SETOR",
  "Status": true
}, {
  "Nome": "AD.GetData",
  "Status": true
}, {
  "Nome": "AD.GetDataDT",
  "Status": true
}, {
  "Nome": "AGROAGENCIAS",
  "Status": true
}, {
  "Nome": "AGROFASES",
  "Status": true
}, {
  "Nome": "AGROFONTES",
  "Status": true
}, {
  "Nome": "AGROMUNICIPIOS",
  "Status": true
}, {
  "Nome": "AGROOCORRENCIAS",
  "Status": true
}, {
  "Nome": "AGROPRODUTOS",
  "Status": true
}, {
  "Nome": "AGROQUESTIONARIOSMUNICIPAIS",
  "Status": true
}, {
  "Nome": "AGROQUESTIONARIOSUF",
  "Status": true
}, {
  "Nome": "AGROQUESTIONARIOSUF",
  "Status": true
}, {
  "Nome": "PMC_CRIPTO",
  "Status": true
}, {
  "Nome": "BDOCFUNCUE",
  "Status": true
}, {
  "Nome": "BM",
  "Status": false
}];
//underscore
var testCountBy = _.countBy(dados, function(Status) {
  return Status === true ? 'on' : 'off';
});
console.log(testCountBy.on, testCountBy.off);

var ctx = document.getElementById("grafico").getContext("2d");
var myChart = new Chart(ctx).Pie(data);

var data = {
  // labels: ["Serviços online", "Serviços offline"],
  datasets: [{
    backgroundColor: [
      "#3498db",
      "#000000",
    ],
    //verificar data
    data: ????,
    options: {
      animation: {
        animateScale: true
      }
    }
  }]
};

function drawPieChart() {
//json
  var jsonData = $.ajax({
    url: 'http://servicosweb.ibge.gov.br/GetStatus.ashx',
    dataType: 'json',
  }).done(function(results) {

    var dados = [];
    results["packets"].forEach(function(packet) {
      dados.push(parseFloat(packet.payloadString));
    });

    // Create the chart.js data structure using 'labels' and 'data'
    var Tempdata = {
      labels: ["Serviços online", "Serviços offline"],
      datasets: [{
        data: dados,
      }]
    };
    var ctx = document.getElementById("grafico").getContext("2d");
    var PieChart = new Chart(ctx).Pie(tempData);
  });
}

drawPieChart();

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eis o que eu faria, conforme sugeri no outro tópico:

 

console.log(testCountBy.on, testCountBy.off);
//criar array com a contagem de serviços ON e OFF
var dataArr = [testCountBy.on, testCountBy.off];

Depois, na definição do objecto data:

var data = {
  // labels: ["Serviços online", "Serviços offline"],
  datasets: [{
    backgroundColor: [
      "#3498db",
      "#000000",
    ],
    //verificar data
    data: dataArr, //<--- array com a contagem dos serviços ON e OFF no formato [totalON, totalOFF]
    options: {
      animation: {
        animateScale: true
      }
    }
  }]
};

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Amigo, fiz o que indicou e o gráfico até apareceu, mas a quantidade de serviços online está dando como undefined e os offline tem como resultado o que devia ser para o online (28). Alterando o === para = do true os serviços on aparecem como 28, mas não muda no gráfico se colocar algum Status como false, e os serviços off ficam como undefined.

Veja: 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Experimenta com:

 

_.countBy(dados, function(obj) {
  return obj.Status === true ? 'on': 'off';
}); //devolve: "Object {on: 27, off: 1}"

E assim sendo, no teu código, não precisas desta parte que vem a seguir:

 

testCountBy.on = 0;
testCountBy.off = 0;
for (var i in dados) {
  if (dados[i].Status === false) {
    testCountBy.off++;
  } else {
    testCountBy.on++;
  }
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

O countBy não tem nada a ver com a origem dos dados, já que só é feito posteriormente.

A forma como vais buscar os dados pode ser com $.ajax ou $.getJSON, por exemplo.

 

Uma vez que removeste o código do CodePen, dá para colocares lá de novo o que tens actualmente?

Compartilhar este post


Link para o post
Compartilhar em outros sites
24 minutos atrás, wootzor disse:

O countBy não tem nada a ver com a origem dos dados, já que só é feito posteriormente.

A forma como vais buscar os dados pode ser com $.ajax ou $.getJSON, por exemplo.

 

Uma vez que removeste o código do CodePen, dá para colocares lá de novo o que tens actualmente?

Estranho ter saído, eu não removi... Mas está aqui

http://codepen.io/vinitf/pen/vxxrzW?editors=1010

Compartilhar este post


Link para o post
Compartilhar em outros sites

Explica-me o que pretendes fazer. Na mensagem original pretendias saber que serviços estavam activos/desactivados.

Agora, aparentemente, já não é isso que queres. Pretendes colocar a informação da resposta JSON disponível na página, é?

Compartilhar este post


Link para o post
Compartilhar em outros sites
4 minutos atrás, wootzor disse:

Explica-me o que pretendes fazer. Na mensagem original pretendias saber que serviços estavam activos/desactivados.

Agora, aparentemente, já não é isso que queres. Pretendes colocar a informação da resposta JSON disponível na página, é?

Eu queria apresentar duas formas diferentes de colocar os dados no gráfico: a primeira a partir de um array de dados colocado no código, a outra a partir da url desses dados. No caso seriam dois programas separados, um já está feito, que é o primeiro. 

Compartilhar este post


Link para o post
Compartilhar em outros sites
13 minutos atrás, wootzor disse:

Vê se isto ajuda para o segundo caso.

Na verdade, não. Esqueça a var dados,  a url: 'http://servicosweb.ibge.gov.br/GetStatus.ashx' apresenta esses mesmos dados, o segundo caso seria como eu apresentaria esses dados no mesmo gráfico de antes, só que a partir da url e não da variável. A única coisa que vai mudar do primeiro programa é da onde vem os dados. No caso da url, não precisa apresentar os nomes no gráfico, só a quantidade de status on e off

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 minutos atrás, wootzor disse:

Tudo bem, mas se bem te lembras, eu não consigo aceder à URL, pelo que não tenho forma de testar.

Tente outra vez, aqui os dados aparecem normalmente. Mesmo se não conseguir, de que forma ficaria para colocá-los no gráfico?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Estou indo certo? Ainda não apareceu gráfico aqui, o que pode estar faltando?

http://codepen.io/vinitf/pen/qrPepP

Vê se você consegue entrar nessa url como exemplo, aí você pode tentar aplicar o mesmo código com esses dados. Finge que true e false do outro seriam 2013 e 2014 desse, por exemplo

http://api.pgi.gov.br/api/1/serie/2479.json

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por clovis.sardinha
      Estou em um impasse pois sei pouco de javascript. Estou fazendo um autocomplete com CI4 e Javascript.
      Consigo gerar, através do controllers/model do CI4 um arquivo em json, mas não consigo retorná-lo para o javascript para poder mostrar as opções para consulta. 
      O console.log mostra que estou obtendo o  json() { [native code] }.
      Segue os dois arquivos para ver se alguém me ajuda.
      //arquivo cidade.js async function carregar_cidade(valor) { if (valor.length >= 3) { //console.log("Pesquisar:" + valor); const dados = fetch('Testes/?cidade='+valor, { method: "get", headers: { "Content-Type": "application/json", "X-Requested-With": "XMLHttpRequest" } }); const resposta = (await dados).json; console.log(resposta); var html = "<ul class='list-group position-fixed'>"; html += "<li class='list-group-item'>" + resposta['cid_nome'] + "</li>"; html += "</ul>"; } } <?php //arquivo Testes.php namespace App\Controllers; use App\Models\CidadeModel; /** NÃO MANDAR PARA O SERVIDOR - APENAS TESTES DE FUNÇÕES E OUTROS ELEMENTOS DO CI4 */ class Testes extends BaseController{ protected $tbCidades; public function __construct(){ $this->tbCidades = new CidadeModel(); } public function index(){ $request = \Config\Services::request(); $client = \Config\Services::curlrequest(); $cidades=[]; if($get=$request->getGet()){ $cities=$get['cidade']; $cidadeFiltrada=$this->tbCidades->getCidByName($cities); $cidades= json_encode($cidadeFiltrada); //dd($cidades); } echo view('Testes/testes'); } public function salvar(){ $request = \Config\Services::request(); if($post=$request->getPost()){ dd($post); } } } <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Autocomplete</title> </head> <body> <div class="container"> <h1 class="mt-4 mb-4">Formulário</h1> <form class="row g-3"> <div class="col-12"> <label for="cidade" class="form-label">Cidade</label> <input type="text" name="cidade" class="form-control" id="cidade" placeholder="Pesquisar cidade" onkeyup="carregar_cidade(this.value)"> </div> <span ></span> </form> </div> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="assets/js/cidade.js"></script> </body> </html>
    • Por ment0r
      Boa noite pessoal, tudo bem?
       
      Estou desenvolvendo um sistema simples com exibição de formulário via modal. Uma vez cadastrado o serviço (tabela possui apenas dois campos, id e nome), eles são exibidos numa tabela com um ícone que permite a alteração do nome.

       
      Eu clico no ícone e é chamado um modal que é gerado via ajax (pois são vários registros).
       

       
      Nesse modal é mostrado o serviço e uma vez alterado, o botão Salvar chama uma função que atualiza a tabela servico, concluindo a tarefa. Fiz o mesmo processo pra cadastrar o serviço, com a diferença de que o modal está presente na mesma página, ou seja, não é chamado via ajax.
       
      Eis os códigos:
      <a href="#" onclick="modalUpdate(<?= trim($array['id']) ?>)"> <i class='bx bx-edit'></i> </a> // Trecho onde eu chamo a função modalUpdate. Função btAltServico click:
      $('#btAltServico').click(function() { var inpnome = $('#nome'); var inpid = $('#id'); if (inpnome.val() == '') { swal("Atenção", "Por favor, preencha os campos obrigatórios", "warning"); if (inpnome.val() == '') { inpnome.css("border","2px solid #f94545"); } else { inpnome.css("border",""); } alert(inpnome); alert(inpid); } else { $.ajax({ url: '../inc/ajax/altServico.php', type: 'post', dataType: 'json', // pode ser html data: { nome : inpnome.val(), id : inpid.val() }, success: function(resposta){ if (resposta == 1) { inpnome.val(""); inpnome.css("border",""); swal("Sucesso", "Serviço alterado", "success"); } else { if (resposta == 0) { swal("Erro", "Serviço não alterado. Log de erro gerado.", "error"); } else { swal("Atenção", "Serviço já cadastrado", "warning"); } } } }) } });  
      E modalUpdate.php :
       
      <?php /* * altServico.php * * Script responsável pelo update de serviços na tabela servico * * Função chamada pelo arquivo ajax.js */ //if ($_POST) { require'../conn.php'; require'../../class/class.geral.php'; $geral = new Geral(); $nome = $_POST['nome']; $id = $_POST['nome']; $ativo = 1; // Verifica se o servico já foi cadastrado $sqlVer = "select nome from algo68_db_cliente.servico where nome = '".$nome."' and id <> ".$id.""; $queryVer = mysqli_query($conn, $sqlVer); $resultVer = mysqli_num_rows($queryVer); if ($resultVer > 0) { echo json_encode(2); // servico já cadastrado } else { // Update do servico $sql = "update algo68_db_cliente.servico set nome = '".$nome."', ativo = ".$ativo." where id = ".$id; $query = mysqli_query($conn, $sql); $result = mysqli_affected_rows($conn); if ($result > 0) { echo json_encode(1); // alterou o servico } else { $geral->logErro(date('d/m/Y|H:i:s'), @$_SERVER[REQUEST_URI], 'AlterarServico', mysqli_error($conn)); echo json_encode(0); // não alterou o servico } } //} ?> O problema é que quando clico no botão Salvar, não acontece nada - se eu colocar um alert qualquer na função click, só pra saber se está chegando, também não da nada. E está da mesma forma que o cadastro de serviço, que funciona perfeitamente.

      Bom, é isso pessoal, tentei ser o mais breve e especifico possível. Qualquer ajuda é bem vinda, obrigado a todos, desde já.
    • Por FabianoSouza
      Olá pessoal.
      Eu já utilizo o FOR JSON PATH para retornar o o resultado de uma consulta com JSON. Isso eu já sei fazer.
       
      O que preciso é criar uma função que receba um SELECT como parâmetro e retorne o resultado desse SELECT já formatado como JSON.
      Estou tentando isso, mas sem sucesso.
       
      A function dbo.fn_retornaJsonPath :
      (@String NVARCHAR(MAX)) RETURNS NVARCHAR(MAX) AS BEGIN BEGIN IF @String <> NULL SET @String = (SELECT @String AS jsonPath FOR JSON PATH) END BEGIN IF @String IS NULL SET @String = '[]' END RETURN @String END Forma de executar:
      SET @sql = 'SELECT ' SET @sql = @sql + ' dbo.fn_retornaJsonPath ((SELECT TT.tema FROM dbo.tabela AS TT WHERE TT.cd = CTT.id)) AS ''temas'' ' SET @sql = @sql + ' FROM dbo.minhaTab AS CTT ' EXEC(@sql) Mas não está rolando....
    • Por Danilo - Jesus voltará!
      Olá pessoal, tenho uma div a qual através de um select categorias eu trago dados de empresas do banco, aí preciso clicar nas listagens das empresas e pegar o ID quando clica no checkbox e gravar pelo ajax novamente na session feita no arquivo php tipo um carrinho de compras, que essa parte já tenho... só não to conseguindo pegar os ids gerados dinamicamente no retorno feito do ajax, eles aparecem com F12 ao inspecionar, mas não aceita eu clicar para pegar o ID, acho que é algo de DOM, mas não to sabendo fazer... alguém aí saberia me ajudar como pegar esses ids ao clicar, já que eles vem dinamicamente?
       
      obrigado
    • Por joao b silva
      <input type="text" class="form-control" id="produto" name="produto"  onblur="BuscaPr()">
       
       
      Ola. eu chamo a função JS a seguir  no onblur do input acima. cikiqyeu is alerts para confirmar a chamada da função. ta chamando. mas alem dos alerts nao acontece mais nada. segue a função JS e o arquivo php que é chamado no ajax:
       
       
      FUNSAO JS
       
          function BuscaPr(){
              var buscaTexto = document.getElementById('produto').value
              alert(buscaTexto) 
              alert(buscaTexto.length) 
              $.ajax({
                  method: 'post',
                  url: 'sistema/produto/buscapr.php',
                  data: {busca: 'sim', texto: buscaTexto},
                  dataType: 'json',
                  success: function(retorno){
                          if(retorno.qtd == 0){
                              alert('q = 0')
                                  $('#resbuscapro').html('<p>Não encontramos resultados para sua busca</p>');
                          }else{
                              alert('q + 0')
                                  $('#resbuscapro').html(retorno.dados);
                          }
                  }
              });
          }

      O ARQUIVO PHP:
       
      <?php
      if (!session_id()):
          session_start();
      endif;
      require_once('_app/Config.inc.php');
      require_once('./Lib.php');
      if (isset($_POST['busca']) && $_POST['busca'] == 'sim'):
          $textoBusca = strip_tags($_POST['texto']);
          $retorno = array();
          $Par = "EM={$_SESSION['userlogin']['emCODIGO']}";
          $Fil = " where emCODIGO = :EM and prDESCRICAO like '%{$textoBusca}%' ";
          $Produto = new Read;
          $Produto->FullRead("select * from produto {$Fil}", $Par);
          if ($Produto->getResult()):
              $retorno['qtd'] = $Produto->getRowCount();
              foreach ($Produto->getResult() as $pro):
                  extract($pro);
                  $retorno['dados'] .= '<a href="#" id='.$prCODIGO.':'.$prVENDA.'">'. utf8_encode($prDESCRICAO).'</a>';
              endforeach;
          endif;
          echo json_encode($retorno);
      endif;
      ?>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.