JavaScript Line Chart Try to mouse over the signal on the chart

VIEW MORE CHARTS
SAVE
VIEW HTML
EDIT ON CODEPEN
A line chart is a type of chart that displays information as a series of data points called 'markers' connected by a line that can be: Straight Line, Curved Line, Stepped Line, Dashed Line. To create a line chart using KoolChart's JavaScript charting library, the <Line2DChart> and <Line2DSeries> elements must be set in Layout.

In this JavaScript chart example, two <Line2DSeries> elements are set and 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;
}