<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"jqwidgets/styles/jqx.base.css"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
src
=
"scripts/jquery-1.11.1.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxcore.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxchart.core.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxdraw.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxdata.js"
>
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
h3
>
jQWidgets jqxChart
toolTipFormatFunction property
</
h3
>
<
div
id
=
'gfg1'
style="width:400px;
height: 200px" />
</
center
>
<
center
>
<
input
type
=
"button"
id
=
"btn"
value
=
"Click Here"
style="padding: 5px 14px;
margin-top: 15px;">
<
br
>
<
div
id
=
"log"
></
div
>
</
center
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
var data = [
{ Day: 'Monday', f1: 3, t1: 1, f2: 2, t2: 1 },
{ Day: 'Tuesday', f1: 3, t1: 1, f2: 2, t2: 1 },
{ Day: 'Wednesday', f1: 3, t1: 1, f2: 2, t2: 1 },
{ Day: 'Thursday', f1: 3, t1: 1, f2: 2, t2: 1 },
{ Day: 'Friday', f1: 3, t1: 1, f2: 2, t2: 1 },
{ Day: 'Saturday', f1: 3, t1: 1, f2: 2, t2: 1 },
{ Day: 'Sunday', f1: 3, t1: 1, f2: 2, t2: 1 }
];
var toolTipFormatFn = function (val, iIndex, s, grp, cValue) {
var dItem = data[iIndex];
return '<
DIV
style
=
"text-align:left"
><
b
>Day: ' + cValue +
'</
b
><
br
/>Begin: ' + val.from +
'<
br
/>End: ' + val.to;
};
var obj = {
title: "Coding Score",
description: "Coding Questions Solved Daily",
enableAnimations: true,
showLegend: true,
source: data,
categoryAxis: {
dataField: 'Day',
showGridLines: true
},
seriesGroups: [{
type: 'rangecolumn',
columnsGapPercent: 30,
seriesGapPercent: 0,
toolTipFormatFunction: toolTipFormatFn,
series: [
{ dataFieldFrom: 'f1', dataFieldTo: 't1' },
{ dataFieldFrom: 'f2', dataFieldTo: 't2' },
]
}]
};
$('#gfg1').jqxChart(obj);
$('#btn').click(function () {
var ttff = $('#gfg1').jqxChart('toolTipFormatFunction');
if (ttff === null) {
$('#log').text("Null!");
}
else {
$('#log').text("Not null!");
}
});
});
</
script
>
</
body
>
</
html
>