Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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": truevar 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() { 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();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:
Experimenta com:
_.countBy(dados, function(obj) {
return obj.Status === true ? 'on': 'off';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++;
}
}Ah, ótimo meu amigo! Deu certo aqui, muito obrigado!
E como ficaria o underscore se os dados fossem da url em vez da variável?
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?
>
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
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, é?
>
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.
Vê se isto ajuda para o segundo caso.
>
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
Tudo bem, mas se bem te lembras, eu não consigo aceder à URL, pelo que não tenho forma de testar.
>
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?
/applications/core/interface/imageproxy/imageproxy.php?img=http://image.prntscr.com/image/1aabd6c6cf884c10b5dac5f2cc0871f0.png&key=35e4d1fc8e4bd915262f033a7902af1d0e96bf6fcd129b60a655f8d0074c46a3" />
A lógica é a mesma. Ler os dados JSON da URL e armazená-los numa variável.
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
Tentei simplificar mais o código, mas ainda falta saber o que falta para armazenar os dados da url
Alguém?
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