Ir para conteúdo

Arquivado

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

arleyfroes

Gráfico JS com dados MYSQL

Recommended Posts

Boa Tarde,

 

eu tenho o seguinte código com os dados do gráfico inseridos na mão:

 

<html>
  <head>
    <script type="text/javascript" src="js/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

		 var data = google.visualization.arrayToDataTable([
          ['TimeStamp',             'FT001',   'FT002'],
          ['2019-04-10 10:24:09',    300,      400],
          ['2019-04-10 10:25:09',    600,      460],
          ['2019-04-10 10:26:09',    500,       1120],
          ['2019-04-10 10:27:09',     550,      540]
        ]);

     var options = {
          title: 'Company Performance',
          hAxis: {title: 'TimeStamp',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0},
		  backgroundColor: '#E4E4E4',
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px"></div>
  </body>
</html>

gostaria de saber como busco os dados do Banco de Dados Mysql.

image.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não sei mexer com AJAX, meu jeito é meio que uma gambiarra que funciona.. Olha aí:

 

Peguei o arquivo "be_pages_dashboard.min.js" e renomeei para "be_pages_dashboard.min.js.php" e coloquei um código em PHP pra gravar as informações na página:

<?php 

function conn(){
    $conn = new mysqli('localhost', '*****', '*****', '*****');
    if ($conn->connect_errno) {
        die('Falhou em conectar: (' . $conn->connect_errno . ') ' . $conn->connect_error);
    }
    return $conn;
}

function grafico_pontuacao($conexao){
    $pontuacoes = $conexao->query("SELECT * FROM (SELECT DATE(pontuacao_data) AS p_data, (SELECT sum(pontuacao_valor) from  pontuacao WHERE DATE(pontuacao_data) <= p_data) as pontuacao_valida_do_dia FROM pontuacao GROUP BY p_data DESC limit 10) as pontuacao_valida_do_dia_desc ORDER BY p_data");
    foreach ($pontuacoes as $pontuacao){
        $arrayDatas[] = date('d/m/Y', strtotime($pontuacao['p_data']));
        $arrayPontuacao[] = $pontuacao['pontuacao_valida_do_dia']; 
    }
    return array('datas' => $arrayDatas, 'pontuacoes' => $arrayPontuacao);
}

function grafico_clientes($conexao){
    $Clientes = $conexao->query("SELECT * FROM (SELECT usuario_dtcadastro AS c_data, ( SELECT count(*) FROM usuario WHERE DATE(usuario_dtcadastro) <= c_data ) as qtde_cadastros_do_dia FROM usuario GROUP BY c_data DESC limit 10) as clientes_cadastrados_no_dia_desc ORDER BY c_data");
    foreach ($Clientes as $Cliente){
        $arrayDatas[] = date('d/m/Y', strtotime($Cliente['c_data']));
        $arrayClientes[] = $Cliente['qtde_cadastros_do_dia']; 
    }
    return array('datas' => $arrayDatas, 'clientes' => $arrayClientes);
}

$graficoPontuacao = grafico_pontuacao(conn());
$graficoClientes = grafico_clientes(conn());

?>

[ ... JAVASCRIPT ... ]

data: {
	labels: <?=json_encode($graficoPontuacao['datas']);?>,
    datasets: [{
    	label: "This Week",
        fill: !0,
        backgroundColor: "rgba(66,165,245,.45)",
        borderColor: "rgba(66,165,245,1)",
        pointBackgroundColor: "rgba(66,165,245,1)",
        pointBorderColor: "#fff",
        pointHoverBackgroundColor: "#fff",
        pointHoverBorderColor: "rgba(66,165,245,1)",
        data: <?=json_encode($graficoPontuacao['pontuacoes']);?>
        }]
},

[ ... JAVASCRIPT ... ]

 

E na página que queria puxar o arquivo coloquei sem o .php porque no .htaccess está configurado para ocultar a extensão.

<script src="assets/js/pages/be_pages_dashboard.min.js"></script>

Acho que essa não é a maneira mais performática, mas deu certo rsrsrs

 

Resultado:

 

image.thumb.png.a23cfc4457e57c8db88229f689f4facc.png

 

Obs: Utilizado o ChartJS (https://www.chartjs.org/)

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por ILR master
      Fala pessoal, tudo bem?
       
      Tô tentando fazer um pre-loading, mas não consigo de jeito algum.
      Quero mostrar uma animação enquanto a página é carregada e depois de caregada, esconder a animação e mostrar conteúdo.
       
      Aguém pode me ajudar?
       
      Segue código abaixo
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
          <title>PÁGINA LOAD</title>

      <style type="text/css">
      .loadclass {
          border: 2px solid #f3f3f3; /* Light grey */
          border-top: 4px solid #ffc401; /* Blue */
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 2s linear infinite;
      }
      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }
      .conteudo {
          display:none;
      }
      </style>
      <script>
          function loading(){
              document.getElementsByClassName('loadclass')[0].style.display="none";
              document.getElementsByClassName('conteudo').style.display="block";
          }
      </script>
      </head>
      <body onLoad="loading()">
      <div class="loadclass"></div>
      <div class="conteudo">SEU CONTEUDO AQUI DENTRO!!!</div>
      </body>
      </html>
    • Por landerbadi
      Boa tarde pessoal. Estou tentado fazer uma consulta no banco de dados porém estou tendo dificuldades. Tenho uma tabela chamada "itens" com os seguintes campos: id, item, ativo. Nela tem cadastrado vários itens. No campo ativo eu coloco a letra "S" para informar que este item está ativo no sistema. Por exemplo: 1, casa, S 2, mesa, S 3, cama, S 4, moto S 5, rádio O quinto registro "radio" não está ativo no sistema pois não tem um "S" no campo ativo. E outra tabela chamada "produtos" com os seguintes campos (id, item1, item2, item3) com os seguintes registros: 1, casa, mesa, moto 2, mesa, casa, cama 3, rádio, cama, mesa Eu preciso fazer uma busca na tabela produtos da seguinte maneira: Eu escolho um registro na tabela "itens", por exemplo "mesa". Preciso fazer com que o php me liste todos os registros da tabela "produtos" que contenham a palavra "mesa". Até aqui tudo bem eu consigo listar. Estou fazendo assim: <?php $item = "mesa" $sql = mysqli_query($conn, "SELECT * FROM produtos WHERE item1 LIKE '$item' OR item2 LIKE '$item' OR item3 LIKE '$item' LIMIT 10"); while($aux = mysqli_fetch_assoc($sql)) { $id = $aux["id"]; $item1 = $aux["item1"]; $item2 = $aux["item2"]; $item3 = $aux["item3"]; echo $id . " - " . $item1 . ", " . $item2 . ", " $item3 . "<br>"; } ?> O problema é que está listando todos os registros que contém o item mesa. Eu preciso que o php verifique os demais item e me liste somente os registro em que todos os registros estejam ativos no sistema. No exemplo acima ele não deveria listar o registro 3. pois nesse registro contém o item "radio" e este item não está ativo no sistema. Ou seja, o registro "radio" na tabela itens não possui um "S" na coluna "ativo". Alguém sabe como resolver isso?
    • Por First
      Olá a todos!
       
      Eu estou criando um sistema do zero mas estou encontnrando algumas dificuldades e não estou sabendo resolver, então vim recorrer ajuda de vocês.
      Aqui está todo o meu código: https://github.com/PauloJagata/aprendizado/
       
      Eu fiz um sistema de rotas mas só mostra o conteúdo da '/' não sei porque, quando eu tento acessar o register nada muda.
      E eu também quero que se não estiver liberado na rota mostra o erro de 404, mas quando eu tento acessar um link inválido, nada acontece.
      Alguém pode me ajudar com isso? E se tiver algumas sugestão para melhoria do código também estou aceitando.
       
       
      Desde já, obrigado.
    • Por landerbadi
      Olá pessoal, boa tarde
       
      Tenho uma tabela chamada "produtos" com os seguintes campos (id, produto) e outra tabela chamada "itens" com os seguintes campos (id, prod_01, prod_02, prod_03, prod_04).
       
      Na tabela produtos eu tenho cadastrado os seguintes produtos: laranja, maçã, uva, goiaba, arroz, feijão, macarrão, etc.
       
      Na tabela itens eu tenho cadastrado os itens da seguinte maneira:
       
      1, laranja, uva, arroz, feijão;
      2, maçã, macarrão, goiaba, uva;
      3, arroz, feijão, maçã, azeite
       
      Meu problema é o seguinte: 
      Eu escolho um produto da tabela "produtos", por exemplo "uva".  Preciso fazer uma consulta na tabela "itens" para ser listado todos os registros que contenham o produto "uva" e que todos os demais produtos estejam cadastrados na tabela "produtos".
       
      No exemplo acima seria listado apenas dois registros, pois o terceiro registro não contém o produto "uva". 
       
      Alguém pode me ajudar? Pois estou quebrando a cabeça a vários dias e não consigo achar uma solução.
    • Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
×

Informação importante

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