Jump to content
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();

 

Share this post


Link to post
Share on other 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
      }
    }
  }]
};

 

  • +1 1

Share this post


Link to post
Share on other 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: 

 

Share this post


Link to post
Share on other 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++;
  }
}

 

  • +1 1

Share this post


Link to post
Share on other 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?

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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, é?

Share this post


Link to post
Share on other 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. 

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By HigorCrds
      Bom, o que eu consegui até agora foi fazer com que, ao usuário clicar em algum dos botões de paginação (1, 2, 3...) o PHP guarde uma SESSION com o número da página correspondente.
      Segue o código:
       
      <!-- BOTÃO COM O NÚMERO DA PÁGINA --> <button onclick="mudaVar(<?php echo $i; ?>);"> <?php echo $i; ?> </button> <!-- FUNÇÃO PARA GUARDAR SESSION PG --> function mudaVar(valor) { $.ajax({ url:'sessions.php?valor='+valor }); } // GUARDA SESSION PG if(isset($_GET['valor'])){ $_SESSION['pg'] = $_GET['valor']; } Até aí tudo bem, só que o problema é que a SESSION não é alterada naquele momento, só quando eu atualizo a página.
      Como corrigir isso?
    • By asacap1000
      Galera me ajudem por favor, estou pirando kkkkk
       
      Seguinte, tenho um form que realiza o submit via javascrit enviando os dados para uma página php formatada em json.
      Está gravando perfeitamente porém preciso dos dados do retorno, como Link do boleto, e alguns outros resultados para inserir no banco nesse ponto já pesquisei um monte testei de tudo até a página bugar e nada kkkk
       
      o Script que utilizo para o envio é esse:
       
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#frmBoleto").submit(function(){ $.ajax({ type: "POST", url: "https://www.sitedaloja.com.br/action/boleto_bradesco/gerando_boleto.php", data: $(this).serializeArray(), }).done(function( msg ) { }); return false; }); </script> Como fazer para capturar os dados  da resposta do json?  
    • By FabianoSouza
      Tenho a function A, que captura valores e os transfere para a function B (que é um AJAX).
       
      Preciso que a function B passe seu resultado para a function A. Creio que precise de um callback. Mas não estou sabendo com estruturar isso.
      Vejam como estão os códigos:
       
      FUNCTION A
      function upDateRating(e) { var $alvoClick = getTarget(e) , $ul = $alvoClick.parentNode , $idItem = $alvoClick.parentNode.parentNode.parentNode.parentNode.id , $valRating = $alvoClick.value var $array = [ { idItem:$idItem , favorito: 1 , rating: $valRating } ] upDateCard($array) }  
      FUNCTION B (AJAX)
      function upDateCard(e) { var $array = e , $dados = JSON.stringify($array); function ajax() { var $obj = createXMLHTTP(); $obj.open('post', 'minhaPagina', true); $obj.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); $obj.onreadystatechange=function(){ if ($obj.readyState == 4 && $obj.status == 200){ try { var $strResp = JSON.parse($obj.responseText); } catch(e) { alert('Erro. Dados em formato inválido.') return false; } return $strResp //PRECISO PASSAR ESSE VALOR DE VOLTA PARA A FUNCTION A } } $obj.send(encodeURI('str='+$dados)) } ajax() }  
       
    • By s3c0
      Fala pessoal,
       
      estou com um probleminha com uma integração, onde preciso ler um resposta JSON em ASP Clássico.
       
      a resposta é
       
      {"id":1,"name":"PAC","price":"45.65","custom_price":"45.65","discount":"7.41","currency":"R$","delivery_time":8,"delivery_range":{"min":8,"max":8},"custom_delivery_time":8,"custom_delivery_range":{"min":8,"max":8},"packages":{"price":"45.65","discount":"7.41","format":"box","dimensions":{"height":20,"width":20,"length":20},"weight":"1.00","insurance_value":"1000.00","products":{"id":"teste1","quantity":1}},"additional_services":{"receipt":true,"own_hand":false,"collect":false},"company":{"id":1,"name":"Correios","picture":"https:\/\/sandbox.melhorenvio.com.br\/images\/shipping-companies\/correios.png"}},{"id":2,"name":"EXPRESSO","price":"68.51","custom_price":"68.51","discount":"11.95","currency":"R$","delivery_time":5,"delivery_range":{"min":5,"max":5},"custom_delivery_time":5,"custom_delivery_range":{"min":5,"max":5},"packages":{"price":"68.51","discount":"11.95","format":"box","dimensions":{"height":20,"width":20,"length":20},"weight":"1.00","insurance_value":"1000.00","products":{"id":"teste1","quantity":1}},"additional_services":{"receipt":true,"own_hand":false,"collect":false},"company":{"id":1,"name":"Correios","picture":"https:\/\/sandbox.melhorenvio.com.br\/images\/shipping-companies\/correios.png"}},{"id":3,"name":".Package","price":"33.51","custom_price":"33.51","discount":"15.58","currency":"R$","delivery_time":6,"delivery_range":{"min":5,"max":6},"custom_delivery_time":6,"custom_delivery_range":{"min":5,"max":6},"packages":{"format":"box","dimensions":{"height":20,"width":20,"length":20},"weight":"1.00","insurance_value":"1000.00","products":{"id":"teste1","quantity":1}},"additional_services":{"receipt":true,"own_hand":false,"collect":false},"company":{"id":2,"name":"JadLog","picture":"https:\/\/sandbox.melhorenvio.com.br\/images\/shipping-companies\/jadlog.png"}},{"id":4,"name":".Com","price":"32.63","custom_price":"32.63","discount":"26.48","currency":"R$","delivery_time":5,"delivery_range":{"min":4,"max":5},"custom_delivery_time":5,"custom_delivery_range":{"min":4,"max":5},"packages":{"format":"box","dimensions":{"height":20,"width":20,"length":20},"weight":"1.00","insurance_value":"1000.00","products":{"id":"teste1","quantity":1}},"additional_services":{"receipt":true,"own_hand":false,"collect":false},"company":{"id":2,"name":"JadLog","picture":"https:\/\/sandbox.melhorenvio.com.br\/images\/shipping-companies\/jadlog.png"}}  
      Tenho a seguinte página para receber essa resposta
       
      <!--#include file="includes/json2.asp"--> <% Dim objXML, Result Set objXML = Server.CreateObject("Microsoft.XMLHTTP") On Error Resume Next For i = 1 To 3 objXML.Open "POST" , url, False , "", "" objXML.setRequestHeader "content-type", "application/json" objXML.setRequestHeader "accept", "application/json" objXML.setRequestHeader "authorization", "Bearer " & Bearer objXML.Send variavel_json If Err.Number = 0 Then Result = objXML.ResponseText end if Exit For Next Set objXML = Nothing Result = replace(replace(Result,"[",""),"]","") a=Split(Result,".png""}},") For Each x In a set x = JSON.parse(Result) Response.write(x.name & vbNewline) Response.write(x.price & vbNewline) Response.write(x.delivery_time & vbNewline) Response.write(x.company.name & vbNewline) Next %> O que ocorre, é que imprimi somente a última linha
       
      Print
      .Com 32.63 5 JadLog .Com 32.63 5 JadLog .Com 32.63 5 JadLog .Com 32.63 5 JadLog  
       
      Alguém poderia me dizer onde estou errando?
       
      Agradeço a atenção de todos!
       
      Abraços
    • By sronze
      Ola estou com um problema em JavaScript
      O objetivo e digitar um ID/Nome em um input e ele buscar em um arquivo XML fazendo autocomplete e preencher outros dois inputs com os atributos associado ao ID/Nome da base XML.
       
      GIF de exemplo, obs(exatamente oque pretendo fazer): http://blog-media.chromaticsites.com.s3.amazonaws.com/google-places-autocomplete-3/autocomplete-error.gif
       
      Link do XML: https://www.w3schools.com/js/cd_catalog.xm
       
      Segue meu código:
      <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> Nome:<input id="idInput"> UF:<input id="idInput02"> Ano:<input id="idInput03"> <script> var ValorXML1 = []; $(document).on('keyup' , '#idInput' ,function(){ var keyvalue = $("#idInput").val(); var xhttp; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { ValorXML1 = []; CaregarXML(this , keyvalue); } }; xhttp.open("GET", "https://www.w3schools.com/js/cd_catalog.xml", true); xhttp.send(); }); function CaregarXML(xml , key) { var x, i, xmlDoc , key; xmlDoc = xml.responseXML; x = xmlDoc.getElementsByTagName("TITLE"); var cont = 0; for (i = 0; i < x.length; i++) { var valor = x[i].childNodes[0].nodeValue.trim(); var pattern = valor.substring(0 , key.length); if(key.toUpperCase() == pattern.toUpperCase() && cont < 5){ ValorXML1.push(valor); cont++; } } $("#idInput").autocomplete({ source: ValorXML1 }); } $( function() { $( "#idInput" ).autocomplete({ source:ValorXML1 }); }); </script>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.