ProblemSyncGraph4Figures

by guguilharaujo

HTML

<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
		<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
		<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
     
     <div> <input type="file" id="file" onchange="init()"></div>
			<div  class="a" id="chartContainer1" style="width: 48%; height: 450px; display: inline-block"></div>
			<div  class="a" id="chartContainer2" style="width: 48%; height: 450px; display: inline-block"></div></br>
			<div  class="a" id="chartContainer3" style="width: 48%; height: 450px; display: inline-block"></div>
			<div  class="a" id="chartContainer4" style="width: 48%; height: 450px; display: inline-block"></div>

JavaScript

listaAcoes = [];

function init(){
	listaSimplesAcoes = new SinglyLinkedList();
	//alert (listaSimplesAcoes.isEmpty() + " - Linha 5");

	var chart1 = new CanvasJS.Chart("chartContainer1",{
		theme: "theme3",
		animationEnabled: true,
		zoomEnabled: true,
		interactivityEnabled: true,
		dataPointMinWidth: 1,
		//width: 1000,
		title:{
			text: "",
			fontSize: 15,
			fontFamily: "arial",
			fontWeight: "bold"
			//padding: 10
		},
		axisX: {
			interval: 10,
			labelFontSize: 13,
			intervalType: "day",
			gridColor: "lightblue" ,
			gridThickness: .5,
			labelAngle: 270,
			valueFormatString: "DD-MM-YY" ,
			//viewportMinimum: 02/05/2019,
			//viewportMaximum: 01/29/2020,
			crosshair:{
				enabled: true,
				lineDashType: "dash",
				lineThickness: 1,
				labelFontSize: 10,
			}
		},
		axisY: {
			includeZero:false,
			labelFontSize: 12,
			margin: 10,
			//maximum: 3000000,
			crosshair: {
				enabled: true, //disable here
				lineDashType: "dash",
				lineThickness: 1,
				labelFontSize: 9,
				valueFormatString: "###.0"
			}
		},
		axisY2: {
			includeZero:true,
			labelFontSize: 12,
			margin: 10,
			//maximum: 5000000000,
			crosshair: {
				enabled: true, //disable here
				lineDashType: "dash",
				lineThickness: 1,
				labelFontSize: 9,
				valueFormatString: "###.0"
			}
		},
		toolTip: {
			shared: true
		},
		dataPointWidth: 2,
		data:
		[
			{
				type: "candlestick",
				fillOpacity: .7,
				name: "Candle",
				//toolTipContent: "R$: {y} ",
				//xValueFormatString: "DD-MM-YY",
				dataPoints: []
			},
			{
				type: "line",
				fillOpacity: .1,
				name: "MME20 Fec",
				dataPoints: []
			},
			{
				type: "line",
				color: "blue",
				fillOpacity: .9,
				name: "MME20 Vol",
				axisYType: "secondary",
				dataPoints: []
			},
			{
				type: "column",
				color: "darkorange",
				fillOpacity: .7,
				name: "Vol",
				axisYType: "secondary",
				dataPoints: []
			},
			{
				type: "line",
				color: "black",
				fillOpacity: .9,
				name: "MME200...