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