Ir para conteúdo
Mauricio Molina

Grafico Dinamico Chart.js

Recommended Posts

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!

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Rengavitp
      Bom dia Pessoal,
      Será que alguém pode me ajudar? Estou com problema com o chartjs. estou gerando grafico ok, porem quando eu preciso gerar o mesmo pela segunda vez passando outros parametros ao invés de substituir ele sobrepõe sobre o antigo, e quando eu passo o mouse sobre o grafico ele fica intercalando entre o antigo e o novo, como faço para limpar o grafico antes de criar o novo? tentei diretamente no canvas mas qualquer metodo de limpeza faz com que pare de funcionar. abaixo meu código.
       
      <script> function montaGraficoProducao() { var ctx; var myChart; var dt1 = document.getElementById("data_pd1").value; var dt2 = document.getElementById("data_pd2").value; $.ajax({ type: "POST", url: "processa/processa_grafico_producao.jsp", data: { data1: dt1, data2: dt2 } }).done(function (msg) { if (msg.replace(/\s/g, '') !== "erro") { var info = msg.trim().split("*"); var l = info[0]; var l1 = l.split(","); var s = info[1]; var s1 = s.split(","); var labels = []; var series = []; l1.forEach(function (mes) { labels.push(mes); }); s1.forEach(function (vl) { series.push(vl); }); ctx = document.getElementById('prodChart').getContext('2d'); myChart = new Chart(ctx, { type: $("#c_tipo_graf").val(), responsive: true, hoverMode: 'index', stacked: true, data: { labels: labels, datasets: [{ label: 'Ton/Mês', fill: false, backgroundColor: "rgba(1, 150, 249, 1)", borderColor: "rgba(1, 150, 249, 1)", data: series }] } }); } else { alert("erro"); } }); } </script>  
    • Por Diego-SLP
      Bom dia,
      Tenho um exemplo de gráfico e gostaria de saber como eu passo valores vindo do banco para as variaveis do grafico (elas estao inseridas manualmente no arquivo) e eu gostaria de forma dinamica via PHP pegando do meu banco MySQL.
       
      já pesquisei mas o que fiz não consegui puxar os valores, ate tentei colocar em session mas ai trouxe somente o ultimo valor e nao todos.
       
       
      var $visitorsChart = $('#movimentacao') var visitorsChart = new Chart($visitorsChart, { data : { labels : ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'], datasets: [{ type : 'line', data : [100, 120, 170, 167, 180, 177, 160], backgroundColor : 'transparent', borderColor : '#007bff', pointBorderColor : '#007bff', pointBackgroundColor: '#007bff', fill : false // pointHoverBackgroundColor: '#007bff', // pointHoverBorderColor : '#007bff' }, { type : 'line', data : [60, 80, 70, 67, 80, 77, 100], backgroundColor : 'tansparent', borderColor : '#ced4da', pointBorderColor : '#ced4da', pointBackgroundColor: '#ced4da', fill : false // pointHoverBackgroundColor: '#ced4da', // pointHoverBorderColor : '#ced4da' }] }, meu PHP esta assim:
       
      $busca = mysqli_query($con,"SELECT EXTRACT(MONTH FROM DATA) mes, SUM(quantidade) AS qtd FROM dosagem_usina WHERE operacao='saida' GROUP BY mes");  
    • Por D Design
      Olá, quero aprofundar meu conhecimento  em programação, e gostaria de  saber  se é possível criar um grafico com 3 pontas com um botão em cada uma, e quando clicar em um deles o gráfico aumentasse naquela direção.

    • Por veronicasm
      Sou iniciante em prgramação web e estou com uma dúvida. Tenho um gráfico que é gerado em uma página js e chamado a partir de uma página php, porém como o arquivo é de um exemplo e está com valores fixos, preciso saber como alterá-lo passando informações de uma consulta sql .
       
      Este é o trecho do meu código que está no index.php e que chama o gráfico
       <div class="row">
                  <div class="col-md-4">
                    <div class="card card-chart">
                      <div class="card-header card-header-success">
                        <div class="ct-chart" id="dailySalesChart"></div>
                          </div>
                      <div class="card-body">
                        <h4 class="card-title">Abertura de Chamados</h4>
                        <p class="card-category">
                          <span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today sales.</p>
                      </div>
                      <div class="card-footer">
                        <div class="stats">
                          <i class="material-icons">access_time</i> updated 4 minutes ago
                        </div>
                      </div>
                    </div>
                  </div>
       
      e este é o código que está no dashboard.js e que cria o gráfico

            /* ----------==========     Daily Sales Chart initialization    ==========---------- */
            dataDailySalesChart = {
              labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
              series: [
                [12, 17, 7, 17, 23, 18, 38] 
                
              ]
            };
            optionsDailySalesChart = {
              lineSmooth: Chartist.Interpolation.cardinal({
                tension: 0
              }),
              low: 0,
              high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
              chartPadding: {
                top: 0,
                right: 0,
                bottom: 0,
                left: 0
              },
            }
            var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
            md.startAnimationForLineChart(dailySalesChart);

       
       
       
    • Por Zarddy77
      Boa noite. Gostaria de ajuda com a formatação desse gráfico!
      É possível ajustar a width dele, sem que seja através da fullwidth?
      Eu gostaria de diminuir o espaço final, após a coluna dezembro
       
      Desde já, muito obrigado!
       
      new Chartist.Line('#ct-visits', {
      labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
      series: [
      [5, 2, 7, 4, 5, 3, 5, 4, 2, 3, 4, 5]
      , [2, 5, 2, 6, 2, 5, 2, 4, 5, 2, 4, 7]
      ]
      }, {
      top: 0,
      low: 1,
      showPoint: true,
      //fullWidth: true,
      plugins: [
      Chartist.plugins.tooltip()
      ],
      axisY: {
      labelInterpolationFnc: function (value) {
      return (value / 1) + '$';
      }
      },
      showArea: true,
      //resize: true
      });
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.