1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Chartjs - Evento Click

Senhores boa tarde, estou fazendo alguns gráficos com o chartjs e surgiu a necessidade de ao clicar em uma barra ou linha de um gráfico obter o valor( do label ou da serie ) com esta informação poder até chamar outro gráfico contudo eu não estou conseguindo fazer isto, a documentação não ilustra e os exemplos que eu consegui na net também não estou conseguindo fazer funcionar, alguns até apresentam erros. Estou usando a versão 2 desta lib

Segue o exemplo abaixo onde eu estou tentando chamar um alert, bem simples mais nem isto esta ocorrendo, também não apresenta nenhum erro, mais como devo proceder? no codigo abaixo as duas formas que eu estou tentando não tem efeito algum, a ultima até da um erro no console como esta descrito no comentário do código.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Chart.js - criando gráficos com a biblioteca Chart.js</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>    
    <script type="text/javascript" src="js/Chart.min.js"></script>
    <style type="text/css">
        *{
            font-family: calibri;        
        }

        .box {
            margin: 0px auto;
            width: 70%;
        }

        .box-chart {
            width: 100%;
            margin: 0 auto;
            padding: 10px;
        }
        </style>  
        <script type="text/javascript">
            var randomnb = function(){ return Math.round(Math.random()*300)};
        </script>  
</head>

<body>    
    <div class="box">
    <h1>Chart.js - criando gráficos com a biblioteca Chart.js - DEMO</h1>
    <small>Arquivo com testes e demo de funcionalidades da biblioteca Chart.js</small>

    <h2>Gráfico Barra</h2>
    <small>Dados gerados com função javascript para números randômicos até 300.</small>

    <div class="box-chart">

    <canvas id="GraficoBarra" style="width:100%;"></canvas>
    <script type="text/javascript">                                        

    var options = {
        responsive:true,
                // Aqui nada acontede, nem erro
        'onClick' : function(mouseEvent, chart){
           alert('Olá Grafico');
         }                    
    };

    var data = {
    labels: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
    datasets: [
    {
        label: "Dados primários",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb()]
                                },
        {
        label: "Dados secundários",
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90, randomnb(), randomnb(), randomnb(), randomnb(), randomnb()]
            }
        ]
    };                

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

          // O código abaixo acusa um erro no console do navegador
          // no console diz o erro Uncaught TypeError: BarChart.getElementsAtEvent is not a function
          $('#GraficoBarra').on('click', function(evt) {
        var activePoints = BarChart.getElementsAtEvent(evt);
        var firstPoint = activePoints[0];
            alert("Olá!" );
    });
}
    </script>
   </div>    
   </div>
</body>
</html>
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

0 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags javascript ou faça a sua própria pergunta.