score:9
here we are )))
https://jsfiddle.net/falseclock/5nbecn0z/
if you need to show intersections with x axis, then just imitate line with y=0 https://jsfiddle.net/falseclock/8g0ucdb1/
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 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);
var intersects = findintersects(order_stats['2015'], order_stats['2014'] );
var context = chartinstance.chart.ctx;
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 < 1) {
result.online1 = true;
}
// if line2 is a segment and line1 is infinite, they intersect if:
if (b > 0 && b < 1) {
result.online2 = true;
}
// if line1 and line2 are segments, they intersect if both of the above are true
return result;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.js"></script>
<canvas id="mychart" width="650" height="241" style="display: block; width: 650px; height: 241px;"></canvas>
Source: stackoverflow.com
Related Query
- Intersection point in line graph in Chart.js?
- line chart with {x, y} point data displays only 2 values
- How to display Line Chart dataset point labels with Chart.js?
- chartjs show dot point on hover over line chart
- ChartJS: Draw vertical line at data point on chart on mouseover
- ChartJS - Line chart issue with only 1 point
- how to programmatically make a line chart point active/highlighted
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- Change size of a specific point on a line chart in Chart.js
- Add a text as tooltip for each point on a line chart
- Chart.js V2 line chart missing point
- Chart Js update legend boxes of graph with graph line style
- Empty circle - only point strok in line chart for ChartJS
- No tooltips on Chart JS line graph
- Chart JS Line Graph multitooltipkey background color issue
- Single point on multiple line linear graph with Chart.js
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- plot a point on top on line chart in chartjs
- ChartJS line chart or bar graph from a Java program
- Draw line between starting point and Ending point in semi doughnut chart in chart js
- Chart.js line chart not showing point on top most value
- How to get rid of the line on top of every point on a line chart (Chart.js)
- Can chart.js display text associated with each point on a line chart that is permanently visible?
- How to Draw a line on chart without a plot point using chart.js
- How to Add X axis Padding in chart js Line Graph
- Show label for every data point in line chart
- Line chart is drawing before first point in Chart.js
- chart.js Line chart doesn't display line past a certain point in the chart
- Canvas line chart on this graph stretch beyond the assigned lengths
- chartjs line graph destroy function is not clearing the old chart instances
More Query from same tag
- "<%=value%>" in javascript not ASP.net
- Chart.js zoom shows decimal points
- How do I resolve this error; 'document.getElementById('myChart').getContext' is undefined)?
- findOne returns undefined in onRendered
- chart.js pie chart issue with display: none
- chart.js - problem with label on the right hand
- Error on Chart.js with Electron - Failed to create chart: can't acquire context from the given item
- Chart.js - Creating multiple charts on one page
- How to emit an event with vue-chartjs?
- Overlapping Bar Chart using Chart.js
- Chartjs yAxes not rendering ticks
- Why is chart.js canvas not respecting the padding of the container element?
- Chart of chart.js can't display In Edge and Firefox
- Chart JS Custom tooltips with % and label for X and Y axles
- Additional line in BarChart (Charts.js)
- jQuery - destroy and rebuild chart with original options
- how to add a title to my ng2-charts bar chart
- how to change the Y-axis values from float number to integer in chartjs?
- Automatic resize of chart - AngularChartJS
- Display chart data based on API call
- Chartjs-2(React), Lines do not appear
- Cant assign data to ng2 piechart after receiving it in HTTP response
- Loop through array for chart.js input
- How to get data from JSON ReactJs
- Overlay text message on top of a chart
- use ng2-charts with a loader and AfterViewInit
- How to load data values from cookie into Chart.js
- Image-Chart ChartJs Ticks Callback not Working?
- How to shift the origin along y-axis direction in a chart.js3 line chart, so that x-axis pass through a different point other than (0,0)?
- How to split data from api to get a chart