Detect onHover being complete on a Chart.js doughnut chart - javascript

I have a Chart.js doughnut chart (v2.7.1) and I am looking to set the class of an external element when the user hovers over the relevant chart element
I can use the onHover event within the options.hover of the chart
hover: {
onHover: function (evt, item) {
if (item.length) {
var index = item[0]._index;
var legendElement = $(#get element based on index#);
legendElement.addClass('active');
}
}
}
and this sets the class on the element (legendElement) perfectly but I need to be able to remove the class I set from the element when the user is no longer hovering over the element
Am I using the correct approach? Is there a way to detect that the onHover is complete or that the segment is no longer in focus?

Are you defining an "events" property apart from the "onHover" property? If you add "mouseout" to the list, the "onHover" function will be called in both cases. Check out the documentation for this https://www.chartjs.org/docs/latest/general/interactions/events.html
An example code that might work:
options: {
events: ["mousemove", "mouseout"],
onHover: function (evt, item) {
if (item.length) {
var index = item[0]._index;
var legendElement = $(#get element based on index#);
if(evt.type == "mousemove"){
legendElement.addClass('active');
}else{
legendElement.removeClass('active');
}
}
}
}

Related

Chartist.js - Pass Label Value into Bar Click

I am using the Chartist.js graph api to create a graph and I need each bar to click to a location. This is easy enough, but I also need to pass the corresponding label value if possible.
var graph = new Chartist.Bar('.ct-chart', {
labels : ['L1','L2','L3'],
series : [1,2,3]
});
So, I have added an onclick method to each bar, but need it to get the corresponding label value to pass to the location page. Example:
graph.on('created', function() {
$('.ct-bar').click(function () {
var val = $(this).attr('ct:value');
if (val > 0) {
window.location = 'location/?label=BAR LABEL HERE (eg: L1)';
}
});
});
Would anyone know if this is possible?
Many thanks.

Updating column zIndex on legendItem mouseover/mouseout in Highcharts

I have a chart where one of the series provided is a 'total' sum value of the other values.
What I'm trying to is to have this column initially behind the others (or hidden) then bring it to the front when that series' legendItem is hovered.
So far I've been able to increase the zIndex on the series to bring the 'total' column to the front on 'mouseover' no problem, but triggering the inverse on 'mouseout' isn't working for me and the 'total' column stays in front.
I've also tried a simlar solution using .toFront(), this worked but was left with the same problem of moving the column back BEHIND on mouseout.
How might I correctly move this column to front/back on legendItem hover?
https://codesandbox.io/s/cold-night-9p0gk?file=/src/components/BarChart.vue:1272-1325
On 'mouseout' you can call toFront method on the stacked series only:
chart.series.forEach(s => {
if (s.name === 'Total') {
s.legendItem.on('mouseover', () => {
s.group.toFront();
});
s.legendItem.on('mouseout', () => {
s.chart.series.forEach(item => {
if (s !== item) {
item.group.toFront();
}
});
});
}
});
Live demo: http://jsfiddle.net/BlackLabel/mpduxwkh/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#toFront

Highcharts - get visible series name dynamically

I want to make a function which send dynamically all visible series name in a Highchart instance to a PHP function.
For example, in this chart, I want to get this array : [Salle, PR].
If I click on Internet, the serie become visible and I want to get [Salle, Internet, PR].
To do this, I tried to use legendItemClick event and make a function that check if each serie is visible to add it to an array but I can't figure out how to use the visible option to do this.
Do you have an idea ?
As of now, I don't have much code to share :
plotOptions: {
series: {
events: {
legendItemClick: function(){
}
}
}
}
If you retain the pointer to your chart like this:
var ch = Highcharts.chart(_chart_data_);
Then later you can access the whole chart structure. What you will be interested in is the series array.
ch.series[]
It contains array of all your series. Series with visible attribute set to true are the ones that currently displayed. So,it might be something like this:
var ch = Highcharts.chart(...
plotOptions: {
series: {
events: {
legendItemClick: function(){
ch.series.forEach(function(sr){
if(sr.visible){
console.log(sr.name, "visible!");
}
});
}
}
}
}
...);
However, there is a catch with your approach, that on actual legend click your current action for the legend is not yet processed.so the output you will see is the output for the previous state, before current click.
So for that reason you may try to use setTimeout to get your listing after the event is applied:
events: {
legendItemClick: function(){
setTimeout(
function(){
ch.series.forEach(
function(sr){
if(sr.visible){
console.log(sr.name, "visible!");
}
}
)
},20);
}
}
Try this and check the console log: http://jsfiddle.net/op8142z0/

jqxTree: Changing font color after initialization

I have a JSON jqxTree that is being rendered properly (with Label, id, value, etc). And I have a list of ids that need to be colored differently when the tree get rendered. I was thinking, that after the tree initializes I should traverse the tree and set the style for each element's id that I have in the list.
The issue I am facing is that from the event initalize() that gets fired, I have no idea how to traverse it and set the style of the elements.
This is what I have so far...
var myList = ${myList};
var colorChangeList= ${colorChangeList};
$('#jqxTree').on('initialized', function (event) {
alert('initialized:' + event);
// put in logic to set labels of id's to blue
for(Item item : theTree) {
if(item.id belongsIn(colorChangeList) {
item.label.color = blue;
}
}
});
$('#jqxTree').jqxTree({
source : myList,
height : '100%',
width : '50%'
}
Please refer the below url to resolve:
http://www.jqwidgets.com/community/topic/programmatically-changing-font-color-of-labels/
Thanks!!!

jquery and multiple element hover check

I have 3 boxes and once user hovers any, if changes the content of the big main div from default to the related div via featVals hash table
At the if ($('#estate-feature, #carrier-feature, #cleaning-feature').is(':hover')) { part of my code, I want to check if any of these 3 div boxes are currently hovered, if not display the default content (defaultFeat variable).
However I am getting Uncaught Syntax error, unrecognized expression: hover error from Google Chrome Javascript Console.
How can I fix it ?
Regards
$('#estate-feature, #carrier-feature, #cleaning-feature').hover(function () {
var currentFeatCont = featVals[$(this).attr('id')];
headlineContent.html(currentFeatCont);
}, function () {
headlineContent.delay(600)
.queue(function (n) {
if ($('#estate-feature, #carrier-feature, #cleaning-feature').not(':hover')) {
$(this).html(defaultFeat);
}
n();
})
});
:hover isn't an attribute of the element. Also, you are binding to the hover out there so you know that you have left the hover and can restore the default content. If you want the hover-triggered content to remain for a period after the point has left the trigger element then you'll either need to assume that you aren't going to roll over another trigger or implement a shared flag variable that indicates if the default text restore should be halted. e.g.
var isHovered = false;
$('#estate-feature, #carrier-feature, #cleaning-feature').hover(
function() {
var currentFeatCont = featVals[$(this).attr('id')];
headlineContent.html(currentFeatCont);
isHovered = true;
},
function() {
isHovered = false;
headlineContent.delay(600)
.queue(function(n) {
if (!isHovered) {
$(this).html(defaultFeat);
}
n();
})
}
);

Categories