Ir para conteúdo
Fórum Script Brasil
  • 0

Grafico Bootstrap+PHP


tplantte

Pergunta

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. Obrigado

 

 

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'
        }]
    },

 

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0
<body style="width:50%;margin:0 auto"><div style=height:5%></div>
<?php
echo "valor obtido pelo banco de dados";
$vetor='[12,19,3,5,2,3]';
echo "<p><input id=vetor value=$vetor>";
echo "<p><input type=submit onclick=teste(vetor.value)>"
?>
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  function teste(vetor){
  jvetor=JSON.parse(vetor)
  console.log(jvetor)
  const ctx = document.getElementById('myChart');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: jvetor,
        borderWidth: 1}]},
    options: {scales: {y: {beginAtZero: true}}}});}
</script>

 

Screenshot_1.png

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...