JavaScript
var myPlot;
$(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
}];
myPlot = $.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);
}
$("#placeholder2").on("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
...