Make flag visible when the the plot is clicked to show - javascript

Ok, let me explain :)
I have right now one chart with 4 lines, when I open the chart only one of it is by default visible.
Each of the lines has a flag attached to it, the problem is: when the line is not visible the flag appears at the bottom of the chart.
I found the command to make the flag visible or not, but the problem is, unlike the lines when I click the line to appear, the flag does not appear with it.
Is there any way to make them appear together? Like then I click to show the 'Camara 4' line the flag appear together. And when I click to make the line invisible the flag turn invisible too.
Is there any function/command for it?
Thanks :)

See this fiddle: http://jsfiddle.net/bBQKv/
Make use of the show and hide events to trigger the show and hide methods for the flag series.
plotOptions: {
series: {
events: {
show: function(event) {
if (this.options.type != 'flags') {
series = this.chart.get(this.options.id + 'Flags');
series.show();
}
},
hide: function(event) {
if (this.options.type != 'flags') {
series = this.chart.get(this.options.id + 'Flags');
series.hide();
}
}
}
}
},

Related

Chart.js showAllTooltips plugin: how to show/hide selectively on chart.update() event?

I'm hoping someone can help me answer my first question ever on stackoverflow!
I'm using the Chart.js v2.5 bundle for a bubble chart visualisation, and I've using the handy showAllTooltips plugin by #potatopeelings, to have a tooltip for every point constantly displayed.
It's working great – now I'd like the ability to toggle each one on and off and have the chart reflect this on chart.update().
To make this a bit less abstract I've made a GIF. Watch it here.
My theory is to manipulate the properties of each tooltip in the pluginTooltips array and then extend chart.update() to check this and render the chart accordingly, but I'm completely stuck on how to practically do this.
Here's some context in psuedo code:
document.getElementById( "chart" ).onclick = function(evt) {
if( bubbleChart.getElementAtEvent(evt).length > 0 ) {
for(var i = 0; i < bubbleChart.data.datasets.length; i++ ) {
var bubble = bubbleChart.data.datasets[i];
if( condition == true ) {
// style bubble active
// show tooltip
} else {
// style bubble inactive
// hide tooltip
}
}
bubbleChart.update();
}
};
Thanks in advance!

Highcharts setExtreme is destroying my trigger events

I´m using the ng-highcharts with angularjs.
I have two ways of manipulating the Extremes in my chart:
1. When I´m in the chart selecting or using the navigator.
In the config-Object:
xAxis: {
events: {
setExtremes: function(e){
if(e.trigger) {
console.log(e.min);
}
}
}}
and 2nd (when i press a button and want to manipulate through a button):
var chart = Highcharts.charts[0];
chart.xAxis[0].setExtremes(start, end);
Now the problem is that The 2nd function is destroying the first one.
Means: The first one is working and giving me e.g. the min-value via e.min, but when calling the 2nd function and I want to trigger events in my chart again, the e.min is null (NaN).
Can someone help me, I need both possibilities.

How to add more than one listener to a drilldown pieChart in amCharts

I'm working with highcharts and amCharts, but I'm stuck in this little thing.
So, I have a drilldown piechart made with amCharts, like this one: http://jsfiddle.net/api/post/library/pure/
But I wanted another feature! After "drilling-down", I would like to select one particular combination and navigate to another page (where I would give some information to the user concerning such combination...)
So, click once in pie chart => go to subtypes. Click again in a subtype => go to a page of my choosing!
I've tried using this answer, but somehow it does not work with this drilling down feature!
// add click listener
chart.addListener("clickGraphItem", handleClick);
I'm a bit lost, is this because the drill down already uses a addListener? Can you give me a hand, please?
Here you go:
chart.addListener("clickSlice", function (event) {
// if dataItem.dataContext.id, this is the
// event before drillDown
if (event.dataItem.dataContext.id != undefined) {
selected = event.dataItem.dataContext.id;
}
else { // click event on subtypes after drilldown occurs
selected = undefined;
// PUT YOUR CODE HERE
}
chart.dataProvider = generateChartData();
chart.validateData();
});

make qtip disappear right away

so I want the following behavior out of qtip:
the qtip should show up when I click on the object (I got this working without problem)...but then I want to have it disappear after a few miliseconds without me having to do anything....how would you go about configuring qtip to do this?
i tried
hide: {
when : 'inactive',
delay : 100,
fixed: false
}
but it's not working....
any help would be appreciated...thanks
If you only want the tooltip to flash on screen:
$(".tooltip").qtip({
content: "Test tooltip",
api: {
// As soon as the qtip is fully visible..
onShow: function (event) {
// Keep a reference to the qtip..
that = this;
// After 1ms (to let things settle down)
setTimeout(function () {
// Hide the qtip
that.hide();
}, 1); // change this value to have it stay on screen longer
}
},
show: "mouseover"
});
I know this is an old question but just in case someone passes by, the right way to do it in qTip2 is: (events instead of api)
events: {
show: function(event, api){
var that = this;
setTimeout(function () {
// Hide the qtip
that.hide();
}, 3000); // change this value to have it stay on screen longer
}
}
I think your code is correct, but the delay is causing problems. 100ms is only 0.1 seconds, so maybe the qtip is taking longer than that time to render, in which it won't exist yet when it's told to hide itself (just a guess).
I would increase the delay (you probably want your users to see the tip for a few seconds anyway) and see if that helps. Here's an example that uses 1000ms: http://jsfiddle.net/andrewwhitaker/dVEYq/

determine jQuery hover status for menu

I'm working on writing a drop-down menu with jQuery and I have a question. My menu is composed of two part span.menu_head (which is in the menu bar) and a ul.menu_body (which contains the drop-down items). I have the following jQuery code:
$("span.menu_head").hover(function(){
$(this).next().slideDown('medium');
}, function(){
});
$("ul.menu_body").hover(function(){
}, function(){
$(this).slideUp('medium');
});
So, when I hover over the span.menu_head, the ul.menu_body slides down and when I leave the ul.menu_body, it slide up. This is working as expected. However, there's one more piece I'm trying to add: When the mouse leaves the span.menu_head, I want the ul.menu_body to slideUp, UNLESS the mouse is over the ul.menu_body. Is there a way in jQuery to determine if the mouse is over a certain element? Or, is there a better way to acheive this effect?
Thanks,
Paul
I found a solution using hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html).
I set a flag when the mouse hovers over the ul.menu_body, so that I can check this flag before closing the menu.
var overBody = false;
function mnuOpen() {
$(this).next().slideDown('medium');
}
function mnuClose() {
if (!overBody) {
$(this).next().slideUp('medium');
}
}
var headConfig = {
over: mnuOpen,
timeout: 250,
out: mnuClose
}
$("span.menu_head").hoverIntent(config);
$("ul.menu_body").hover(function(){
overBody = true;
}, function(){
overBody = false;
$(this).slideUp('medium');
});
This is producing the desired behavior. There's one more thing I need to consider: if the mouse goes from the sub menu back to the header, we don't want to close and re-open, so this might involve setting another flag to detect this behavior.
Paul

Categories

Resources