Canvas.JS plotting 2 graph (sap hana)

sap.ui.jsview("easybike.bikes", {

	/** Specifies the Controller belonging to this View. 
	* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
	* @memberOf easybike.bikes
	*/ 
	getControllerName : function() {
		return "easybike.bikes";
	},

	/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
	* Since the Controller is given to this method, its event handlers can be attached right away. 
	* @memberOf easybike.bikes
	*/ 
	createContent : function(oController) {
		
		var oTable = new sap.ui.table.Table("bikesTableId", {
			visibleRowCount: 5,
			editable: false
		});
				
		var oText = new sap.ui.commons.TextView({ text: "{bikes>bike_id}" })
		oTable.addColumn(new sap.ui.table.Column ({
			label: new sap.ui.commons.Label({ text: "Bike Id" }),
			visible: true,
			template: oText
		}));
		
		var oText = new sap.ui.commons.TextView({ text: "{bikes>number_of_bikes}" })
		oTable.addColumn(new sap.ui.table.Column ({
			label: new sap.ui.commons.Label({ text: "Number of Bikes" }),
			visible: true,
			template: oText
		}));
		oTable.bindRows("bikes>/");
		
		var oMatrix = new sap.ui.commons.layout.MatrixLayout("bikesMatrixLayoutId", {
			layoutFixed: true,
			width: '100%',
			height: '100%',
			columns: 1
		});
		
		oTable.attachRowSelectionChange(function(oEvent) {
        	
			var currentRowContext = oEvent.getParameter("rowContext");  //Stores your Row Context in the variable
			var cellId = oModelBikes.getProperty("bike_id", currentRowContext);
			var cellNumberOfBikes = oModelBikes.getProperty("number_of_bikes", currentRowContext);
        	
			var cellData = cellId + " . " + cellNumberOfBikes;
			// console.log(cellData);
        	
			oMatrix.destroyRows();
        	makeNewView(cellId)
		});
		
		function makeNewView(cellId) {
			var type = "";
			
			var oJsonData = sap.ui.getCore().getModel("bikes").getData();
			var data = {};
			for(i = 0; i < oJsonData.length; i++) {
				if(oJsonData[i].bike_id == cellId) {
					data = oJsonData[i];
					break;
				}
			}
			var bikeId = data.bike_id;
			
			var oCellButton = new sap.ui.commons.layout.MatrixLayoutCell({
				
			});
			var oMatrixButtonLayout = new sap.ui.commons.layout.MatrixLayout("bikesMatrixLayoutButtonId", {
				layoutFixed: true,
				width: '100%',
				height: '5px'
			});
			oMatrixButtonLayout.createRow(
					new sap.ui.commons.Button({
						text: "Daily",
						width: '100px',
						press: function() {
							loadGraph("daily");
						}
					}),
					new sap.ui.commons.Button({
						text: "Monthly",
						width: '100px',
						press: function() {
							loadGraph("month");
						}
					})
			);
			oCellButton.addContent(oMatrixButtonLayout);
			
			//////////////////////////////////////////////////////////////////////////////////////////
			///// For showing the Graph ////
			
			var oCell2 = new sap.ui.commons.layout.MatrixLayoutCell("bikesGraphCellId", {
				colSpan: 1
			});
			var oHTML = new sap.ui.core.HTML("myContentBikesId",{
	        	content : "<div id='chartContainer'" +
	        			  	"style='width: 100%; height: 300px;'>" +
	        			  "</div>"
			});
			var oPanel = new sap.ui.commons.Panel('PanelS2BikesId',{text:'Graph'});
			
			// load something for the default view
			if(type == "") {
				type = "month";
				
				var bike_id = String(cellId);
				var query = "type=" + type + "&" + "bike_id=" + bike_id;
				console.log(query);
				var queryData = (function () {
				    var json = null;
				    $.ajax({
				        'async': false,
				        'global': false,
				        'url': "https://h03-d00.ucc.ovgu.de/gbi-student-017/bike/easybike/WebContent/service/getBikeDataDbConnection.xsjs?" + query,
				        'dataType': "json",
				        'success': function (data) {
				            json = data;
				        }
				    });
				    return json.results;
				})();
				
				// console.log(queryData);
				
				var title;
				
				var data1 = [];
				var dataPoints1 = {};
				
				var data2 = [];
				var dataPoint2 = {};

				title = "Aggregations against the Month";
				for(i = 0; i < queryData.length; i++) {
					var oDate = queryData[i].date.split("-");
					var dateTime = new Date(oDate[0], oDate[1], oDate[2]);
					dateTime.setDate(dateTime.getDate());
					
					dataPoints1 = {
						x: dateTime,
						y: Number(queryData[i].total_trips)
					};
					data1.push(dataPoints1);
					
					dataPoints2 = {
							x: dateTime,
							y: Number(queryData[i].trip_duration)
					};
					data2.push(dataPoints2);
				}
				
				console.log(data1);
				console.log(data2);
									        
		        oHTML.addEventDelegate({
					onAfterRendering: function(){
						var chart = new CanvasJS.Chart("chartContainer", {
							animationEnabled: true,
							title:{
								text: title 
							},
							axisX :{
								labelAngle: -30,
								title: "Date Time"
							},
							axisY : [{
								lineColor: "#4F81BC",
						        tickColor: "#4F81BC",
						        labelFontColor: "#4F81BC",
						        titleFontColor: "#4F81BC",
						        lineThickness: 2,
							},
							{
								lineColor: "#C0504E",
					            tickColor: "#C0504E",
					            labelFontColor: "#C0504E",
					            titleFontColor: "#C0504E",
					            lineThickness: 2,
							}],
							legend: {
								horizontalAlign: "right",
								verticalAlign: "center"        
							},
							data: [
							{
								type: "spline",
								showInLegend: true,
								dataPoints: data1
							},
							{
								type: "spline",
					            axisYIndex: 1,
								showInLegend: true,            
								dataPoints: data2
							}
							]
						});
						chart.render();
					}
				}, this);
			}
									
			function loadGraph(param) {
				var type = param;
				
				// Just put a check
				if (type == "") {
					type = "month";
				}
				
				var bike_id = String(cellId);
				var query = "type=" + type + "&" + "bike_id=" + bike_id;
				console.log(query);
				var queryData = (function () {
				    var json = null;
				    $.ajax({
				        'async': false,
				        'global': false,
				        'url': "https://h03-d00.ucc.ovgu.de/gbi-student-017/bike/easybike/WebContent/service/getBikeDataDbConnection.xsjs?" + query,
				        'dataType': "json",
				        'success': function (data) {
				            json = data;
				        }
				    });
				    return json.results;
				})();
				
				// console.log(queryData);
				
				var title;
				var data = [];
				var dataSeries = { type: "spline" };
				var dataPoints = [];
					
				if(type == "month") {
					title = "Aggregations against the Month";
					for(i = 0; i < queryData.length; i++) {
						var oDate = queryData[i].date.split("-");
						var dateTime = new Date(oDate[0], oDate[1], oDate[2]);
						
						dateTime.setDate(dateTime.getDate());
						dataPoints.push({         
							x: dateTime,
							y: Number(queryData[i].total_trips)
						});
					}
				} else if(type == "daily") {
					title = "Aggregations against the Hour (24 hour Format)";
					for(i = 0; i < queryData.length; i++) {
						var oDate = queryData[i].date.split("-");
						var dateTime = new Date(oDate[0], oDate[1], oDate[2]);
						
						dateTime.setDate(dateTime.getDate());
						dataPoints.push({         
							x: dateTime,
							y: Number(queryData[i].total_trips)
						});
					}
				} 
				dataSeries.dataPoints = dataPoints;
				data.push(dataSeries);
				
				console.log(data);
					        
		        oHTML.addEventDelegate({
					onAfterRendering: function(){
						var chart = new CanvasJS.Chart("chartContainer", {
							title:{
								text: title 
							},
							axisX :{
								labelAngle: -30,
								title: "Date Time"
							},
							axisY :{
								includeZero: false,
								title: "Total Trips"
							},
							legend: {
								horizontalAlign: "right",
								verticalAlign: "center"        
							},
							data: data,
						});
						chart.render();
					}
				}, this);
		        oPanel.addContent(oHTML);
			}
			oPanel.addContent(oHTML);
			oCell2.addContent(oPanel);
			
			//////////////////////////////////////////////////////////////////////////////////////////

			oMatrix.createRow(oCellButton);
			oMatrix.createRow(oCell2);
		}
		
		var ele = [oTable, oMatrix];
		
		return ele;
	}

});