Ir para conteúdo
Fórum Script Brasil
  • 0

ChartJS parâmetro data não está atualizando


rafaelleggiero

Pergunta

Boa tarde,

Amigos tenho uma dúvida, estou utilizando um componente para geração de gráficos em Javascript (ChartJS) que consiste em 

gerar um gráfico baseado em um combo select (Pedidos Gerados, Remessas Geradas) pois bem a minha função ao realizar a troca

de opção no select gera o gráfico porém o parâmetro data da função não está atualizando. Segue o código HTML e Javascript utilizado: 

 

<div class="col-sm-6"style="width:45%;">
                                    <div class="col-sm-5">
                                        <select id="mySelect" class="form-control" onchange="myFunction()">
                                            <option value="1">Pedidos Gerados</option>
                                            <option value="2">Remessas Geradas</option>
                                            <option value="3">Remessas Baixadas</option>
                                            <option value="4">Remessas Entregues</option>
                                        
                                        </select>
                                    </div>
                                    <canvas id="GraficoBarra" ></canvas>
                               
                                </div>

O código Javascript é esse: 

 

<script type="text/javascript">                                        
   var valores = ['1','2','3','4','5','6','7','8','9','10','11','12'];
   var options = {
        responsive:true
    };

    var data = {
        labels: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
        datasets: [
            {
                label: "Dados primários",
                fillColor: "rgba(0, 179, 0, 0.9)",
                strokeColor: "rgba(0, 190, 0, 0.8)",
                highlightFill: "rgba(0, 179, 0, 0.55)",
                highlightStroke: "rgba(0, 190, 0,55)",
                data: [valores[0], valores[1],valores[2], valores[3], valores[4],valores[5],valores[6], valores[7], valores[8],valores[9],valores[10],valores[11],valores[12]]

            },
            {
                label: "Dados secundários",
                fillColor: "rgba(207, 20, 0, 0.9)",
                strokeColor: "rgba(180, 20, 0, 0.8)",
                highlightFill: "rgba(207, 20, 0, 0.55)",
                highlightStroke: "rgba(207, 20, 0,55)",
                data: [10, 50, 35, 15, 18,9,11, 22, 33,55,32,33]


            }
        ]
    };   
    
    function myFunction() {
    var x = document.getElementById("mySelect").value;
        if(x == '1'){
            var valores = ['2','4','6','8','10','12','7','8','9','10','11','5'];
            var ctx = document.getElementById("GraficoBarra").getContext("2d");
            var BarChart = new Chart(ctx).Bar(data, options);
            
        }
        else if(x == '2'){
            var valores = ['8','4','12','8','10','6','7','8','9','10','11','1'];
            var ctx = document.getElementById("GraficoBarra").getContext("2d");
            var BarChart = new Chart(ctx).Bar(data, options);
        }
        else if(x == '3'){
            var valores = ['3','9','6','8','10','11','7','8','9','10','11','8'];
            var ctx = document.getElementById("GraficoBarra").getContext("2d");
            var BarChart = new Chart(ctx).Bar(data, options);
        }
        else if(x == '4'){
            var valores = ['4','7','6','8','10','6','11','8','9','10','11','6'];
            var ctx = document.getElementById("GraficoBarra").getContext("2d");
            var BarChart = new Chart(ctx).Bar(data, options);
        }
    }             

    window.onload = function(){ 
        var ctx = document.getElementById("GraficoBarra").getContext("2d");
        var BarChart = new Chart(ctx).Bar(data, options);

  
    }           
</script>

Eu deixei os parâmetros da segunda barra chumbado porque estou tentando fazer a primeira barra funcionar primeiro para esclarecer melhor para todos. 

Aos que puderem me auxiliar, desde já muito obrigado !

123.png

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...