i need to get the intersection point of two series in chart

Question

i need to get the intersection point of two series in a chart.i dont have any idea to do it

Laxmidhar Sahoo · Answer

https://jsfiddle.net/Falseclock/5nbecn0z/ var ORDER_STATS = { "2016": [10, 181, 194, -56, 130, 181, 179, 189, 30, 60, 193, 154], "2015": [124, -50, 152, 187, 10, 164, 129, -16, 115, 119, 129, 171], "2014": [-90, 80, 30, 59, 100, -30, 60, 116, 191, 181, -60, 106] }; var colors = ['206,191,26', '119,206,26', '26,200,206', '236,124,98', '206,26,140', '26,77,206']; // Definning X var ordersChartData = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [] } Object.keys(ORDER_STATS).forEach(function(key) { color = colors.shift(); ordersChartData.datasets.push({ label: key, lineTension: 0, type: 'line', backgroundColor: "rgba(" + color + ",0.1)", borderColor: "rgba(" + color + ",1)", borderWidth: 2, pointBackgroundColor: "rgba(" + color + ",1)", pointBorderColor: "#fff", pointBorderWidth: 1, pointRadius: 4, pointHoverBackgroundColor: "#fff", pointHoverBorderColor: "rgba(" + color + ",1)", pointHoverBorderWidth: 1, data: ORDER_STATS[key] }); }); var ctx = document.getElementById("myChart").getContext("2d"); Chart.defaults.global.defaultFontColor = 'grey'; Chart.defaults.global.defaultFontFamily = "Tahoma"; Chart.defaults.global.defaultFontSize = 11; Chart.defaults.global.defaultFontStyle = 'normal'; var myChart = new Chart(ctx, { type: 'line', data: ordersChartData, defaultFontSize: 11, options: { responsive: true, title: { display: true, text: 'Intersection realization', fontColor: "#444", fontFamily: 'Tahoma', padding: 0 }, legend: { display: true, labels: { fontColor: 'grey', usePointStyle: true } }, tooltips: { mode: "index", intersect: true, position: 'nearest', bodySpacing: 4 } } }); Chart.plugins.register({ afterDatasetsDraw: function(chartInstance, easing) { var intersects = findIntersects(ORDER_STATS['2015'], ORDER_STATS['2014']); var context = chartInstance.chart.ctx; var Y = chartInstance.scales['y-axis-0']; var X = chartInstance.scales['x-axis-0']; zeroPointY = Y.top + ((Y.bottom - Y.top) / (Y.ticks.length - 1) * Y.zeroLineIndex); zeroPointX = Y.right; yScale = (Y.bottom - Y.top) / (Y.end - Y.start); xScale = (X.right - X.left) / (X.ticks.length - 1); intersects.forEach(function(result, idx) { context.fillStyle = 'red'; context.beginPath(); context.arc((result.x * xScale) + zeroPointX, (Y.end - Y.start) - (result.y * yScale) - ((Y.end - Y.start) - zeroPointY), 3, 0, 2 * Math.PI, true); context.fill(); }); } }); function findIntersects(line1, line2) { var intersects = []; line1.forEach(function(val, idx) { var line1StartX = idx; var line1StartY = line1[idx]; var line1EndX = idx + 1; var line1EndY = line1[idx + 1]; var line2StartX = idx; var line2StartY = line2[idx]; var line2EndX = idx + 1; var line2EndY = line2[idx + 1]; result = checkLineIntersection(line1StartX, line1StartY, line1EndX, line1EndY, line2StartX, line2StartY, line2EndX, line2EndY); if (result.onLine1 && result.onLine2) { intersects.push(result); } }); return intersects; } function checkLineIntersection(line1StartX, line1StartY, line1EndX, line1EndY, line2StartX, line2StartY, line2EndX, line2EndY) { // if the lines intersect, the result contains the x and y of the intersection (treating the lines as infinite) and booleans for whether line segment 1 or line segment 2 contain the point var denominator, a, b, numerator1, numerator2, result = { x: null, y: null, onLine1: false, onLine2: false }; denominator = ((line2EndY - line2StartY) * (line1EndX - line1StartX)) - ((line2EndX - line2StartX) * (line1EndY - line1StartY)); if (denominator == 0) { return result; } a = line1StartY - line2StartY; b = line1StartX - line2StartX; numerator1 = ((line2EndX - line2StartX) * a) - ((line2EndY - line2StartY) * b); numerator2 = ((line1EndX - line1StartX) * a) - ((line1EndY - line1StartY) * b); a = numerator1 / denominator; b = numerator2 / denominator; // if we cast these lines infinitely in both directions, they intersect here: result.x = line1StartX + (a * (line1EndX - line1StartX)); result.y = line1StartY + (a * (line1EndY - line1StartY)); /* // it is worth noting that this should be the same as: x = line2StartX + (b * (line2EndX - line2StartX)); y = line2StartX + (b * (line2EndY - line2StartY)); */ // if line1 is a segment and line2 is infinite, they intersect if: if (a > 0 && a result.onLine1 = true; } // if line2 is a segment and line1 is infinite, they intersect if: if (b > 0 && b result.onLine2 = true; } // if line1 and line2 are segments, they intersect if both of the above are true return result; };

i need to get the intersection point of two series in chart

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (1)