ChartJS Line Chart

Multiple Line Chart

by Yaroslav Samardak

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
  <div class="chartWrapper">
    <div class="chartContainer">
      <canvas id="chartJSContainer1" width="640" height="120"></canvas>
    </div>
    <div class="chartContainer">
      <canvas id="chartJSContainer2" width="640" height="120"></canvas>
    </div>
  </div>
</body>

CSS

.chartWrapper {
  position: relative;
  width: 640px;
  height: 120px;
  background-color : #eee;
  pointer-events: none;
}

.chartContainer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

JavaScript

let _seed = Date.now()

const ctx1 = document.getElementById('chartJSContainer1').getContext('2d')
const ctx2 = document.getElementById('chartJSContainer2').getContext('2d')

const bg = ctx1.createLinearGradient(0, 0, 0, 120);
bg.addColorStop(0, 'rgba(244,67,54,0.1)');
bg.addColorStop(0.5, 'rgba(244,67,54,0.8)');
bg.addColorStop(0.5, 'rgba(20,176,240,0.8)');
bg.addColorStop(1, 'rgba(20,176,240,0.2)');

function rand(min, max) {
  var seed = _seed
  min = min === undefined ? 0 : min
  max = max === undefined ? 1 : max
  _seed = (seed * 9301 + 49297) % 233280
  return min + (_seed / 233280) * (max - min)
}

function randomScalingFactor() {
	return Math.round(rand(0, 100))
}

function fillBattery(dec) {
	let val = 100 - rand(0, 30)
  const scale = 1

	return new Array(itemsCount / scale + 1).fill(0).map((_, i) => {
    return {
    	x: Math.max(0, i * scale - 1),
      y: (val = val - rand(0, dec)),
    }
  })
}

function fillRSSI() {
	const scale = 1

	return new Array(itemsCount / scale + 1).fill(0).map((_, i) => {
  	return {
    	x: Math.max(0, i * scale - 1),
      y: rand(10, 50),
    }
  })
}

// const itemsCount = 15 * 60 / 10
// const itemsCount = 60 * 60 / 10
const itemsCount = 320

var chartData = {
  labels: new Array(itemsCount).fill(0).map((_, i) => i),
  datasets: [{
    type: 'line',
    label: 'Battery',
    borderColor: 'blue',
    borderWidth: 1.5,
    fill: false,
    data: fillBattery(0.1),
  }, {
    type: 'bar',
    label: 'Capacity',
    borderColor: 'red',
    borderWidth: 1.5,
    fill: false,
    data: fillBattery(0.015),
  }, {
    type: 'bar',
    label: 'RSSI',
    backgroundColor: bg,
    borderColor: 'rgba(20,176,240,1)',
    borderWidth: {
      top: 1,
      right: 0,
      bottom: 0,
      left: 0
	  },
    fill: false,
    data: fillRSSI(),
  }]
}

const defYOptions = {
  ticks: {
    display: false,
    reverse: false,
    beginAtZero: true,
    suggestedMax: 100,
  },
  gridLines: {
    display: false,
    tickMarkLength: 0,
 ...