Untitled

<!DOCTYPE html>
<html>

  <head>
    <script type="text/javascript" src="https://rsg-group.github.io/intersection/scripts/intersection.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div style="width: 980px">
          <canvas id="myChart" width="980" height="400"></canvas>
    </div>
  </body>

</html>

// Code goes here


setTimeout(function() {
  const simpleNums = [{
    x1: 0,
    y1: 3,
    x2: 0,
    y2: 5
  }, {
    x1: 3,
    y1: 5,
    x2: 3,
    y2: -4
  }, {
    x1: 4,
    y1: 2,
    x2: 4,
    y2: 6
  }, {
    x1: 6,
    y1: 7,
    x2: 6,
    y2: 3
  }, {
    x1: 8,
    y1: -3,
    x2: 8,
    y2: -1
  }, {
    x1: 9,
    y1: 2,
    x2: 9,
    y2: -2
  }, ];

  const numsWithIntersection = [];
  const maxX = Math.max(...simpleNums.map(a => a.x1));
  simpleNums.forEach((point, i, arr) => {
    if (i > 0) {
      const prev = arr[i - 1];
      const curr = point;
      const intersection = findIntersection([{
          x: curr.x1,
          y: curr.y1
        }, {
          x: prev.x1,
          y: prev.y1
        },

        {
          x: curr.x2,
          y: curr.y2
        }, {
          x: prev.x2,
          y: prev.y2
        },
      ]);

      numsWithIntersection.push({
        xPercentage: intersection.x / (maxX + 1)
      });
    }
  });

  const GREEN = 'green';
  const RED = 'red';
  var ctx = document.getElementById("myChart").getContext("2d");
  const gradientFill1 = ctx.createLinearGradient(0, 0, 980, 0);

  gradientFill1.addColorStop(
    0,
    RED
  );

  numsWithIntersection.forEach((num, i) => {
    if (i % 2 === 0) {
      gradientFill1.addColorStop(
        num.xPercentage,
        RED
      );
      gradientFill1.addColorStop(
        num.xPercentage,
        GREEN
      );
    } else {
      gradientFill1.addColorStop(
        num.xPercentage,
        GREEN
      );
      gradientFill1.addColorStop(
        num.xPercentage,
        RED
      );
    }
  });

  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: simpleNums.map(a => a.x1),
      datasets: [{
        label: 'data1',
        data: simpleNums.map(item => ({
          x: item.x1,
          y: item.y1
        })),
        borderColor: "black",
        fill: false,
        steppedLine: false,
        backgroundColor: gradientFill1,
        tension: 0,
        borderWidth: 2,
      }, {
        label: 'data2',
        data: simpleNums.map(item => ({
          x: item.x2,
          y: item.y2
        })),
        borderColor: "black",
        backgroundColor: gradientFill1,

        borderDash: [3, 6],
        fill: '-1',
        steppedLine: false,
        tension: 0,
        borderWidth: 2
      }]
    }
  });
}, 2000)

/* Styles go here */