Event ChartTry to mouse over the signal on the chart

VIEW MORE EVENT CHARTS
VIEW HTML
EDIT ON CODEPEN
Event charts are 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 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;
}