JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<div id="chart-container">
<canvas id="mycanvas"></canvas>
</div>
CSS
#chart-container{
width: 640px;
height: auto;
}
JavaScript
$(document).ready(function() {
$.ajax({
url: "https://www.mocky.io/v2/59f316c23200008b06a624ca",
method: "GET",
success: function(dados) {
console.log(dados);
var departament = [];
var acesso = [];
for( var i in dados){
console.log(dados[i]);
departament.push("Departamento "+dados[i].department);
acesso.push(dados[i].qtdacesso);
}
console.log(acesso);
var chartdado = {
labels:departament,
datasets:[
{
label: 'Departamento Acessos',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: acesso
}
]
};
var ctx = $("#mycanvas");
var grafico = new Chart(ctx, {
type:'bar',
data:chartdado
});
},
error: function(dados){
console.error(dados);
}
});
});