Grafico Dinamico Chart.js

[Mauricio Molina 0]

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!

 

 

[wanderval 19]

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!

[Omar~ 87]

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