mirror of https://github.com/MISP/misp-dashboard
Support of hover in pie and line charts
parent
bd988a74a8
commit
3d1d4c29ca
|
@ -30,7 +30,10 @@ var lineChartOption = {
|
||||||
mode: "time",
|
mode: "time",
|
||||||
minTickSize: [1, "day"],
|
minTickSize: [1, "day"],
|
||||||
},
|
},
|
||||||
legend: { show: false }
|
legend: { show: false },
|
||||||
|
grid: {
|
||||||
|
hoverable: true
|
||||||
|
}
|
||||||
};
|
};
|
||||||
var pieChartOption = {
|
var pieChartOption = {
|
||||||
series: {
|
series: {
|
||||||
|
@ -47,6 +50,9 @@ var pieChartOption = {
|
||||||
legend: {
|
legend: {
|
||||||
show: true,
|
show: true,
|
||||||
labelFormatter: legendFormatter
|
labelFormatter: legendFormatter
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
hoverable: true
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -86,7 +92,7 @@ function legendFormatter(label, series) {
|
||||||
+ '</div>';
|
+ '</div>';
|
||||||
} catch(err) {
|
} catch(err) {
|
||||||
return '<div '
|
return '<div '
|
||||||
+ '<a class="tagElem"> ' + label
|
+ '<a class="tagElem" style="background-color: white; color: black;"> ' + label
|
||||||
+ '</a>';
|
+ '</a>';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -124,6 +130,15 @@ function updatePie(pie, data) {
|
||||||
} else {
|
} else {
|
||||||
pieWidget = $.plot(pieID, toPlot, pieChartOption);
|
pieWidget = $.plot(pieID, toPlot, pieChartOption);
|
||||||
pie.push(pieWidget);
|
pie.push(pieWidget);
|
||||||
|
$(pieID).bind("plothover", function (event, pos, item) {
|
||||||
|
if (item) {
|
||||||
|
$("#tooltip").html(legendFormatter(item.series.label))
|
||||||
|
.css({top: pos.pageY+5, left: pos.pageX+5})
|
||||||
|
.fadeIn(200);
|
||||||
|
} else {
|
||||||
|
$("#tooltip").hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -171,6 +186,15 @@ function updateLine(line, data) {
|
||||||
} else {
|
} else {
|
||||||
lineWidget = $.plot(lineID, toPlot, lineChartOption);
|
lineWidget = $.plot(lineID, toPlot, lineChartOption);
|
||||||
line.push(lineWidget);
|
line.push(lineWidget);
|
||||||
|
$(lineID).bind("plothover", function (event, pos, item) {
|
||||||
|
if (item) {
|
||||||
|
$("#tooltip").html(legendFormatter(item.series.label))
|
||||||
|
.css({top: item.pageY+5, left: item.pageX+5})
|
||||||
|
.fadeIn(200);
|
||||||
|
} else {
|
||||||
|
$("#tooltip").hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -204,4 +228,9 @@ $(document).ready(function () {
|
||||||
updatePieLine(categPie, categLine, url_getTrendingCateg)
|
updatePieLine(categPie, categLine, url_getTrendingCateg)
|
||||||
updatePieLine(tagPie, tagLine, url_getTrendingTag)
|
updatePieLine(tagPie, tagLine, url_getTrendingTag)
|
||||||
|
|
||||||
|
|
||||||
|
$("<div id='tooltip'></div>").css({
|
||||||
|
position: "absolute",
|
||||||
|
display: "none",
|
||||||
|
}).appendTo("body");
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue