lloydroc/dwdmbar.js

## dwdmbar.js
<html>

  <head>
  </head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

  <body>
    <canvas id="myChart"></canvas>
  </body>

</html>

// we start with an array of powers and channels
// we need to sift throuth the powers and filter
// out the tx and rx. we also need to sift through
// the channels and insert null where there are
// holes. for example channels 21,23 would insert
// a null in the 22 hole

var meas = [
  {'power': -7.0,  'channel' : 22},
  {'power': -9.0,  'channel' : 23},
  {'power': -5.0,  'channel' : 25},
  {'power': -7.0,  'channel' : 26},
  {'power': -4.0,  'channel' : 27},
  {'power': -55.0, 'channel' : 22},
  {'power': -42.0, 'channel' : 23},
  {'power': -43.0, 'channel' : 25},
  {'power': -49.0, 'channel' : 26},
  {'power': -50.0, 'channel' : 27}
];

var txFilter = function(p) {
  return p.power >= -20.0;
};

var rxFilter = function(p) {
  return p.power < -20.0;
};

var measTx = meas.filter(txFilter);
var measRx = meas.filter(rxFilter);

var channels = [];

// there are 73 ITU DWDM channels
// http://www.telecomengineering.com/downloads/DWDM%20ITU%20Table%20-%20100%20GHz.pdf
var nullArrayLength73 = function() {
  var arr = new Array(73);
  for(var i=0;i<73;i++) {
  	arr[i] = null;
    channels[i] = i+1;
  }
  return arr;
};

var rx = nullArrayLength73();
var tx = nullArrayLength73();

measTx.forEach(function(txe) {
  tx[txe.channel] = txe.power;
});

measRx.forEach(function(rxe) {
  rx[rxe.channel] = rxe.power;
});

// We need the effect where the bars arise from -Inf
// Since all of our signals are assumed to be in the
// range of -60 to 0 dbm we will mirror this range
// on the x-axis so they go from 0 to 60. In order
// to do this the signal values need to be mirrored
// as well. So a -50 signal would mirro to 10, which
// is done by doing 60+-50 = 10

var max = -1.0*Math.max.apply(Math, tx);
var min = -1.0*Math.min.apply(Math, rx);
var mirrorMax = Math.max(Math.abs(min),Math.abs(max));
// round to nearest 10
mirrorMax = Math.ceil(mirrorMax/10.0)*10.0;

var mirrorFunc = function(e) {
  // Math.abs(null) = 0 ; not what we want
  if(e === null || e === undefined) return null;
  else return mirrorMax+e;
}

var txMirror = tx.map(function(txe) { return mirrorFunc(txe)});
var rxMirror = rx.map(function(rxe) { return mirrorFunc(rxe)});

var ctx = document.getElementById('myChart').getContext('2d');

var options = {
  barValueSpacing: 10,
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        var channel = tooltipItem.yLabel;
        var frequency = 190000+10*channel;
        var wavelength = 299792458/frequency;
        wavelength = parseFloat(wavelength).toFixed(2);
        return "Channel "+tooltipItem.yLabel+" / "+frequency+" GHz / "+wavelength+" nm";
      }
    }
  },
  scales: {
    xAxes: [{
    ticks: {
        callback: function(label, index, labels) {
        if (index % 5) return "";
          return label;
        }
      },
      scaleLabel: {
        display: true,
        labelString: 'Channel'
      }
    }],
    yAxes: [{
      ticks: {
        callback: function(label, index, labels) {
          return -1.0 * (mirrorMax-label);
        }
      },
      scaleLabel: {
        display: true,
        labelString: 'Power [dBm]'
      }
    }]
  }
}

var data = {
  labels: channels,
  datasets: [{
    label: "Tx",
    backgroundColor: "blue",
    data: txMirror
  }, {
    label: "Rx",
    backgroundColor: "red",
    data: rxMirror
  }]
};

var myLineChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});
	<html>

	<head>
	</head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

	<body>
	<canvas id="myChart"></canvas>
	</body>

	</html>

	// we start with an array of powers and channels
	// we need to sift throuth the powers and filter
	// out the tx and rx. we also need to sift through
	// the channels and insert null where there are
	// holes. for example channels 21,23 would insert
	// a null in the 22 hole

	var meas = [
	{'power': -7.0, 'channel' : 22},
	{'power': -9.0, 'channel' : 23},
	{'power': -5.0, 'channel' : 25},
	{'power': -7.0, 'channel' : 26},
	{'power': -4.0, 'channel' : 27},
	{'power': -55.0, 'channel' : 22},
	{'power': -42.0, 'channel' : 23},
	{'power': -43.0, 'channel' : 25},
	{'power': -49.0, 'channel' : 26},
	{'power': -50.0, 'channel' : 27}
	];

	var txFilter = function(p) {
	return p.power >= -20.0;
	};

	var rxFilter = function(p) {
	return p.power < -20.0;
	};

	var measTx = meas.filter(txFilter);
	var measRx = meas.filter(rxFilter);

	var channels = [];

	// there are 73 ITU DWDM channels
	// http://www.telecomengineering.com/downloads/DWDM%20ITU%20Table%20-%20100%20GHz.pdf
	var nullArrayLength73 = function() {
	var arr = new Array(73);
	for(var i=0;i<73;i++) {
	arr[i] = null;
	channels[i] = i+1;
	}
	return arr;
	};

	var rx = nullArrayLength73();
	var tx = nullArrayLength73();

	measTx.forEach(function(txe) {
	tx[txe.channel] = txe.power;
	});

	measRx.forEach(function(rxe) {
	rx[rxe.channel] = rxe.power;
	});

	// We need the effect where the bars arise from -Inf
	// Since all of our signals are assumed to be in the
	// range of -60 to 0 dbm we will mirror this range
	// on the x-axis so they go from 0 to 60. In order
	// to do this the signal values need to be mirrored
	// as well. So a -50 signal would mirro to 10, which
	// is done by doing 60+-50 = 10

	var max = -1.0*Math.max.apply(Math, tx);
	var min = -1.0*Math.min.apply(Math, rx);
	var mirrorMax = Math.max(Math.abs(min),Math.abs(max));
	// round to nearest 10
	mirrorMax = Math.ceil(mirrorMax/10.0)*10.0;

	var mirrorFunc = function(e) {
	// Math.abs(null) = 0 ; not what we want
	if(e === null \|\| e === undefined) return null;
	else return mirrorMax+e;
	}

	var txMirror = tx.map(function(txe) { return mirrorFunc(txe)});
	var rxMirror = rx.map(function(rxe) { return mirrorFunc(rxe)});

	var ctx = document.getElementById('myChart').getContext('2d');

	var options = {
	barValueSpacing: 10,
	tooltips: {
	callbacks: {
	label: function(tooltipItem, data) {
	var channel = tooltipItem.yLabel;
	var frequency = 190000+10*channel;
	var wavelength = 299792458/frequency;
	wavelength = parseFloat(wavelength).toFixed(2);
	return "Channel "+tooltipItem.yLabel+" / "+frequency+" GHz / "+wavelength+" nm";
	}
	}
	},
	scales: {
	xAxes: [{
	ticks: {
	callback: function(label, index, labels) {
	if (index % 5) return "";
	return label;
	}
	},
	scaleLabel: {
	display: true,
	labelString: 'Channel'
	}
	}],
	yAxes: [{
	ticks: {
	callback: function(label, index, labels) {
	return -1.0 * (mirrorMax-label);
	}
	},
	scaleLabel: {
	display: true,
	labelString: 'Power [dBm]'
	}
	}]
	}
	}

	var data = {
	labels: channels,
	datasets: [{
	label: "Tx",
	backgroundColor: "blue",
	data: txMirror
	}, {
	label: "Rx",
	backgroundColor: "red",
	data: rxMirror
	}]
	};

	var myLineChart = new Chart(ctx, {
	type: 'bar',
	data: data,
	options: options
	});