ChartJS Sin

Multiple Line Chart

by enagu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.1/chartjs-plugin-zoom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

CSS

canvas {
  background-color: #eee;
}

JavaScript

var range = function(start, stop, step){
      step = step || 1;
      var arr = [];
      for (var i=start;i<stop;i+=step){
         arr.push(i);
      }
      return arr;
};

var is_close = function(val, L, epsilon) {
	return Math.abs(val-L) < epsilon;
}

function map(x,  in_min,  in_max,  out_min,  out_max) {
  return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

var i = 20;
while(i--) console.log();

var pi = Math.PI;

var amplitudes = {
	data: [
    {x: 0, A: 1},
    {x: 1/2*pi, A: 1},
    {x: 3/2*pi, A: 1},
    {x: 5/2*pi, A: 0.7},
    {x: 4*pi, A: 0.7},
    {x: 5*pi, A: 1},
    {x: 6*pi, A: 0.9},
    {x: 8*pi, A: 1}
  ],
	getPreviousNext: function(x) {
  	// si x = 2*pi, el previo es 1 y el siguiente 0.5
    // si x = 5*pi, el previo es 0.5 y el siguiente 1
    
    // find the index where we are
    var index = 0;
    for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].x >= x) {
        	index = i; 
        	break;
        }
    }
    
    // we are at index - 1, next is index
    index--;
    
    // prev = data[index], next = data[index+1]
    return [this.data[index], this.data[index+1]];
  }
}

var spikes = [
	{start: 1/2*pi, end: 1/2*pi+0.2, pw: 1},
  {start: 1/2*pi+0.4, end: 1/2*pi+0.65, pw: 2},
  {start: 3*pi, end: 3*pi+0.2, pw: -2},
  {start: 3*pi+0.35, end: 3*pi+0.38, pw: -0.2},
  {start: 3*pi+0.4, end: 3*pi+0.65, pw: -1.5}
]

var cb_label_y = function(value, index, ticks) {
	
}

var options = {
  type: 'line',
  data: {
    labels: range(0, 8*Math.PI, 0.03),
    //labels: range(3*pi-2, 4*pi, 0.03),
    datasets: [{
        label: "voltaje (V)",
        function: function(x, A) { 
        		var spk = spikes.find(s => x <= s.end && x >= s.start);
            var y = A*Math.sin(x);
            
            if (spk) {
            	return map(x, spk.start, spk.end, y, y+spk.pw);
            }
            
        		return y;
        },
        data: [],
        borderColor: "rgba(75, 192, 192, 1)",
       ...