Chartjs - Click event

0

Sirs, good afternoon, I'm doing some graphs with chartjs and there was a need to click on a bar or line of a graph to get the value (of the label or the series) with this information I could even call another graph yet I did not I'm getting this done, the documentation does not illustrate and the examples I got on the net also can not make it work, some even have errors. I'm using version 2 of this lib

The following example is where I am trying to call an alert, it is very simple, nor is this happening, nor does it show any errors, but how should I proceed?

    <!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 criado para o tutorial do blog Web Social Dev.</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,
                        // Este evento não esta sendo chamado
                        'onClick' : function(mouseEvent, chart){
                                alert('Olá Grafico');
                               //var myLabel = label[chart[0]._index];
                               //var y = this.data.datasets[chart[0]._datasetIndex].data[chart[0]._index];
                             }                    
                    };

                    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);

                        //canvas.onclick = function(evt){                                                         
                          //      var activePoints = BarChart.getElementsAtEvent(evt);
                            //    var url = "http://example.com/?label=" + activePoints[0].label + "&value=" + activePoints[0].value;
                              //  alert("Olá!!!!!" + url);
                          //  };                    
                </script>
            </div>    
        </div>
    </body>
    </html>

I try to otherwise interact with the graph plus this method even accuses an error in the console

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

$('#GraficoBarra').on('click', function(evt) {
        var activePoints = BarChart.getElementsAtEvent(evt);
        var firstPoint = activePoints[0];
        alert("Olá!!!!!" );
});

In the console says the error Uncaught TypeError: BarChart.getElementsAtEvent is not a function

Robson

    
asked by anonymous 18.12.2017 / 20:17

1 answer

0

Sirs, good morning. I discovered the reason why I was not able to make the click event work, it was two reasons.

First I did not realize the code I was using was version 1 of chartjs, since this syntax var BarChart = new Chart (ctx) .Bar (data, options) it is not from version 2.x and so it error.

According to the browser cache, even when I discovered the version case, nothing was right until I opened the browser in private mode.

    
19.12.2017 / 13:55