Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

const data = [{
  'start': 1483228800,
  'valueOne': 18.86,
  'valueTwo': 40.76
}, {
  'start': 1483229700,
  'valueOne': 55.95,
  'valueTwo': 78.26
}, {
  'start': 1483230600,
  'valueOne': 48.27,
  'valueTwo': 10
}, {
  'start': 1483231500,
  'valueOne': 67.65,
  'valueTwo': 99.65
}, {
  'start': 1483232400,
  'valueOne': 25.50,
  'valueTwo': 51.26
}]

const findIntersection = (xOneA, xOneB, yOneA, yOneB, xTwoA, xTwoB, yTwoA, yTwoB) => {
  // assuming they are intersectable!!! will error if not
  const equationASlope = (yTwoA - yOneA) / (xTwoA - xOneA)
  const equationBSlope = (yTwoB - yOneB) / (xTwoB - xOneB)
  const equationAIntercept = yOneA - (equationASlope * xOneA)
  const equationBIntercept = yOneB - (equationBSlope * xOneB)

  const xIntersectionValue = (equationBIntercept - equationAIntercept) / (equationASlope - equationBSlope)

  const yIntersectionValue = ((equationAIntercept / equationASlope) - (equationBIntercept / equationBSlope)) / ((1 / equationASlope) - (1 / equationBSlope))

  return {
    'start': xIntersectionValue,
    'valueOne': yIntersectionValue,
    'valueTwo': yIntersectionValue
  }

}

const isIntersectable = (xOneA, xOneB, yOneA, yOneB, xTwoA, xTwoB, yTwoA, yTwoB) => {
  if ((yOneA < yOneB && yTwoA > yTwoB) || (yOneA > yOneB && yTwoA < yTwoB)) {
    return true
  } else {
    return false
  }
}

const findShadedAreaPoints = data => {
  const newArr = []
  for (i = 0; i < data.length; i++) {
    newArr.push(data[i])
    if (i < data.length - 1) {
      const current = data[i]
      const next = data[i + 1]
      
      const xOneA = current.start
      const xTwoA = next.start
      const yOneA = current.valueOne
      const yTwoA = next.valueOne
      const xOneB = current.start
      const xTwoB = next.start
      const yOneB = current.valueTwo
      const yTwoB = next.valueTwo
      
      const willIntersect = isIntersectable(xOneA, xOneB, yOneA, yOneB, xTwoA, xTwoB, yTwoA, yTwoB)

      if (willIntersect) {
        const...