Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

gumesson

Criar gráfico PHP com dados MySQL

Por , em PHP

Recommended Posts

gumesson    0

gumesson
Postado

Boa tarde!

Caros, alguém tem algum exemplo de como criar um gráfico em PHP usando dados de uma tabela do MySQL?

Pode ser via qualquer classe ou biblioteca como Google Chart, pChart, PHPLot... etc.

Obrigado!

Att.

Gumesson

Compartilhar este post

Link para o post
Compartilhar em outros sites

Insanity    9

Insanity
Postado

Você tem duas opções, ou você aprende com os infinitos tutoriais e livros porque isso é uma habilidade básica, ou você especifica melhor o seu problema para que alguém possa resolver.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alaerte Gabriel    662

Alaerte Gabriel
Postado

Uma opção mais fácil pra você, seria especificar qual tipo de gráfico você deseja criar. Após isso, além de existir bibliotecas como a que o colega passou acima, sugiro você utilizar o Google Charts, tem tutoriais na própria página.

https://developers.google.com/chart/

Compartilhar este post

Link para o post
Compartilhar em outros sites

gumesson    0

gumesson
Postado

Caros, eu peguei esse código do Dev Media (http://www.devmedia.com.br/introducao-a-google-chart-tools/26453)

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
//carregando modulo visualization
google.load("visualization", "1", {packages:["corechart"]});

//função de monta e desenha o gráfico
function drawChart() {
//variavel com armazenamos os dados, um array de array's
//no qual a primeira posição são os nomes das colunas
var data = google.visualization.arrayToDataTable([
['Linguagem', 'Quando gosto dela'],
['Java', 40],
['PHP', 30],
['Javascript', 25],
['C#', 5],

]);
//opções para exibição do gráfico
var options = {
title: 'Linguagens',//titulo do gráfico
is3D: true // false para 2d e true para 3d o padrão é false
};
//cria novo objeto PeiChart que recebe
//como parâmetro uma div onde o gráfico será desenhado
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
//desenha passando os dados e as opções
chart.draw(data, options);
}
//metodo chamado após o carregamento
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

É um gráfico de barras que é gerado passando os dados manualmente.

O que eu gostaria é de um exemplo de como trazer esses dados de uma tabela do MySQL. Imaginando que os mesmos dados estão cadastrados em uma tabela qualquer.

Sei que é uma habilidade básica, mas não estou conseguindo fazer. Se alguém puder me ensinar eu agradeço. Se alguém puder fazer um exemplo e for cobrar para isso, basta me passar o orçamento e a forma de pagamento.

Obrigado!
Att.

Gumesson

Compartilhar este post

Link para o post
Compartilhar em outros sites

VerdenKaf    4

VerdenKaf
Postado

Não tem segredo, a segunda entrada após a virgula é referente ao dado inserido, dê um echo ali e pronto.

['Java', <?php echo $suavariavel; ?>],
['PHP', 30],
['Javascript', 25],
['C#', 5],

Idealmente você precisa tentar fazer por si só e vir com as dúvidas que surgirem.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP

  • Conteúdo Similar

    • Mauricio Molina
      Grafico Dinamico Chart.js
      Por Mauricio Molina
      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!
       
       
    • Diego-SLP
      Grafico Bootstrap+PHP
      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");  
    • D Design
      Gráfico interativo
      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.

    • veronicasm
      Edição de gráfico de uma página JS
      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);

       
       
       
    • Zarddy77
      Tabelas e Graficos em JavaScript
      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.

  Aceito