1

Como faço para comparar o valor selecionado no select do html com o if do javascript para atualizar meu gráfico? Pois do jeito que está, 2019 está subscrevendo o 2018

        <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <canvas id="myChart"></canvas>
    <select name="chartValor" id="chartValor" onchange="updateChartType()">
        <option value="data">2018</option>
        <option value="data2">2019</option>

    </select>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script type="text/javascript">


if (document.getElementById('chartValor') != null) 

        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset

        // here we destroy/delete the old or previous chart and redraw it again

    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },





    // Configuration options go here
    options: {}

});

        if (document.getElementById('chartValor') != null) 

        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset

        // here we destroy/delete the old or previous chart and redraw it again

    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 15, 12, 120, 130, 145]
        }]
    },





    // Configuration options go here
    options: {}

});
</script>

Abraço

1 Resposta 1

0

Olá! Claro que existem muitas formas de se fazer, mas, baseado no que você mesmo forneceu minha solução é a seguinte:

  
function updateChartType(){

let selecionado = document.getElementById('chartValor').value;

document.getElementById('selecionado').innerHTML = selecionado;


if (document.getElementById('chartValor') != null) 

   if ( selecionado == 'data2' )
   {
     var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset

        // here we destroy/delete the old or previous chart and redraw it again

    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    },





    // Configuration options go here
    options: {}

});
}
else
{
   
        if (document.getElementById('chartValor') != null) 

        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset

        // here we destroy/delete the old or previous chart and redraw it again

    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 15, 12, 120, 130, 145],
        }]
    },





    // Configuration options go here
    options: {}

});
}
      


}
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  
<head>
    <title></title>
</head>
<body>
    <canvas id="myChart"></canvas>
    <select name="chartValor" id="chartValor" onchange="updateChartType()">
        <option value="data">2018</option>
        <option value="data2">2019</option>

    </select>
     
Selecionado: <label id="selecionado">000</label>


Baseado nas informações que você passou ali no seu exemplo, acho que tem várias coisas que da pra melhorar, uma delas é colocar os dados em uma variável para não precisar repetir tanto código, mas, como a lógica é sua, simplesmente resolvi o que você estava pedindo ali.

Sugestão de possíveis melhorias:

  • Identação do código
  • Não repetição de mesmas funções, visando mais legibilidade
  • Criação de variável de dados
  • Melhoria nos ids dos selects para ficar mais claro (ex. ano2018, ano2019 e assim por diante)

Enfim, espero que ajude na solução do problema inicial.

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 .