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>
</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');

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 = i / rtime;
  		//data.push(( p * p * p) * 65535 );
      var p = i / rtime;
      --p;
  		data.push(-( p * p  * 65535 ) + 65535);
    }
    else if (vtype === 1) {
    	var p = i / rtime;
      --p;
  		data.push(p * p * 65535);// * p * p + 1);
    }
    else if (vtype === 2) {
    	var p = i / (rtime/2);
      if (p < 1) {
	  		data.push( p * p *  (65535/2)  );
      }
      else {
      	p -= 2;
  			data.push((( p * p ) * 65535/2 ) + 65535);
      }
    }
  }
  chart.data.datasets[0].data = data;
  chart.update();
}

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