CanvasJS chart with binäry strips

by Volker_Voss_TechnoStep

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="chartContainer" style="height: 360px; width: 100%;"></div>

CSS

.canvasjs-chart-toolbar {
  display: none;
}

JavaScript

var noBinSeries = 20;		//no of binary data series
var bitLevel = 5;				//start bit level for signal toggle 0/1
var maxDiffStrips = 5;	//mmax no. of different strips; 

var chart = new CanvasJS.Chart("chartContainer", {
  zoomEnabled: true,
  zoomType: "x",
  title: {
    text: "Binary strips"
  },
  axisX: {
  },
  axisY: binYAxis(noBinSeries),		//create y axis array
  rangeChanged: function(e) {
    if (e.trigger === "reset") {
      document.getElementsByClassName("canvasjs-chart-toolbar")[0].style.display = "none";
    } else { //if(e.trigger ==="zoom" || e.trigger === "pan")
      document.getElementsByClassName("canvasjs-chart-toolbar")[0].style.display = "block";
    }
  },
  data: binStrips(noBinSeries)	//create data series
});

chart.render();


//create array of y binary axes
function binYAxis(noBinSerie)
{
	var binYAxsis= [];
  for (i = 0; i < noBinSeries; i += 1 )
  {
    //place next binary strip below the previous one
  	binYAxsis.push({
    maximum: 2 + i,
  	minimum: 0 - noBinSerie + i,
    //hide Y axis
  	lineThickness: 0,
  	gridThickness: 0,
  	tickLength: 0,
  	labelFormatter: function(e) {
  	    return "";
  	}
    })
  }
  return(binYAxsis);
}

function binStrips(limit) {
	var arrayBinStrips = [];
  for (var i = 0; i < limit; i += 1) {
    arrayBinStrips.push({
      type: "rangeArea",
      axisYIndex: i,
      dataPoints: binStrip((bitLevel+i % maxDiffStrips), 2000)
    })
  }
  return(arrayBinStrips);
}


function binStrip(bitLevel,limit) {
  limit = limit || 2000; //increase number of dataPoints by increasing this
  var y1 = 0;		//lower val range area; always zero(0)
  var y2 = 0;		//upper val range area; one(1) or zero(0)
  var dataPoints = [];
  for (var i = 0; i < limit; i += 1) {
    //use bit level to toggle signal val 0/1
    if( (i & Math.pow(2, bitLevel)) > 0 ) {
    	y2 = 1;
    }
    else {
			y2 = 0;    
    }
    dataPoints.push({
      x: i,
      y: [ y1, y2 ]
    });
  }
  return dataPoints;
}