ChartJS Line Chart

Multiple Line Chart

by Barry Carter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
  <canvas id="chartJSContainer1" width="600" height="400"></canvas>
  <canvas id="chartJSContainer2" width="600" height="400"></canvas>
  <canvas id="chartJSContainer3" width="600" height="400"></canvas>
  <canvas id="chartJSContainer4" width="600" height="400"></canvas>
</body>

CSS

canvas { background-color : #eee;
}

JavaScript

var rtime = 200;

var options = {
  type: 'line',
  data: {
    labels: [0, 1, 2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
    datasets: [
	    {
	      label: 'Progress',
	      data: [12, 19, 3, 5, 2, 3],
      	borderWidth: 1
    	}
		]
  },
  options: {
  	scales: {
    	yAxes: [{
        ticks: {
					reverse: false,
        }
      }],
      xAxes: [{
        ticks: {
          autoSkip: true,
          maxRotation: 90,
          minRotation: 90
        }
      }]
    }
  }
}

function jsonCopy(src) {
  return JSON.parse(JSON.stringify(src));
}

var ch1 = initChart('chartJSContainer1');
var ch2 = initChart('chartJSContainer2');
var ch3 = initChart('chartJSContainer3');
var ch4 = initChart('chartJSContainer4');

function initChart(chartName) {
  var ch = new Chart(document.getElementById(chartName).getContext('2d'), jsonCopy(options));

  var arr = [];
  for(var i = 0; i < rtime; i++) {
    arr.push(i);
  }
  ch.data.labels = arr;
  ch.update();
  return ch;
}

function draw(vtype, chart) {
	var data = [];
  for(var i = 0; i < rtime; i++) {
  	if (vtype === 0) {
  		var p = 65535 -( (i * 65535) / rtime);
      console.log(p);
  		data.push( ( p * p) / 65535 );
    }
    else if (vtype === 1) {
      var p = 65535 - ((i * 65535) / rtime);
      p-=65535;
      console.log(p);
  		data.push(-( p * p  / 65535 ) + 65535);
    }
    else if (vtype === 2) {
    	var p = (i * 65535) / (rtime);
      console.log("PP", p);
      if (p < 65535/2) {
	  		data.push( p * p /  (65535/2)  );
      }
      else {
      	p -= (65535);
  			data.push(-(( p * p ) / (65535/2) ) + 65535);
      }
    }
    else if (vtype === 3) {
    	var p = 65535 - ((i * 65535) / (rtime));
      console.log("PP", p);
      if (p < 65535/2) {
	  		data.push( p * p /  (65535/2)  );
      }
      else {
      	p -= (65535);
  			data.push(-(( p * p ) / (65535/2) ) + 65535);
      }
    }
  }
  chart.data.datasets[0].data = data;
  chart.update();
}

draw(0, ch1);
draw(1, ch2);
draw(2,...