I am utilizing the flot Chart library to display a graph within a modal window. Everything is functioning properly except for the Tooltip popover not appearing when I hover over the plot.
Below is my JavaScript code: $(document).on('click','a[data-target="#evolutieProdus"]',function(){
var route = 'http://www.fabricademagie.ro/metronic/comenzi/returnOrdersYear';
var productcode = $(this).data('productcode');
var productid = $(this).data('productid');
var data = {
'productcode': productcode,
'productid': productid
};
$.post(route,data,function(response){
response = jQuery.parseJSON(response);
//console.log(response);
var obj = response.an ;
var an_prezent = Object.keys(obj).map(function(e){
return [Number(e), obj[e]];
});
var obj2 = response.precedent ;
var an_precedent = Object.keys(obj2).map(function(e){
return [Number(e), obj2[e]];
});
var obj3 = response.second ;
var an_secund = Object.keys(obj3).map(function(e){
return [Number(e), obj3[e]];
});
function showChartTooltip(x, y, xValue, yValue, color) {
var _item = $('<div id="tooltip" class="chart-tooltip2">' + yValue + '<\/div>').css({
position: 'absolute',
display: 'none',
top: y,
left: x,
border: '0px solid #ccc',
padding: '2px 6px',
'color' : color,
'border' : '1px solid #000',
'background-color': '#CCC !important'
}).appendTo("#evolutieProdus").fadeIn(300);
_item.css('left',x - (_item.width() - -20));
}
if ($('#chart_2').size() != 0) {
//$('#orders_year_loading').hide();
//$('#orders_year_content').show();
var plot_statistics = $.plot($("#chart_2"),
[{
data: an_prezent,
lines: {
show: true,
fill: false,
lineWidth: 5
},
color: '#D91E18',
shadowSize: 0,
label: " Anul <?=date('Y');?>"
},{
data: an_prezent,
points: {
show: true,
fill: true,
radius: 7,
fillColor: "#D91E18",
lineWidth: 5
},
color: '#fff',
shadowSize: 1
},{
data: an_precedent,
lines: {
show: true,
fill: false,
lineWidth: 3
},
color: '#00BCD4',
shadowSize: 0,
label: " Anul <?=date('Y') - 1;?>"
},{
data: an_precedent,
points: {
show: true,
fill: true,
radius: 5,
fillColor: "#00BCD4",
lineWidth: 3
},
color: '#fff',
shadowSize: 1
},{
data: an_secund,
lines: {
show: true,
fill: false,
lineWidth: 3
},
color: '#FF9800',
shadowSize: 0,
label: " Anul <?=date('Y') - 2;?>"
},{
data: an_secund,
points: {
show: true,
fill: true,
radius: 5,
fillColor: "#FF9800",
lineWidth: 3
},
color: '#fff',
shadowSize: 1
}],
{
xaxis: {
tickLength: 0,
tickDecimals: 0,
mode: "categories",
min: 0,
font: {
lineHeight: 34,
style: "normal",
variant: "small-caps",
color: "#FF5722"
}
},
yaxis: {
ticks: 5,
tickDecimals: 0,
tickColor: "#eee",
font: {
lineHeight: 34,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
grid: {
hoverable: true,
borderWidth: 0,
margin: 5
}
});
var previousPoint = null;
$("#chart_2").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
var _color = "#212121";
if(item.series.points.fillColor !== undefined && item.series.points.fillColor !== null && item.series.points.fillColor.length){_color = item.series.points.fillColor;}
showChartTooltip(item.pageX, item.pageY, item.datapoint[0], item.datapoint[1] + ' Bucati vandute',_color);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
}
});
});