Atribuir os dados da url para o gráfico com JSON e underscore
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();Discussão (17)
Carregando comentários...