0

Sou novo por aqui e estou precisando de umas ajudas.

Estou começando a desenvolver um dashboard em HTML onde conterá gráficos e tabelas dinâmicas com PHP. Ainda não tenho o conteúdo mas estou estudando e fazendo testes com dados fictícios e localmente.

Estou usando o Highchats para a criação dos gráficos, se tiver uma outra sugestão agradeço tbm.

ok, vou expor meu objetivo e depois a dúvida

Objetivo: Fazer um gráfico dinâmico que possui um menu DropDown, onde será um filtro para o gráfico, todas as informações serão trazidas em php de um banco, tanto para o menu dropDown quanto para a geração do gráfico.

Exemplo do banco:

Exemplo Tabela DB

Exemplo do gráfico: Exemplo do gráfico

Esse gráfico não esta dinâmico, mas é isso que eu estou querendo, neste exemplo não fiz o menu DropDown, mas imagina que neste menu terão os nomes trazidos do banco e ao selecionar um nome o gráfico altere somente com as informações daquele cliente.

Pois então minha dúvida está exatamente em como fazer isso.

Por favor me dão uma ajuda de como posso fazer isso, se é possível se tem algum tutorial explicando, só me mostrem o caminho ou uma solução.

Agradeço muito e espero ter me feito entender.

Desde já agradeço!

4
  • sobre sugestão de outros gráficos, gosto do APEXCHARTS. Com relação o usuário poder filtrar atualizar o gráfico, você pode criar uma combo (com javascript) e toda vez que houver uma troca de valores na mesma, atualizar a variável do seu SELECT : SELECT * FROM VENDAS WHERE USUARIO = '$SuaVariavel'; Commented 16/07/2019 às 13:13
  • vc poderia esclarecer, explicar melhor esse combo (com javascript). Obrigado! Commented 16/07/2019 às 13:32
  • Basicamente você tem criar um combox com os dados oriundos do banco de dados, exemplo : vivaolinux.com.br/topico/PHP/COMBOBOX-DINAMICO-PHP Depois você tem que criar uma função javascript para que todas vez que houver uma alteração na combo seja disparado um novo SELECT na tabela Commented 16/07/2019 às 14:02
  • Obrigado pelas dicas, vou pesquisar sobre o APEXCHARTS e o combobox, assim que eu tiver algum resultado volto a postar, até o momento agradeço. Se alguém tiver outras soluções ou dicas agradeço tbm. Commented 16/07/2019 às 14:26

1 Resposta 1

1

Tem muitas maneiras de fazer isso, mas a que mais uso é uma função update do próprio Highcharts que combina mais ou menos com a sugestão do combobox sugerido nos comentários. Você pode criar um select onde passa o ID do cliente para um ajax e usando a ação change você dispara o filtro para o seu gráfico.

Primeiro armazene o código do seu gráfico em uma variável, no caso aqui var chart, a partir dela com a função chart.update você consegue alterar quase tudo no gráfico a partir de um gatilho.

var chart = Highcharts.chart('control', {...});

Depois é só construir o gatilho mais ou menos assim, como não tenho o código do gráfico estou fazendo uma sugestão.

$("[data-change]").change(function (e) {
    setTimeout(function () {
        $.post('seuendpoint/url', {clienteID: clienteID} , function (callback) {
            if (callback.chart) {
                chart.update({
                    series: [{
                        data: callback.chart.values
                    }]
                });
            }
        }, "json");
    }, 200);
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .