Grafico Bootstrap+PHP

tplantte · Maio 4, 2020

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

Frank K Hosaka · Fevereiro 10, 2023

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

Entrar

Grafico Bootstrap+PHP

Pergunta

tplantte

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades