i am using flot API to build bar charts. I am successful in plotting bar charts.But i am not getting tooltip for those charts.I have tried alot but i failed to achieve this. My code is:
$(function () {
var a1 = [
[0, 100],
[1, 200],
[2,300],
[3,400],
[4,500]
];
var a2 = [
[0, 90],
[1, 150],
[2,250],
[3,380],
[4,450]
];
//var ticks=[[0,"Overall"],[1,"SEA"],[2,"INDIA"],[3,"NEA"],[4,"PZ"]];
var data = [
{
label: "Pre Transformation",
data: a1
},
{
label: "Post Transformation",
data: a2
}
];
$.plot($("#placeholder2"), data, {
series: {
bars: {
show: true,
barWidth: 0.13,
order: 1
}
},
xaxis: {
ticks: [[0,"Overall"],[1,"SEA"],[2,"INDIA"],[3,"NEA"],[4,"PZ"]]
//tickLength: 0
},
grid: {
hoverable: true,
clickable:true
//mouseActiveRadius: 30 //specifies how far the mouse can activate an item
},
valueLabels: {
show: true
}
});
});
var previousPoint = null, previousLabel = null;
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 40,
left: x - 120,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 0.9
}).appendTo("body").fadeIn(200);
}
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
var color = item.series.color;
//console.log(item.series.xaxis.ticks[x].label);
showTooltip(item.pageX,
item.pageY,
color,
"<strong>" + item.series.label + "</strong><br>" + item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong> °C");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
Please help me in this regard.
i am using flot API to build bar charts. I am successful in plotting bar charts.But i am not getting tooltip for those charts.I have tried alot but i failed to achieve this. My code is:
$(function () {
var a1 = [
[0, 100],
[1, 200],
[2,300],
[3,400],
[4,500]
];
var a2 = [
[0, 90],
[1, 150],
[2,250],
[3,380],
[4,450]
];
//var ticks=[[0,"Overall"],[1,"SEA"],[2,"INDIA"],[3,"NEA"],[4,"PZ"]];
var data = [
{
label: "Pre Transformation",
data: a1
},
{
label: "Post Transformation",
data: a2
}
];
$.plot($("#placeholder2"), data, {
series: {
bars: {
show: true,
barWidth: 0.13,
order: 1
}
},
xaxis: {
ticks: [[0,"Overall"],[1,"SEA"],[2,"INDIA"],[3,"NEA"],[4,"PZ"]]
//tickLength: 0
},
grid: {
hoverable: true,
clickable:true
//mouseActiveRadius: 30 //specifies how far the mouse can activate an item
},
valueLabels: {
show: true
}
});
});
var previousPoint = null, previousLabel = null;
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 40,
left: x - 120,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 0.9
}).appendTo("body").fadeIn(200);
}
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
var color = item.series.color;
//console.log(item.series.xaxis.ticks[x].label);
showTooltip(item.pageX,
item.pageY,
color,
"<strong>" + item.series.label + "</strong><br>" + item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong> °C");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
Please help me in this regard.
Share Improve this question edited Jan 23, 2014 at 20:00 mechenbier 3,06724 silver badges31 bronze badges asked Jan 23, 2014 at 13:45 FirozFiroz 4862 gold badges6 silver badges21 bronze badges 2- Use tool tip ponent is Twitter Bootstrap or any such frameworks. – user2672373 Commented Jan 23, 2014 at 13:48
- You're calling the 'showTooltip' method in your plothover event, but I don't see where that function is defined in your code. Do you have a 'showTooltip' function that you didn't show us? or is it just undefined? – mechenbier Commented Jan 23, 2014 at 13:48
2 Answers
Reset to default 10Not sure what you were trying to achieve with
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
But try replacing with this:
$("#placeholder2").on("plothover", function (event, pos, item) {
if (item) {
// and removing trailling } in the end
Demo
Your code is almost ok, there is just single peace is missing.
To understand what peace and why it is missing you should first understand what 'prototype' is and how jQuery use it. In short words - prototype is and object which defines default property values/method implementations for some other object. '$.fn' in jQuery is short reference to prototype. So calling
$.fn.UseTooltip = function () { ... }
will create default implementation for function UseTooltip for all object created by jQuery - e.g. now you can call $(someSelector).UseTooltip(some-parameters).
The important thing in your code is in the fact, that although you defined this function, you never invoked it. This means that you didn't attach tooltip to your bar chart. Simply add:
$("#placeholder2").UseTooltip()
This should solve you problem.