Multiple charts with crosshair and scale linker

This jsfiddle illustrates how to implement multiple charts on one page and link their crosshairs and range selectors

by Jon Eyrick

HTML

<link rel="stylesheet" href="http://jsfiddle.chartiq.com/chart/css/stx-chart.css">
<div class="chartLayout chartContainer1" ></div>
<div class="chartLayout chartContainer2"></div>
<div class="chartLayout chartContainer3"></div>
<div class="chartLayout chartContainer4"></div>

<script src="http://jsfiddle.chartiq.com/chart/js/chartiq.js"></script>
<script src="http://jsfiddle.chartiq.com/chart/example-data/STX_SAMPLE_DAILY.js"></script>

CSS

.chartLayout {
  float:left;
  width:400px;
  height:200px;
  position:relative;
  border:1px solid blue;
  border-radius:16px
}
/*turn off zoom buttons for small charts*/
#chartSize { 
	display: none;
}


/* don't display the symbol label 
.stx-panel-title { 
	display: none;
}
*/

JavaScript

var stxx1=new CIQ.ChartEngine({container:$$$(".chartContainer1"),layout:{crosshair:true,"chartType": "candle"}});
var stxx2=new CIQ.ChartEngine({container:$$$(".chartContainer2"),layout:{crosshair:true,"chartType": "baseline_delta"}});
var stxx3=new CIQ.ChartEngine({container:$$$(".chartContainer3"),layout:{crosshair:true,"chartType": "mountain"}});
var stxx4=new CIQ.ChartEngine({container:$$$(".chartContainer4"),layout:{crosshair:true,"chartType": "bar"}});

stxx1.setPeriodicityV2(1,'day');
stxx2.setPeriodicityV2(1,'day');
stxx3.setPeriodicityV2(1,'day');
stxx4.setPeriodicityV2(1,'day');

CIQ.Linker=function(){
	this.links=[];
};

CIQ.Linker.prototype.setScale=function(master){
	if(!master.chart || !master.chart.xaxis || master.chart.xaxis.length===0) return;
  
	for(var i=0;i<this.links.length;i++){
		var obj=this.links[i];
		if(obj.stx===master) continue;
		var stx=obj.stx;
		if(!stx.chart.dataSegment) return;
		stx.linkerData.slave=true; // prevent the injection from getting called in the slaves
		stx.micropixels=master.micropixels; //todo calculate for different size
		stx.chart.scroll=master.chart.scroll;
		stx.setCandleWidth(master.layout.candleWidth);
		stx.draw();
		stx.linkerData.slave=false;
	}
};

CIQ.Linker.prototype.setCrossHair=function(master){
	if(!master.chart || !master.chart.xaxis || master.chart.xaxis.length===0) return;

	for(var i=0;i<this.links.length;i++){
		var obj=this.links[i];
		if(obj.stx===master) continue;
		var stx=obj.stx;
		if(!stx.chart.dataSegment) return;
		stx.linkerData.slave=true; // prevent the injection from getting called in the slaves
		if(!stx.displayInitialized) return;	// No chart displayed yet
		if(stx.openDialog!=="") return;	// Don't show crosshairs when dialog is open
		stx.mousemoveinner(master.cx+stx.left,master.cy+stx.top);
		stx.linkerData.slave=false;
	}
};

CIQ.Linker.prototype.setCrossHairInjection=function(obj){
	var self=this;
	return obj.stx.append("mousemove", function(){
		if(this.linkerData.slave)...