Jump to content
Sapinn

Criar grafico interativo

Recommended Posts

Galera estou com uma duvida tenho um projeto e quero que toda vez que eu mude um valor dentro de um input o grafico mude também de acordo com os valores inseridos. Estou criando a função oninput para isso, mas não funciona mesmo colocando o return, estou usando a biblioteca chart.js

<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Graficos</title>

    <style>

        .grafico{

            width: 300px;

            height: 300px;

        }

    </style>

</head>

<body>

    <div class="grafico">

        <canvas id="myChart" ></canvas>

    </div>

   

   

    <input type="text" value="8" id="done" class="taskPorcent" oninput="changeValue()">

    <input type="text" value="2" id="no_done" class="taskPorcent" oninput="changeValue()">



    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>

        const ctx = document.getElementById('myChart').getContext('2d');

        let taskDone = document.querySelector('#done');

        let taskNotDone = document.querySelector('#no_done');

        let taskPorcent = document.querySelector('.taskPorcent');



        array = []



        function changeValue(){

            array = [taskDone.value, taskNotDone.value]

            return array

           

        }

       

        console.log(array)



        const myChart = new Chart(ctx, {

            type: 'doughnut',

            data: {

            labels: ['Tarefas Feitas', 'Tarefas Não Feitas'],

            datasets: [{

           

            data: [taskDone.value,taskNotDone.value],



            backgroundColor: [

                'hsl(214, 84%, 56%)',

                'hsl(192, 91%, 96%)',

            ],

       

        }]

        },

   

        });



        //console.log(myChart["data"])

       

    </script>

   

</body>

</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By juniormatrix
      Olá
       
      Achei esse script aqui no fórum mesmo:
       
      $.validator.addMethod( "customEmail", function (value, element) { return this.optional(element) || /^[\w-\.]+@fulano\.com\.br$/i.test(value); }, "Por favor, insira um e-mail válido com o domínio @fulano.com.br" ); $("#formulario").validate({ ignore: ".ignore", rules: { empresa: { required: true }, nome: { required: true }, contato: { required: true }, celular: { required: true }, email: { required: true, email: true, customEmail: true }, }, }); Testei e funcionou perfeitamente, mas gostaria que liberasse mais e-mails válidos, ao invés de apenas um.

      Tem como fazer? 
       
      Se alguém puder ajudar, fico muito grato.
    • By Alessandro Bodão
      Salve galerinha, passando pra mostrar pra vocês o novo projeto de marca que a Jatobá Estúdio desenvolveu, espero que gostem.   https://www.behance.net/gallery/166555627/Fernanda-Pinheiro-Nutricionista-Esportiva
    • By rogerblower
      Boas pessoal, estou precisando de um calendário para agenda com crud para agendamento, mas teria que ser free.
      Obrogado.
    • By Sapinn
      Fala galera! Tenho um site que possui alguns icones que são puxados da biblioteca flaticon , o problema é que de uma hora pra outra esses icones pararam de aparecer. No meu ambiente local funciona, mas no ambiente de produção eles não aparecem e eu recebo o seguinte erro no console: Failed to load resource: the server responded with a status of 404 () 
       
      Alguém saberia como resolver isso?
    • By mateus.andriollo
      Carrego um conteudo Ajax e junto com ele vem HTML e JS, existe um marcador que está relacionado a um elemento HTML, quando eu clico e este elemento tem um atributo exemplo data-onload="funcaoOla()" esta função tbm carregada pelo ajax deve ser executada.
       
      Dúvida como eu faço uma chama de função desta forma, seria como exec("funcaoOla")
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.