For a JQplot chart with 2 y axes, I am able to set the tooltip but when i hover over a datapoint i need to know to which y axis the tooltip belongs. I need this so that i can display the tooltip after multiplying with the appropriate scale factor. The code i tried is shown below. I thought y will be null when we hover over a data point belonging to y2 axis. But y is never null.
$("#"+sTargetId).bind('jqplotcustomDataMouseOver',
function (ev, seriesIndex, pointIndex, data) {
var chart_left = $("#"+sTargetId).offset().left,
chart_right = ($(window).width() - ($("#"+sTargetId).offset().left + $("#"+sTargetId).outerWidth())),
chart_top = $("#"+sTargetId).offset().top,
x = oPlot.axes.xaxis.u2p(data[0]),
y = oPlot.axes.yaxis.u2p(data[1]),
y2 = oPlot.axes.y2axis.u2p(data[1]);;
if(y===null|| y===undefined){ //this condition doesnt work
var tooltipDataYaxis = data[1]*scaleYaxis1;
var sYDisplay = this.sYAxis1MeasureName;
$('#tooltip').css({left:chart_left+x, top:chart_top+y, marginRight:chart_right});
}
else{
tooltipDataYaxis = data[1]*scaleYaxis2;
sYDisplay = this.sYAxis2MeasureName;
$('#tooltip').css({left:chart_left+x, top:chart_top+y2, marginRight:chart_right});
}
$('#tooltip').html(
'<span style="font-family: Arial;font-size:'+sTooltip+';font:bold;color:#000000;">'+ sYDisplay+': ' + tooltipDataYaxis +'</span>');
$('#tooltip').show();
});
$("#"+sTargetId).bind('jqplotcustomDataUnhighlight',
function (ev, seriesIndex, pointIndex, data) {
$('#tooltip').empty();
$('#tooltip').hide();
});
}
The variable seriesIndex will help to identify which series the tooltip belongs to. :)
I was just playing with jqplot for the first time. quite fun.
In the highlighter plugin jqplot.highlighter.js
I extended it on line 336
elem.html(str + " component:"+neighbor.data[2]);
You might use Chrome developer tools to get the data model at this point and look at the contents of the neighbor object.
(scope variables > Local > neighbor > data )
That's how I did it anywho. Hope it helps.
Related
Dear Microsoft Clarity Team,
I hope this message finds you well. I have been testing the Clarity-Devtool and I noticed an issue while using it. When I move my pointer over an iframe image, the pointer gets stuck at the edge of the image and does not move inside the iframe.
I was wondering if there is a way to resolve this issue so that the pointer can move inside the iframe image as well. I understand that Clarity does not support viewing the content of the iframe, but I believe that moving the pointer over the iframe area should be allowed.
This would greatly enhance my experience with the Clarity-Devtool and provide me with more accurate insights into user behavior.
I also added it sandbox="allow-same-origin allow-scripts allow-pointer-lock" but it does not work also
enter image description here
function mouse(event: Event, root: Node, evt: MouseEvent): void {
let frame = iframe(root);
let d = frame ? frame.contentDocument.documentElement : document.documentElement;
let x = "pageX" in evt ? Math.round(evt.pageX) : ("clientX" in evt ? Math.round(evt["clientX"] + d.scrollLeft) : null);
let y = "pageY" in evt ? Math.round(evt.pageY) : ("clientY" in evt ? Math.round(evt["clientY"] + d.scrollTop) : null);
// In case of iframe, we adjust (x,y) to be relative to top parent's origin
if (frame) {
let distance = offset(frame);
x = x ? x + Math.round(distance.x) : x;
y = y ? y + Math.round(distance.y) : y;
}
console.log('pointer.ts Intersection x:' + x + ' y:' + y);
// Check for null values before processing this event
if (x !== null && y !== null) { handler({ time: time(), event, data: { target: target(evt), x, y } }); }
}
I added console.log('pointer.ts Intersection x:' + x + ' y:' + y); to the \src\interaction\pointer.ts
to track the pointer location
I see it in the console the coordinates but tbe pointer does not move into the frame image.
Here is the link to my test website https://thankful-pond-0d14a730f.2.azurestaticapps.net/
I'm using the Clarity Devtool Extension
It contains two iframes.
The Iframe on the top (green) has a source URL to a local file on the same domain src="/myLocalIframe.html, and it works as expected.
enter image description here
The one on bottom (red) has a source URL to a different website https://kind-moss-07698f50f.2.azurestaticapps.net/ , and it does not work
enter image description here
Here is the [Decoded Data (Page)]
enter link description here
Let me know if this help you debug it from your end.
I'm using the NVD3 library to draw a graph. I am using the interactive guideline and for some reason after I update the chart data + graph, the tooltip pointers stay at the old position.
When I update the data I do this:
chartData.datum(data).call(chart);
Everything updates fine except the position of the pointers of the tooltip. They seem to get stuck at the old position. I also tried calling this:
chart.update();
I noticed that when resizing my window and calling chart.update(), the pointers are set to the right position.
Someone any idea how to fix this?
Found it! I apparently had to add transition().duration(500);
So in order to update the graph I call this:
chartData.datum(data)
.transition().duration(500)
.call(chart);
Can you post a Little More description about the problem ... Becuase Previously i was having the Same .. that override the nvd3 tooltip function
`this._nvctp = nv.tooltip.calcTooltipPosition;
nv.tooltip.calcTooltipPosition = this.calcTooltipPosition;
calcTooltipPosition : function() {
this.findTotalOffsetTop = function(a, b) {
return 0;
};
this.findTotalOffsetLeft = function(a, b) {
return 0;
};
arguments[0] = [ window.event.pageX, window.event.pageY ];
var p = nvk.tooltip._nvctp.apply(this, arguments);
p.style.left = (window.event.clientX - (p.clientWidth / 2))
+ 'px';
p.style.top = (window.event.clientY - (p.clientHeight * 1.2))
+ 'px';
p.style.opacity = 1;
p.style.position = 'fixed';
return p;
}
In the highchart documentation is says:
positioner: Function
A callback function to place the tooltip in a default position. The callback receives three parameters: labelWidth, labelHeight and point, where point contains values for plotX and plotY telling where the reference point is in the plot area.
Add chart.plotLeft and chart.plotTop to get the full coordinates.
http://api.highcharts.com/highcharts#tooltip.positioner
But I'm not sure where I am supposed to add plotLeft, or plotTop
I don't see it on the scope, and I can't see it in the "chart" property options.
Can anyone explain?
Example for you: http://jsfiddle.net/j92p2/
tooltip: {
positioner: function (w, h, p) {
var chart = this.chart, // get chart
plotLeft = chart.plotLeft, // get plotLeft
plotTop = chart.plotTop; // get plotTop
console.log(this, plotTop, plotLeft); // watch console while hovering points
return { x: 80, y: 50 };
}
}
See inline comments. Let me know if you have any more questions.
In the click event "this.x" is the first point in the data group.
dataGrouping occurs when you play with the scroll, for example if select show all data, each point represent a week but you have information about every day, so in this point is represented info of all week instead of each day.
¿how I can get the last point in the data group clicked? ¿Hoy can I get the last point represented in this group (in this week)? (week is an example when you play with the scroll grouped data can happen in non common intervals)
plotOptions : {
series : {
point : {
events : {
click : function(event) {
alert(this.x + ' ' + this.y);
//HERE?
}
}
}
}
},
http://jsfiddle.net/JorgeDuenasLerin/QA2Qa/13/
After deep testing and several implementations and reimplementations... the conclusion.
You can access to the points variable. It is the solution because it always has the points draw in the screen and you can access it with no change when dataGrouping occurs.
var point = event.point;
var points = event.point.series.points;
var index = points.indexOf(point);
var index_next = index+1;
Here a working example:
http://jsfiddle.net/JorgeDuenasLerin/QA2Qa/88/
You can not work with series.data variable because it change depending on cropThreshold and number of data.
series.data
here doc:
http://api.highcharts.com/highstock#Series::data
There is no simple way to get it, but here is what you can do:
you have this.x value, now loop through this.series.options.data and compare x-value with your this.x
last object from that comparison (this.x > this.series.options.data[index][0])will be point you are looking for
You can access the series data in the click event by using this.series
events: {
click: function (event) {
var last = this.series.data[this.series.data.length - 1];
alert(last.x + ' ' + last.y);
}
}
http://jsfiddle.net/38FmW/
I'm seeing some odd behavior in a Highcharts line chart. I have multiple series displayed, and need to let the user change what's called the "Map level" on the chart, which is a straight line across all time periods. Assuming that the correct series is
chart.series[i]
and that the new level that I want it set to is stored in var newMapLevel,
I'm changing that series' data like so:
data = chart.series[i].data;
for(j=0; j<data.length; j++){
data[j].y = newMapLevel;
}
chart.series[i].setData(data);
Calling this function has the desired effect UNLESS the new map level y_value is ONE greater than the highest y_value of all other series, in which case the y-axis scale blows up. In other words, if the y_axis scale is normally from 0 to 275,000, and the highest y_value of any of the other series is, say, 224,000, setting the new map level value to 224,001 causes the y_axis scale to become 0 to 27500M. Yes, that's 27.5 billion.
Might this be a bug in Highcharts? Or is there a better way to change the data in a series?
I've posted a fiddle: http://jsfiddle.net/earachefl/4FuNE/4/
I got my answer from the Highcharts forum:
http://highslide.com/forum/viewtopic.php?f=9&t=13594&p=59888#p59888
This doesn't work as smoothly as I'd like. When you go from 8 as your line to 2 as your line, the scale doesn't adjust back down until you enter another value. Perhaps it's a start in the right direction.
$(document).ready(function(){
$('#clickme').click(function(){
var newMapLevel = $('#newMAP').val();
if(newMapLevel){
for(i=0; i<chart.series.length; i++){
if(chart.series[i].name == 'Map Level'){
data = chart.series[i].data;
for(j=0; j<data.length; j++){
data[j].y = newMapLevel;
}
// get the extremes
var extremes = chart.yAxis[0].getExtremes();
//alert("dataMin: " + extremes.dataMin);
//alert("dataMax: " + extremes.dataMax);
// define a max YAxis value to use when setting the extremes
var myYMax = extremes.dataMax;
if (newMapLevel >= myYMax) {
myYMax = Number(newMapLevel) + 1; // number conversion required
}
if (myYMax > chart.yAxis[0].max) {
alert('cabbbie');
myYMax = chart.yAxis[0].max + 1;
}
//alert("myYMax: " + myYMax);
chart.yAxis[0].setExtremes(extremes.dataMin, myYMax)
// finally, set the line data
chart.series[i].setData(data);
}
}
}
}); });