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

David Martinho

MailingTester

David Martinho

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