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>


Related Query

More Query from same tag