JavaScript Event ChartTry to mouse over the signal on the chart

VIEW MORE EVENT CHARTS
SAVE
VIEW HTML
EDIT ON CODEPEN
The event chart created by using KoolChart's JavaScript charting library is not a standalone chart type, but rather a feature that highlights certain data points that meet predefined conditions (events) in a typical chart by displaying animations or graphical representations.

In this JavaScript chart example, an event is set to occur at the point where the previous year's value and this year's value are equal.
<Line2DSeries xField="Date" yField="Data2" displayName="Last Year" htmlJsFunction="userFunction">

function userFunction (id, index, data, values) {
var past = data.Data1,
current = data.Data2;

// when this year's value reaches last year's value
if (past <= current && !dataStatus) {
dataStatus = true;

return {
content : "",
className : "chart_animate_element",
events : {
"mouseover" : function(event){
if (currentPointChartId.length > 0)
return;

currentPointElem = event.target;

var target = event.currentTarget;
var div = document.createElement("div");
var chartId;

div.id = "tooltip_chartHolder_" + Math.floor(Math.random() * 1000);
div.className = "tooltip_chart";

// Append the <div> created to the target (the <div> element over which the user's mouse point is positioned).
target.appendChild(div);

chartId = div.id.replace("Holder", "");
currentPointChartId = chartId;

KoolChart.create (chartId, div.id, "", "100%", "100%", function(id) {
document.getElementById(id).setLayout(layoutStr2);
document.getElementById(id).setData(chartData2);
});
},
"mouseout" : function(event) {
var target = event.relatedTarget;

// If the parent of the mouse-out target is the <div> element that flashes
while (target) {
if (target === currentPointElem)
return;
target = target.parentNode;
}

document.getElementById(currentPointChartId).destroy();
currentPointElem.removeChild(document.getElementById(currentPointChartId.replace("chart", "chartHolder")));
currentPointChartId = "";
}
}
};
} else if (past > current)
dataStatus = false;

return;
}