Javascript Gráfico desaparece ao clicar em botão

David Martinho · 1 de fevereiro de 2022

Oi galera, tenho um gráfico e dois botões, ele está ligado a uma BD e tem como objetivo mudar os valores ao clicar nos botões.

Eu clico no pimeiro e assume o valor, mas ao clicar no botão 2, o gráfico desaparece, alguém pode me ajudar e resolver esse problema.

E gostava também de colocar o gráfico do tipo Barra e não consigo.

Código:

<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">
Opção 1
</button>
<button id="btn2">
Opção 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 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>

<script>
 $(document).ready(function () {
            showGraph2();
        });

        function showGraph2()
        {
            {
                $.post("data2.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 data2 = {
    labels: linha, 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>

Ao clicar na opção 1:

Ao clicar na opção 2:

Luiz Paulo Escobar · 2 de fevereiro de 2022

@David Martinho Se quando você clica n aparece ada quer dizer que não vem dados para o javascript, ou está vindo null, ou você setou algo errado.

David Martinho · 2 de fevereiro de 2022

6 horas atrás, Luiz Paulo Escobar disse:

@David Martinho Se quando você clica n aparece ada quer dizer que não vem dados para o javascript, ou está vindo null, ou você setou algo errado.

Já consegui resolver obrigado