CODEWITHSUNDEEP
javascriptjquerychart.jschart.js2
Phil
Phil

Reputation: 4069

ChartJS 2.0 differences in code help needed

I am having trouble converting the code below to work with Chart.js 2.0. My chart object is created using the required...

var chart = new Chart({...constructor code here...});

and I have figured out how to create my custom tooltip and custom legend, but I can not seem to figure out the following items.

First, I have a click event bound on the chart itself, so when the user clicks on it, it will call a custom function, passing in the segment (the piece of the pie chart) which the user clicked. In the previous 1.0 version of Chart.js, I could call the following code and it worked great. It would allow me to see the .label and property along with other properties of the segment.

// Pass the segment of the pie chart the user clicks into myCustomFunction()
$('#chartDiv').click(function(evt) { 
    var activeSegment = chart.getSegmentsAtEvent(evt);
    myCustomFunction(activeSegment);
}).css('cursor','pointer');

The other thing I can not figure out is I want to add a mouseenter and mouseleave event to my custom legend items. When the user hovers over the legend item, it will pop up the correct tooltip for that segment. When they mouseleave, the tooltips close. Here is the code I have been using on ChartJS 1.0.

// Tie the legend to the chart tooltips
var helpers = Chart.helpers;
var chartLegend = document.getElementById("chartLegend");
helpers.each(chartLegend.firstChild.childNodes, function(legendNode, index){
    helpers.addEvent(legendNode, 'mouseenter', function(){
        var activeSegment = chart.segments[index];
        activeSegment.save();
        activeSegment.fillColor = activeSegment.highlightColor;                 
        chart.showTooltip([activeSegment], true);
        activeSegment.restore();
    });             
    helpers.addEvent(legendNode, 'mouseleave', function(){
        chart.draw();
    });
});

If anyone can help me figure this out I would be very grateful. Thank you!

Upvotes: 0

Views: 115

Answers (1)

user3407386
user3407386

Reputation: 172

For onclick event you can use var activeSegment = chart.getElementAtEvent(evt);

Upvotes: 1

Related Questions