Chartjs1.0 labels click

by Christian Bonato

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
    <div style="width: 50%">
			<canvas id="canvas" height="450" width="600"></canvas>
		</div>
    <div>
    Click on the x labels!
    </div>
    <div id="hello">
    </div>

JavaScript

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

	var barChartData = {
		labels : ["January","February","March","April","May","June","July"],
		datasets : [
			{
				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 : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
			},
			{
				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 : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
			}
		]

	}
	//window.onload = function(){
		var ctx = document.getElementById("canvas").getContext("2d");
		window.myBar = new Chart(ctx).Bar(barChartData, {
			responsive : true
		});
	//}
  
 
	$("#canvas").click( 
	       function(evt){
	       		var ctx = document.getElementById("canvas").getContext("2d");
	       		// from the endPoint we get the end of the bars area
	       		var base = window.myBar.scale.endPoint;
	       		var height = window.myBar.chart.height;
	       		var width = window.myBar.chart.width;
	       		// only call if event is under the xAxis
	       		if(evt.pageY > base){
	       			// how many xLabels we have
	       			var count = window.myBar.scale.valuesCount;
	       			var padding_left = window.myBar.scale.xScalePaddingLeft;
	       			var padding_right = window.myBar.scale.xScalePaddingRight;
	       			// calculate width for each label
	       			var xwidth = (width-padding_left-padding_right)/count;
	       			// determine what label were clicked on AND PUT IT INTO bar_index 
	       			var bar_index = (evt.offsetX - padding_left) / xwidth;
	       			//...