Javascript Gráfico mudar valores com botão

David Martinho · 1 de fevereiro de 2022

Bom Dia Pessoal

Tenho um gráfico simples que muda de valores de acordo com os botões, e esses valores vêm de uma BD que eu criei.

Agora a questão é a seguinte.

<html>
    <title>
        Teste
    </title>
    <h1>
        Teste
    </h1>
    <body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="graph" width="800px" height="400px"></canvas>
<button id="btn1">
Option 1
</button>
<button id="btn2">
Option 2
</button>
<script>
  $(document).ready(function () {
            showGraph();
        });

        function showGraph()
        {
            {
                $.post("data.php",
                function (data)
                {
    console.log(data);
                    var mês = [];
                    var linha = [];
                    var tc = [];

                    for (var i in data) {
                        linha.push(data[i].linha);
                        mês.push(data[i].mês);
                        tc.push(data[i].tc);
                    }

var data = {
    labels: linha, tc,

    datasets: [
        {
                                label: 'Bootleneck Linha',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: tc
                            }
                        ]
                    };

var data2 = {
    labels: mês, tc,

    datasets: [
        {
                                label: 'Bootleneck Linha',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: tc
                            }
                        ]
                    };

var context = document.querySelector('#graph').getContext('2d');
new Chart(context).Line(data);
    
$("#btn1").on("click", function() {
     var context1 = document.querySelector('#graph').getContext('2d');
    new Chart(context1).Line(data);
  });
$("#btn2").on("click", function() {
    var context2 = document.querySelector('#graph').getContext('2d');
    new Chart(context2).Line(data2);

                });

            });

        }
            
    }
    </script>
    </body>
</html>

como faço para que a variável data2 vá buscar os valores a outro php sem ser o data.php? (que é o que está a ser usado de momento para as duas variáveis).

David Martinho · 1 de fevereiro de 2022

3 horas atrás, David Martinho disse:

Bom Dia Pessoal

Tenho um gráfico simples que muda de valores de acordo com os botões, e esses valores vêm de uma BD que eu criei.

Agora a questão é a seguinte.

<html>
    <title>
        Teste
    </title>
    <h1>
        Teste
    </h1>
    <body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="graph" width="800px" height="400px"></canvas>
<button id="btn1">
Option 1
</button>
<button id="btn2">
Option 2
</button>
<script>
  $(document).ready(function () {
            showGraph();
        });

        function showGraph()
        {
            {
                $.post("data.php",
                function (data)
                {
    console.log(data);
                    var mês = [];
                    var linha = [];
                    var tc = [];

                    for (var i in data) {
                        linha.push(data[i].linha);
                        mês.push(data[i].mês);
                        tc.push(data[i].tc);
                    }

var data = {
    labels: linha, tc,

    datasets: [
        {
                                label: 'Bootleneck Linha',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: tc
                            }
                        ]
                    };

var data2 = {
    labels: mês, tc,

    datasets: [
        {
                                label: 'Bootleneck Linha',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: tc
                            }
                        ]
                    };

var context = document.querySelector('#graph').getContext('2d');
new Chart(context).Line(data);
    
$("#btn1").on("click", function() {
     var context1 = document.querySelector('#graph').getContext('2d');
    new Chart(context1).Line(data);
  });
$("#btn2").on("click", function() {
    var context2 = document.querySelector('#graph').getContext('2d');
    new Chart(context2).Line(data2);

                });

            });

        }
            
    }
    </script>
    </body>
</html>

como faço para que a variável data2 vá buscar os valores a outro php sem ser o data.php? (que é o que está a ser usado de momento para as duas variáveis).

@DiF Cara, não consegue ajudar aí, não consigo mesmo resolver o problema e ninguém me ajuda

MailingTester · 1 de fevereiro de 2022

6 horas atrás, David Martinho disse:
function showGraph()

Onde defines a função showGraph, passe um parâmetro:

function showGraph(arquivo = 'data.php')
{
  {
    $.post(arquivo,
...

Quando precisar que leia de outro arquivo, invoque a função showGraph, informando o outro arquivo:

showGraph('outro-arquivo');

David Martinho · 2 de fevereiro de 2022

Muito obrigado, mas eu já consegui resolver ontem.

Fico agradecido na mesma.

Entrar

Javascript Gráfico mudar valores com botão

Posts recomendados

David Martinho

Link para o comentário

Compartilhar em outros sites

David Martinho

Link para o comentário

Compartilhar em outros sites

MailingTester

Link para o comentário

Compartilhar em outros sites

David Martinho

Link para o comentário

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos