[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 ?

[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

[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 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);
}

}
}

[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 ?

[scadaParticipant]

ok,i correct code ,now return data of web service is following :

"{\"val\":\"5.3\", \"Date\":\"8:38\"},{\"val\":\"55.3\", \"Date\":\"8:52\"},......................."

and formatFunction in xAxis:
` formatFunction: function (value) {
return value.getHours() + ‘:’ + value.getMinutes();
},`
now i get a new error , do not show graph and xAxis ! only show yAxis and that value on graph!

[scadaParticipant]

thanks Peter Stoev,
i use this and other method but all method return 0 for time ! why?
only below method return time but that is wrong
return $.jqx.dataFormat.formatdate(value, “hh:mm”, ‘en-us’);

[scadaParticipant]

thanks Peter Stoev ,
my IDE is visual stdio 2012 , do my country is problem? see below figure for value :

i want to show hour and minute on graph .What should I do ?

[scadaParticipant]

ok , thank you sir ,
i have other question : why do not exist getHour or getminute in format function(see below image) ?

[scadaParticipant]

excuse me Keymaster for post in this topic
i test baseUnit for day and hour but dont work ,i have problem in a few period, perhaps my code is wrong , do you can show me a sample for get records of sql server and place it in jqxchart ?

[Author]

Posts