Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ola pessoal,
Alguém pode de dar uma força.
Estou trabalhando em um dashbord baseado em boostrap, estou deixando ele bastante dinâmico, e nele coloquei um gráfico de rosca, o problema que não manjo como fazer o JS buscar os dados de forma dinâmica no banco de dados.
HTML:
<!-- Grafico -->
<div class="card-body">
<div class="chart-pie pt-4 pb-2">
<canvas id="myPieChart"></canvas>
</div>
<div class="mt-4 text-center small">
<span class="mr-2">
<i class="fas fa-circle text-primary"></i> Anúncio
</span>
<span class="mr-2">
<i class="fas fa-circle text-success"></i> Site
</span>
<span class="mr-2">
<i class="fas fa-circle text-info"></i> Outros
</span>
</div>
</div>
</div>
</div>
</div>
JS:// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';// Pie Chart Example
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Anuncio", "Site", "Outros"],
datasets: [{
data: [55, 30, 15], // *os dados deverão ser impressos aqui*
backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
hoverBorderColor: "rgba(234, 236, 244, 1)",
}],
},
options: {
maintainAspectRatio: false,
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
caretPadding: 10,
},
legend: {
display: false
},
cutoutPercentage: 80,
},
});
Os dados precisam ser somados a cada cadastro no BD, sou seja, a cada cadastro o cliente indicara que a OS veio de um anuncio por exemplo, os campos deveram somar quantas OS vieram de anuncio, site e outros.
Obrigado!Basicamente é simples, pois você vai armazenar os índices do gráfico no back-end em um array exemplo:
<?php
$indicesDoGrafico = [55, 30, 15];
E esses então você irá usar no javascript, mas como o javascript que front-end não se relaciona com o back você já tem que entregar isso renderizado para o browser.
Acontece que array em PHP é uma coisa e array em JavasSript é outra completamente diferente você tem que fazer a conversão; o JSON é uma alternativa pois ambas linguagens usam esse paradigma igualmente.
Então no javascript faça a conversão:
var dados = JSON.parse('<?= json_encode($indicesDoGrafico) ?>');
Assim sendo você terá o array necessário para usar no "chart", apenas informando esse array:/ data: [55, 30, 15], // os dados deverão ser impressos aqui */
data: dados,
Não que isso tenha haver com seu problema só de bater o olho já vi, mas faça a correção nos escapes de objetos no seu código do cart "tem virgula sendo usada em local que não deveria". Isso causa lentidão de processamento, pois o browser deve fazer esses ajustes antes de executar o script
não é buscar do banco de dados, somente linguagens de back-end fazem isso, o que você precisa é ter um script do back-end ou api do backend pra poder ser consumida pelo front, mas no seu exemplo não vi nada similar. Se quer a ajuda de alguem aqui a respeito disso precisa falar como estruturou o backend!