problem in display tooltip on chart for v4.0.0 and above

[scadaParticipant]

Hi ,

I have a functionality to Click the tag id and opening the details in new window and i want displaying the tooltip and range selector on chart.

Issue: tooltip is behind the window when mouse over on chart in v4.0.0 and above!

in version 3.8.2 and lower tooltip is ok and problem is in range selector see below image:

in version 4.0.0 and above range selector is ok and problem is in tooltip see below image:

how i fix this problem ?

[HristoParticipant]

Hello scada,

Please, provide us your code for better analyze, or sample that demonstrate this issue.
(better way is on https://www.jseditor.io/)
Also could find more information in our API Documentation.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[scadaParticipant]

i think my code is ok because i use diferent version and get diferent result
my function code is :

function VariableChartInit(variables) {

for (var i = 0; i < variables.length; i++) {
try {
$(‘#chart-container’).append(“<div id=’chartWindow-” + variables[i].Id + “‘ style=’z-index: -1;’><div id=’chartWindowTitle-” + variables[i].Id + “‘ ><span>” + “نمودار از ” + variables[i].Name + “</span></div><div id=’chartWindowBody-” + variables[i].Id + “‘ ><div> <div id=’variableChart-” + variables[i].Id + “‘ align=’center’ style=’width:660px; height:500px; margin-top:10px; margin-left:10px;’></div> </div></div></div>”);
$(‘#chartWindow-‘ + variables[i].Id).jqxWindow({
//rtl: true,
autoOpen: false,
resizable: true,
showCloseButton: true,
theme: theme,
width: 690,
height: 700
});

$(“#” + variables[i].TagID).dblclick(variables[i], function (e) {
week= new Array(“يكشنبه”,”دوشنبه”,”سه شنبه”,”چهارشنبه”,”پنج شنبه”,”جمعه”,”شنبه”)
months = new Array(“فروردين”,”ارديبهشت”,”خرداد”,”تير”,”مرداد”,”شهريور”,”مهر”,”آبان”,”آذر”,”دي”,”بهمن”,”اسفند”);
a = new Date();
d= a.getDay();
day= a.getDate();
month = a.getMonth()+1;
year= a.getYear();

if (year== 0){year=2000;}
if (year<1000){year +=1900;}
y=1;
for(i=0;i<3000;i+=4) {
if (year==i) {y=2;}
}
for(i=1;i<3000;i+=4) {
if (year==i) {y=3;}
}

if (y==1) {
year -= ( (month < 3) || ((month == 3) && (day < 21)) )? 622:621;

switch (month) {
case 1: (day<21)? (month=10, day+=10):(month=11, day-=20); break;
case 2: (day<20)? (month=11, day+=11):(month=12, day-=19); break;
case 3: (day<21)? (month=12, day+=9):(month=1, day-=20); break;
case 4: (day<21)? (month=1, day+=11):(month=2, day-=20); break;
case 5:
case 6: (day<22)? (month-=3, day+=10):(month-=2, day-=21); break;
case 7:
case 8:
case 9: (day<23)? (month-=3, day+=9):(month-=2, day-=22); break;
case 10:(day<23)? (month=7, day+=8):(month=8, day-=22); break;
case 11:
case 12:(day<22)? (month-=3, day+=9):(month-=2, day-=21); break;
default: break;
}
}
if (y==2) {
year -= ( (month < 3) || ((month == 3) && (day < 20)) )? 622:621;

switch (month) {
case 1: (day<21)? (month=10, day+=10):(month=11, day-=20); break;
case 2: (day<20)? (month=11, day+=11):(month=12, day-=19); break;
case 3: (day<20)? (month=12, day+=10):(month=1, day-=19); break;
case 4: (day<20)? (month=1, day+=12):(month=2, day-=19); break;
case 5: (day<21)? (month=2, day+=11):(month=3, day-=20); break;
case 6: (day<21)? (month=3, day+=11):(month=4, day-=20); break;
case 7: (day<22)? (month=4, day+=10):(month=5, day-=21); break;
case 8: (day<22)? (month=5, day+=10):(month=6, day-=21); break;
case 9: (day<22)? (month=6, day+=10):(month=7, day-=21); break;
case 10:(day<22)? (month=7, day+=9):(month=8, day-=21); break;
case 11:(day<21)? (month=8, day+=10):(month=9, day-=20); break;
case 12:(day<21)? (month=9, day+=10):(month=10, day-=20); break;
default: break;
}
}
if (y==3) {
year -= ( (month < 3) || ((month == 3) && (day < 21)) )? 622:621;

switch (month) {
case 1: (day<20)? (month=10, day+=11):(month=11, day-=19); break;
case 2: (day<19)? (month=11, day+=12):(month=12, day-=18); break;
case 3: (day<21)? (month=12, day+=10):(month=1, day-=20); break;
case 4: (day<21)? (month=1, day+=11):(month=2, day-=20); break;
case 5:
case 6: (day<22)? (month-=3, day+=10):(month-=2, day-=21); break;
case 7:
case 8:
case 9: (day<23)? (month-=3, day+=9):(month-=2, day-=22); break;
case 10:(day<23)? (month=7, day+=8):(month=8, day-=22); break;
case 11:
case 12:(day<22)? (month-=3, day+=9):(month-=2, day-=21); break;
default: break;
}
}

var df = new Date();
var nn = df.getSeconds();
var monthErsaly;
var dayErsaly;

if (months[month – 1] == “فروردین”) { monthErsaly = “01”; } if (months[month – 1] == “اردیبهشت”) { monthErsaly = “02”; } if (months[month – 1] == “خرداد”) { monthErsaly = “03”; } if (months[month – 1] == “تیر”) { monthErsaly = “04”; } if (months[month – 1] == “مرداد”) { monthErsaly = “05”; } if (months[month – 1] == “شهریور”) { monthErsaly = “06”; } if (months[month – 1] == “مهر”) { monthErsaly = “07”; } if (months[month – 1] == “آبان”) { monthErsaly = “08”; } if (months[month – 1] == “آذر”) { monthErsaly = “09”; } if (months[month – 1] == “دی”) { monthErsaly = “10”; } if (months[month – 1] == “بهمن”) { monthErsaly = “11”; } if (months[month – 1] == “اسفند”) { monthErsaly = “12”; }
if (day == 1) { dayErsaly = “01”; } else if (day == 2) { dayErsaly = “02”; } else if (day == 3) { dayErsaly = “03”; } else if (day == 4) { dayErsaly = “04”; } else if (day == 5) { dayErsaly = “05”; } else if (day == 6) { dayErsaly = “06”; } else if (day == 7) { dayErsaly = “07”; } else if (day == 8) { dayErsaly = “08”; } else if (day == 9) { dayErsaly = “09”; } else { dayErsaly = day; }

var lastChartTime = year + “/” + monthErsaly + “/” + dayErsaly;
var sumLastChartTime = year*365 + (parseInt(monthErsaly))*30 + parseInt(dayErsaly);

//document.getElementById(“text3803″).textContent = ” “+week[d]+” “+day+” “+months[month-1]+” “+ year+” “+” “+” “+df.getHours() +”:”+ df.getMinutes();
var otherDay;
var findYear;
var findMonth;
var findDay;

var person = prompt(“لطفا بازه زمانی مورد نظر را وارد کنید\n 1- روزانه\n 2- هفتگی\n 3- ماهانه\n 4- سه ماهه\n 5- شش ماهه\n 6- سالانه\n 7- دو ساله \n “, “1”);
if (person == 1) {
otherDay = sumLastChartTime – 1; findYear = otherDay / 365; findMonth = findYear; findYear = parseInt(findYear); findMonth = (findMonth – findYear) * 365; findMonth = findMonth / 30; findDay = findMonth; findMonth = parseInt(findMonth); findDay = parseInt((findDay – findMonth) * 30);
}
if (person == 2) {
otherDay = sumLastChartTime – 7; findYear = otherDay / 365; findMonth = findYear; findYear = parseInt(findYear); findMonth = (findMonth – findYear) * 365; findMonth = findMonth / 30; findDay = findMonth; findMonth = parseInt(findMonth); findDay = parseInt((findDay – findMonth) * 30);
}
if (person == 3) {
otherDay = sumLastChartTime – 30; findYear = otherDay / 365; findMonth = findYear; findYear = parseInt(findYear); findMonth = (findMonth – findYear) * 365; findMonth = findMonth / 30; findDay = findMonth; findMonth = parseInt(findMonth); findDay = parseInt((findDay – findMonth) * 30);
}
if (person == 4) {
otherDay = sumLastChartTime – 90; findYear = otherDay / 365; findMonth = findYear; findYear = parseInt(findYear); findMonth = (findMonth – findYear) * 365; findMonth = findMonth / 30; findDay = findMonth; findMonth = parseInt(findMonth); findDay = parseInt((findDay – findMonth) * 30);
}
if (person == 5) {
otherDay = sumLastChartTime – 180; findYear = otherDay / 365; findMonth = findYear; findYear = parseInt(findYear); findMonth = (findMonth – findYear) * 365; findMonth = findMonth / 30; findDay = findMonth; findMonth = parseInt(findMonth); findDay = parseInt((findDay – findMonth) * 30);
}
if (person == 6) {
otherDay = sumLastChartTime – 365; findYear = otherDay / 365; findMonth = findYear; findYear = parseInt(findYear); findMonth = (findMonth – findYear) * 365; findMonth = findMonth / 30; findDay = findMonth; findMonth = parseInt(findMonth); findDay = parseInt((findDay – findMonth) * 30);
}
if (person == 7) {
otherDay = sumLastChartTime – 730; findYear = otherDay / 365; findMonth = findYear; findYear = parseInt(findYear); findMonth = (findMonth – findYear) * 365; findMonth = findMonth / 30; findDay = findMonth; findMonth = parseInt(findMonth); findDay = parseInt((findDay – findMonth) * 30);
}

if (findDay == 1) { dayErsaly = “01”; } else if (findDay == 2) { dayErsaly = “02”; } else if (findDay == 3) { dayErsaly = “03”; } else if (findDay == 4) { dayErsaly = “04”; } else if (findDay == 5) { dayErsaly = “05”; } else if (findDay == 6) { dayErsaly = “06”; } else if (findDay == 7) { dayErsaly = “07”; } else if (findDay == 8) { dayErsaly = “08”; } else if (findDay == 9) { dayErsaly = “09”; } else { dayErsaly = findDay; }
if (findMonth == 1) { monthErsaly = “01”; } else if (findMonth == 2) { monthErsaly = “02”; } else if (findMonth == 3) { monthErsaly = “03”; } else if (findMonth == 4) { monthErsaly = “04”; } else if (findMonth == 5) { monthErsaly = “05”; } else if (findMonth == 6) { monthErsaly = “06”; } else if (findMonth == 7) { monthErsaly = “07”; } else if (findMonth == 8) { monthErsaly = “08”; } else if (findMonth == 9) { monthErsaly = “09”; } else { monthErsaly = findMonth; }
var firstChartTime = findYear + “/” + monthErsaly + “/” + dayErsaly;

/////////////////////////////
if (firstChartTime != “undefined/undefined/undefined”) {
var startdate = “00:00:00 – ” + firstChartTime;
var enddate = “23:59:59 – ” + lastChartTime;

var diff = 0;
var maximum = -10000;
var minimum = 10000;
var maghadirChart = {};

var data = {
VariableIDs: e.data.Id,
StartDate: startdate,
EndDate: enddate,
};

var source =
{
datatype: “json”,
type: “GET”,
data: data,
//datafields: df,
//datafields: [
// { name: ‘Sample’ },
// { name: ‘Date’ }],
url: “../ToolsService.asmx/GetRecordsChart”
};
var dataAdapter = new $.jqx.dataAdapter(source, {
contentType: ‘application/json; charset=utf-8’,
async: false,
autoBind: true,
loadError: function (xhr, status, error) {
//alert(‘Error loading “‘ + source.url + ‘” : ‘ + error);
}
,
downloadComplete: function (data) {
maghadirChart = data.d;
// for (var i = 0; i < 1; i++) {
// for (var j = 0; j < data.d.length; j++) {
// if (parseFloat(data.d[i].Value) > maximum)
// maximum = parseFloat(data.d[i].Value);
// if (parseFloat(data.d[i].Value) < minimum)
// minimum = parseFloat(data.d[i].Value);
// }
// }
// diff = ((maximum – minimum) * 11) / 10;
}
});

if (maghadirChart.length < 150) {
for (var k = 0; k < maghadirChart.length; k++) {
OnlineChartBuffer[k] = { Time: maghadirChart[k].creationTime, Var: maghadirChart[k].Value };
}
}
if (maghadirChart.length > 150) {
zaribChart = (maghadirChart.length / 150).toFixed(0);
for (var k = 0; k < 150; k++) {
OnlineChartBuffer[k] = { Time: maghadirChart[k].creationTime, Var: maghadirChart[k * zaribChart].Value };
}
}

$(‘#chartWindow-‘ + e.data.Id).jqxWindow(‘open’);
//var source =
//{
// localdata: OnlineChartBuffer,
// datatype: “default”,
// datafields: [
// { name: ‘Time’ },
// { name: ‘Var’ }]
//};

var sampleData = [{
a: 0.35,
b: 14.5
}, {
a: 1,
b: 2.5
}, {
a: 10,
b: 0.2
}, {
a: 100,
b: 205
}, {
a: 1,
b: 100
}, {
a: 5.11,
b: 10.13
}, {
a: 20.13,
b: 10.13
}, {
a: 600,
b: 300
}];

//var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
// prepare jqxChart settings background-color: blue;

var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = OnlineChartBuffer[itemIndex];
//var toolTipDiv;
var toolTipDiv = ‘<div style=”direction:rtl; text-align:right ;left:0px;color:blue;overflow: auto;float:right”><b>زمان: ‘ +
dataItem[“Time”] +
// categoryValue.getDate() + ‘-‘ + months[categoryValue.getMonth()] + ‘-‘ + categoryValue.getFullYear() +
‘</b><br />’;
//for (var i = 0; i < 1; i++) {
toolTipDiv += ‘<div style=” text-align:center”>’ + dataItem[“Var”] + ‘</div>’
//}
//for (var i = 0; i < 1; i++) {
//toolTipDiv += ‘<br />’ + OnlineChartBuffer[i].Time + ‘: ‘ + ‘<div style=”direction:ltr; text-align:left”>’ + OnlineChartBuffer[i].Value + ‘</div>’
//}
toolTipDiv += ‘</div>’;

return toolTipDiv;
};

var settings = {
title: “”,
description: “”,
showToolTips: true,
enableAnimations: true,
showLegend: false,
enableCrosshairs: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
//titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
//source: dataAdapter,
source: OnlineChartBuffer,

xAxis:
{
textRotationAngle: 90,
visible: true,
//datatype: “array”,
//dataField: ‘default’,

//formatFunction: function (value, itemIndex, serie, group) {
// return dataAdapter.records[itemIndex * 6].Time;
//},

labels: {
visible: false,
angle: “30”

},

tickMarks: {
visible: true,
step: 6,
color: ‘#888888’
},
unitInterval: 10,

rangeSelector: {

serieType: “splinearea”,
//padding: { left: 0, right: 0, top: 0, bottom: 0 },
//renderTo: $(‘#chart-container’),
backgroundColor: ‘white’,
//valueAxis: {
// labels: { textRotationPoint: “centertop” }
//},

size: 100,
showGridLines: false,
//formatFunction: function (value, itemIndex, serie, group) {

// return dataAdapter.records[itemIndex * 6].Time;

//},
//labelsFormatFunction: function (value, itemIndex, serie, group) {

// return “<span style=’color:red;transform:rotate(90deg);position:absolute;’>” + dataAdapter.records[itemIndex * 6].Time + “</span>”;

//},
unitInterval: 10

}
},

colorScheme: ‘scheme01’,
seriesGroups: [
{
/////////////////////
//type: typeChartType,
toolTipFormatFunction: toolTipCustomFormatFn,
toolTipBackground: ‘#00FF00’,
///////////////
type: ‘splinearea’,
//valueAxis:
//{
//unitInterval: 1,
//description: e.data.Name,
//showGridLines: false,
//axisSize: ‘auto’
//},
series: [
{ dataField: ‘Var’, displayText: e.data.Name, lineWidth: 2 }
]
//series: [{
// dataField: ‘a’,
// displayText: ‘A’
//}, {
// dataField: ‘b’,
// displayText: ‘B’
//}]
}
]
};

// setup the chart
$(‘#variableChart-‘ + e.data.Id).jqxChart(settings);
}
});

}
catch (ex) {
alert(ex.message);
}

}
}

[HristoParticipant]

Hello scada,

Try to update to latest version. On our demos we do not catch such behavior.
If you still have same issue please provide formatted code. Better way is on https://www.jseditor.io/ (also could share https://fiddle.jshell.net/ example)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[scadaParticipant]

i used latest version but get same result do you have sample chart code that show chart in new window not in main window?
$(‘#chartWindow’).jqxWindow(‘open’);

[scadaParticipant]

i make a simple code for my problem,

https://www.jseditor.io/?key=problem-in-display-tooltip-on-chart-for-v400-and-above

please suggestion to me that how i can fix this problem ?

thanks

[HristoParticipant]

Hello scada,

Thank you for the interest to our Widgets and for the example.
Unfortunately there are no such property to control the tooltip.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[scadaParticipant]

thanks Hristo,
but this problem was not in v3.8.2 , do is possible to suggest to me that how i can edit jqxChart.js to show tooltip in front of chart ?

[milesdParticipant]

I have this same issue and I have tracked it down to charts that are in windows no longer show the tooltip. You can see the behavior in your demo example of docking layout dashboard. http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdockinglayout/index.htm#demos/jqxdockinglayout/javascript-docking-layout-dashboard.htm
In the docked layout the tooltips work on the Project History chart. Now when you undock the chart window the tooltips no longer show and as Scada demonstrated are actual behind. Maybe a Z-index issue.
If you re-dock the window the tooltips work again.

[HristoParticipant]

Hello milesd,

Thank you for the feedback.
We will investigate this.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[milesdParticipant]

Did your investigation show anything?

[HristoParticipant]

Hello milesd,

Thanks for interest to our product. We create work item for this case.
You could find new things in the Release History.
Thank you for your understanding.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[milesdParticipant]

Thats is why I asked as the problem still occurs with the latest release and the release history did mention a fix.

Have you been able to recreate and identify the issue?

When will it be fixed?

Thanks

[HristoParticipant]

Hello milesd,

Unfortunately, we cannot say when exactly this will be fix.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[TonioXParticipant]

Hello,

I’ve found a mistake in creation of tooltips, only in jqx-all.js. It works by using jqx-chart.js.

It can create a problem with tooltip not showing and being hidden behind the chart.

With the minified version of jqx-all :

_createTooltip: function(F, l, z, A) {
			var s = this;
			var w = l.type;
			var D = false;
			var E = s._ttEl.box;
			if (!E) {
				D = true;
				E = s._ttEl.box = document.createElement("div");
				var f = 10000000;
				E.style.position = "absolute";
				E.style.cursor = "default";
				a(c).css({ <!-- Problem is here, c has to be replaced by E -->
					"z-index": f,
					"box-sizing": "content-box"
				});
				a(document.body).append(E);
				var c = document.createElement("div");
				c.id = "arrowOuterDiv";
				c.style.width = "0px";
				c.style.height = "0px";
				c.style.position = "absolute";
				a(c).css({
					"z-index": f + 1,
					"box-sizing": "content-box"
				});

I causes z-index not being set and tooltip div being overlapped by the chart.

Regards,
TonioX

[Author]

Posts