BIM-Monitor/script/js/main.js

var errorTable;
var lastNode;
var jqxhr = $.getJSON("assets/errorTable.json", function(json) {
    errorTable = json;
});
var errorArray = [];
var switchNumber = 0;
passString('OW');
var wellTBA = [];
var wellNameLists = [];
var isAll = true;
var isCompare = false;
var saveCheckCompare = "";

//Pass monitor equipment's name to index.php select form
function passString(option) {
    window.localStorage.setItem("option", option);
}

function GetWellName(wellName) {
    showWell(wellName, true);

}

function submitForm() {
    document.getElementById("CSVform").submit();
}

function GetWellNameList(wellNameList) {
    window.localStorage.setItem("wellNameList", wellNameList);

}
//display well name and send its name to showWell function
function displayWellInfo2() {
    $.ajax({
        url: './script/php/getWellName.php',
        complete: function(response) {
            console.log("Get well name: ");
            console.log(response);
            if (response.responseText != "") {
                showWell(response.responseText, false);
                
            }
        },
        error: function() {

        }
    });
}
var sparklinePieData = [];

function getCheckValue() {
    var dataArray = [];
    var phase = document.getElementById("phase").value;
    var option = window.localStorage.getItem("option");
    for (i = 0; i < errorTable.length; i++) {
        if (errorTable[i].table_name == option) {
            var method = errorTable[i].method;
            var table_name = errorTable[i].table_name + "data";
            var warning1 = errorTable[i].warning1;
            var warning2 = errorTable[i].warning2;
            var warning_Count = errorTable[i].warning_Count;
        }
    }

    $.ajax({
            url: "./script/php/checkValue2.php",
            data: {
                method: method,
                table_name: table_name,
                warning1: warning1,
                warning2: warning2,
                warning_Count: warning_Count,
                phase: phase
            },
            async: false,
            contentType: "application/json",
            dataType: "json"
        })

        .success(function(response) {
            dataArray = response['wellTBA'];
            for (var i = 0; i < dataArray.length; i++) {
                dataArray[i] = dataArray[i].replace('_', '-');
            }
            var normal_count = response['normal_count'];
            var abnormal_count = response['abnormal_count'];            
            sparklinePieData = [normal_count, abnormal_count];
            var all = normal_count + abnormal_count;
            var percent = abnormal_count / all;
            var url = "assets/javascripts/ui-elements/pie.charts.js";
            var script = document.createElement('script');
            script.setAttribute('type', 'text/javascript');
            script.setAttribute('src', url);
            document.getElementsByTagName('head')[0].appendChild(script);
            document.getElementById("percent").innerHTML = Math.round(percent * 100) + "%";


        })
        .error(function() {
            //alert("錯誤統計未正常獲取");
        })
        .complete(function() {});
    return dataArray;
}

function GetCheckAllAJAXValue() {

    errorArray = [];
    var phase = document.getElementById("phase").value;
    for (i = 0; i < errorTable.length; i++) {

        var method = errorTable[i].method;
        var option = errorTable[i].table_name;
        var table_name = errorTable[i].table_name + "data";
        var warning1 = errorTable[i].warning1;
        var warning2 = errorTable[i].warning2;
        var warning_Count = errorTable[i].warning_Count;
			$.ajax({
                url: "./script/php/checkValue2.php",
                data: {
                    method: method,
                    table_name: table_name,
                    warning1: warning1,
                    warning2: warning2,
                    warning_Count: warning_Count,
                    phase: phase
                },
                async: false,
                contentType: "application/json",
                dataType: "json"
            })

            .success(function(response) {

                var normal_count = response['normal_count'];
                var abnormal_count = response['abnormal_count'];
                var all_count = 0 + normal_count + abnormal_count;

				
                document.getElementById(option).innerHTML = "(<font color='#FF0000'>" + abnormal_count + "</font>/" + all_count + ")";
                errorArray.push(abnormal_count);				
            })
            .error(function() {
                alert("錯誤統計未正常獲取");
            })
            .complete(function() {});
    }
}

function CheckCompare(){
    var option = window.localStorage.getItem("option");
    var text = "";
    if(option == "ELP" || option == "OW"){
        if(option == "ELP"){
            text = "水壓計";
        }else if(option == "OW"){
            text = "水位觀測井";
        }
        var checkBox = document.getElementById("compareCheck");
        if (checkBox.checked == true){		
            document.getElementById("tableName").innerHTML = option + text + '總表';		
            isCompare = true;
        } else {
            document.getElementById("tableName").innerHTML = saveCheckCompare;
            isCompare = false;
        }
        if(option == "ELP")
            displayChart("ELP-1","myChart");
        else if(option == "OW")
            displayChart("OW-1","myChart");
    }
	
	
}

function CheckError(){
	var checkBox = document.getElementById("errorCheck");
	if (checkBox.checked == true){
		isAll = false;		
	} else {
		isAll = true;
	}
	SetList();	
}

function uploadCSV() {

    var input = $("#fileToUpload");
    var inputLength = input[0].files.length; //No of files selected
    var file;
    var formData = new FormData();

    for (var i = 0; i < inputLength; i++) {
        file = input[0].files[i];
        formData.append('fileToUpload[]', file);
    }
    $.ajax({
        url: "./script/php/upload.php",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        beforeSend: function() {

        }
    }).done(function(data) {
        console.log(data);
        var stack_bar_top = {
            "dir1": "down",
            "dir2": "right",
            "push": "top",
            "spacing1": 0,
            "spacing2": 0
        };

        if (data.includes("IS")) {
            var notice = new PNotify({
                title: '通知',
                text: '上傳成功!',
                type: 'success',
                addclass: 'stack-bar-top',
                stack: stack_bar_top,
                width: "100%"
            });
        } else {
            var notice = new PNotify({
                title: '通知',
                text: '上傳失敗!',
                type: 'error',
                addclass: 'stack-bar-top',
                stack: stack_bar_top,
                width: "100%"
            });
        }
        
    }).error(function() {

    });

}
//get well info from sql server
function showWell(str, changeCamera) {
	var strLocal = "";
    var executed = false;
    var xhttp;
	isCompare = false; 
	document.getElementById("compareCheck").checked = false;	
    if (str == "") {
        document.getElementById("dataTable").innerHTML = "";
        return;
    }
	strLocal = str;
	/*if(str.includes("ELP")){
		if(str.includes("A")){
			strLocal = str + ',' + str.replace('A','-1A');
		}else{
			strLocal = str + ',' + str + '-1';
		}
	}	*/
	document.getElementById("monitorSelect2").innerHTML = strLocal;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            if (str.includes("HM") && !str.includes("HM-"))
                str = str.replace("HM", "HM-");


            document.getElementById("tableName").innerHTML = strLocal + "資料表";
			saveCheckCompare = strLocal + "資料表";
            displayChart(str, "myChart");

            reset();
            console.log("Show well: " + str);

            //SIS SID TI RS... don't have models yet, so I can't set the main camera to selected equipment yet


            if (str.includes("HM")) {
                str = str.replace("HM-", "HM");
            }
            myGameInstance.SendMessage("MainCamera", "GetDataFromWebGL", str);

            if (!changeCamera) {
                ResetCamera();
            }
            //Display data in datatable form

            document.getElementById("dataTable").innerHTML = this.responseText;
            $('#dataTable').DataTable();

        }
    };
    xhttp.open("GET", "./script/php/getData2.php?q=" + str, true);
    xhttp.send();

}

//Display chart
function displayChart(str, elementID) {
    var xhttp;
    xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            if (str.includes("ELP") || str.includes("OW") || str.includes("SM") || str.includes("SB") || str.includes("SBM") || str.includes("VG") || str.includes("HM")) {
                //Split the response text into well name array, date array and value array
                var v_variables = this.responseText.split("*");
                var c_wellName = v_variables[0];
                var c_m_date = v_variables[1].split(" ");
                var c_m_value = v_variables[2].split(" ");
                //console.log(c_m_value);
                //Start to make the chart
                if(isCompare){
                    displayCompareChart();
                }else{
                    init(c_wellName, c_m_date, c_m_value, elementID);
                }
                

            } else if (str.includes("TI")) {
                var v_variables = this.responseText.split("*");
                var c_wellName = v_variables[0];
                var c_m_date = v_variables[1].split(" ");
                var c_m_value = v_variables[2].split(" ");
                //Multiple line
                var c2_wellName = v_variables[3];
                var c2_m_date = v_variables[4].split(" ");
                var c2_m_value = v_variables[5].split(" ");
                if(isCompare){
					displayCompareChart();
				}else{
					init2(c_wellName, c_m_date, c_m_value, c2_wellName, c2_m_date, c2_m_value, elementID);
				}
				
				
            } else if (str.includes("SIS") || str.includes("SID")) {
                var v_variables = this.responseText.split("*");
                var c_m_date = v_variables[0].split(" ");
                var c_m_depth = v_variables[1].split(" ");
                var c_m_valueArray = v_variables[2].split("//");
                //Abnormal value, don't know why it happened so I brute force it
                c_m_valueArray[0] = c_m_valueArray[0].replace("0.4770.468", "0.477 0.468");
                var dateCount = c_m_date.length;
                let c_m_value = [];
                for (x = 0; x < dateCount; x++) {
                    c_m_value[x] = c_m_valueArray[x].split(" ");
                }

                initSISSID(c_m_date, c_m_depth, c_m_value, elementID, str);
            } else if (str.includes("RS")) {
                var v_variables = this.responseText.split("*");

                var c_wellName = v_variables[0];
                var c_m_date = v_variables[1].split(" ");
                var c_m_value = v_variables[2].split(" ");

                var c2_wellName = v_variables[3];
                var c2_m_date = v_variables[4].split(" ");
                var c2_m_value = v_variables[5].split(" ");

                var c3_wellName = v_variables[6];
                var c3_m_date = v_variables[7].split(" ");
                var c3_m_value = v_variables[8].split(" ");

                var c4_wellName = v_variables[9];
                var c4_m_date = v_variables[10].split(" ");
                var c4_m_value = v_variables[11].split(" ");

                var c5_wellName = v_variables[12];
                var c5_m_date = v_variables[13].split(" ");
                var c5_m_value = v_variables[14].split(" ");

                var c6_wellName = v_variables[15];
                var c6_m_date = v_variables[16].split(" ");
                var c6_m_value = v_variables[17].split(" ");

                init6(c_wellName, c_m_date, c_m_value, c2_wellName, c2_m_value, c3_wellName, c3_m_value, c4_wellName, c4_m_value, c5_wellName, c5_m_value, c6_wellName, c6_m_value, elementID);
            }
        }
    };
    xhttp.open("GET", "./script/php/getChartData2.php?q=" + str, true);
    xhttp.send();




}

function displayCompareChart() {
	console.log("displayCompareChart");
	var option = window.localStorage.getItem("option");
    var m_date = [];    	
	var label = [];
	var index = 7;
	if(option == "ELP")
		index = 14;	
	var chart_data=new Array();
	for(var i=0;i<index;i++){
		chart_data[i]=new Array(); 
		for(var j=0;j<m_date.length;j++){
			chart_data[i][j]=0;
		}
	}
		$.ajax({
            url: "./script/php/getCompareChartData.php",            
            async: false,
            contentType: "application/json",
            dataType: "json",
			data: { 
				option : option
			}
        })

        .success(function(response) {
            m_date = response['m_date'];
			chart_data = response['chart_data'];
			label = response['label'];
			initCompare(m_date,chart_data,index,label);
			console.log("getCompareChartData正常獲取");
        })
        .error(function() {
            console.log("getCompareChartData未正常獲取");
        })
        .complete(function() {});
	
}

//Reset the camera
function ResetCamera() {
    myGameInstance.SendMessage("MainCamera", "ResetCamera");
}

function switchMonitor(option) {
	isAll = true;
	isCompare = false;
    passString(option);

    
    
    document.getElementById("monitorName").innerHTML = option + "監測儀器";
    if (lastNode != null) {
        lastNode.style = "color:#abb4be;";
    }
	document.getElementById("errorCheck").checked = false;
	document.getElementById("compareCheck").checked = false;
	
    lastNode = document.getElementById(option).parentNode;
    lastNode.style = "color:#0088cc;";

    LoadPage();
}

function SetList(){
	var wellNameListsLocal	= "";
	var isError = false;
	var monitorSelect = document.getElementById("monitorSelect");
    var monitorButton = document.getElementById("monitorButton");
    while (monitorSelect.hasChildNodes()) {
        monitorSelect.removeChild(monitorSelect.firstChild);
    }

    while (monitorButton.hasChildNodes()) {
        monitorButton.removeChild(monitorButton.firstChild);
    }
	monitorButton.innerHTML = "綠色為正常|紅色為異常<br>";
    GetCheckAllAJAXValue();
    for (i = 0; i < wellNameLists.length; i++) {
		wellNameListsLocal = wellNameLists[i];
        var option = document.createElement("li");
        var createA = document.createElement("a");
		/*if(wellNameLists[i].includes("ELP")){
			if(wellNameLists[i].includes("A")){
				wellNameListsLocal = wellNameLists[i] + ',' + wellNameLists[i].replace('A','-1A');
			}else{
				wellNameListsLocal = wellNameLists[i] + ',' + wellNameLists[i] + '-1';
			}
		}	*/
        var createAText = document.createTextNode(wellNameListsLocal);
        var createButton = document.createElement("button");
        var createButtonText = document.createTextNode(wellNameListsLocal);
        createButton.setAttribute('class', "mb-xs mt-xs mr-xs modal-with-zoom-anim btn btn-success modal-dismiss");



        for (j = 0; j < wellTBA.length; j++) {
            
            if (wellNameLists[i] == (wellTBA[j])) {
                createA.style = "color:red;";
                createButton.setAttribute('class', "mb-xs mt-xs mr-xs btn btn-danger modal-dismiss");
				isError = true;
                
				//console.log(" wellNameLists:" + wellNameLists[i]);
				//console.log(" wellTBA:" + wellTBA[j]);
				
            }			
        }
        createA.setAttribute('onclick', "showWell('" + wellNameLists[i] + "',true)");
        createButton.setAttribute('onclick', "showWell('" + wellNameLists[i] + "',true)");
        createButton.setAttribute('type', "button");
		
		if(isAll || (!isAll && isError)){
			//console.log(isError);
			createA.appendChild(createAText);
			createButton.appendChild(createButtonText);
			option.appendChild(createA);
			monitorSelect.appendChild(option);
			monitorButton.appendChild(createButton);
		}
        isError = false;

    }
	
}
function UpdateGPS(GPS){
    myGameInstance.SendMessage("PlayerArmature", "UpdateGPS",GPS);
}
function LoadPage() {
    var option = window.localStorage.getItem("option");
    //Display the selected equipment

    $('#' + window.localStorage.getItem("option")).removeClass('hidden').removeAttr('disabled');
    //console.log("Choosed option: " + window.localStorage.getItem("option"));
	
	document.getElementById("monitorSelect2").innerHTML = "選擇觀測儀器";
	
	if(option == "ELP" || option == "OW")
		document.getElementById("displayCompareChart").style.display = 'block';
	else
		document.getElementById("displayCompareChart").style.display = 'none';
	
    if (option == "HM" || option == "SIS" || option == "RS" || option == "VG" || option == "SID") {
        myGameInstance.SendMessage("Monitor", "ChangeTransparent");
        myGameInstance.SendMessage("Monitor", "RemoveModel", "true");
    } else {
        myGameInstance.SendMessage("Monitor", "ChangeWhite");
        myGameInstance.SendMessage("Monitor", "RemoveModel", "false");
    }

    if(option != "ELP" && option != "SIS" && option != "SID"){
        document.getElementById("phase").style.display = "none";
    }else{
        document.getElementById("phase").style.display = "block";
    }

    var wellTBALocal = getCheckValue();
    var dataValue = option;
    for (i = 0; i < wellTBALocal.length; i++) {
        dataValue = dataValue.concat(',', wellTBALocal[i]);

    }

    myGameInstance.SendMessage("Monitor", "AddDataTable", dataValue);
    myGameInstance.SendMessage("Monitor", "Initialization");
    var wellNameList = window.localStorage.getItem("wellNameList");
    var wellNameListsLocal = wellNameList.split(",");
    var order = new Array(wellNameListsLocal.length);
    for (i = 0; i < wellNameListsLocal.length; i++) {
        order[i] = wellNameListsLocal[i].match(/\d+/g);
    }
    for (i = 0; i < order.length; i++) {
        for (j = 0; j < order.length; j++) {
            if (order[j] > order[j + 1]) {
                let temp = order[j];
                order[j] = order[j + 1];
                order[j + 1] = temp;
                let temp2 = wellNameListsLocal[j];
                wellNameListsLocal[j] = wellNameListsLocal[j + 1];
                wellNameListsLocal[j + 1] = temp2;
            }
        }
    }
	wellNameLists = wellNameListsLocal;
	wellTBA = wellTBALocal;

    SetList();
    
    ResetCamera();
    showWell(wellNameLists[0], false);
}


function forLoopSMOption() {
    var elm = document.getElementById('SM'), // get the select
        df = document.createDocumentFragment(); // create a document fragment to hold the options while we create them

    for (var i = 1; i <= 81; i++) { // loop, i like 42.
        var option = document.createElement('option'); // create the option element
        option.value = "SM-" + i; // set the value property
        option.appendChild(document.createTextNode("SM-" + i)); // set the textContent in a safe way.
        df.appendChild(option); // append the option to the document fragment
    }
    elm.appendChild(df); // append the document fragment to the DOM. this is the better way rather than setting innerHTML a bunch of times (or even once with a long string)
}

function forLoopHMOption() {
    var elm = document.getElementById('HM'),
        df = document.createDocumentFragment();

    for (var i = 1; i <= 15; i++) {
        var option = document.createElement('option');
        option.value = "HM-1-" + i;
        option.appendChild(document.createTextNode("HM1-" + i));
        df.appendChild(option);
    }
    for (var j = 1; j <= 7; j++) {
        var option = document.createElement('option');
        option.value = "HM-2-" + j;
        option.appendChild(document.createTextNode("HM2-" + j));
        df.appendChild(option);
    }
    for (var k = 1; k <= 11; k++) {
        var option = document.createElement('option');
        option.value = "HM-3-" + k;
        option.appendChild(document.createTextNode("HM3-" + k));
        df.appendChild(option);
    }
    for (var l = 1; l <= 7; l++) {
        var option = document.createElement('option');
        option.value = "HM-4-" + l;
        option.appendChild(document.createTextNode("HM4-" + l));
        df.appendChild(option);
    }
    elm.appendChild(df);
}
var errorChart = null;



//Start making the chart
function init(c_wellName, c_m_date, c_m_value, elementID) {

    var ctx = document.getElementById(elementID).getContext("2d");
	var phase = document.getElementById("phase").value;
    var ELPwarning = [0, -4.6, -10, -15.3, -23.2, 0];
    var ELP_1warning = [0, -7.9, -13.3, 0, 0, 0];
	
    //Warning value
    let warning = [];
    var OWFirstData = {"OW-1": -1.81, "OW-2": -1.59, "OW-3": -6.3, "OW-4": -3.67, "OW-5": -3.16, "OW-6": -1.78, "OW-7": -3.31};
    var OWwarning1 = 0;
    var OWwarning2 = 0;

    var yLabel = "";
    var xLabel = "";

    if (c_wellName.includes("ELP")) {
		if(c_wellName != "ELP-1" && c_wellName.includes("-1")){
			if(ELP_1warning[phase-2] != 0){
				for (i = 0; i < c_m_date.length; i++) {
					warning.push(ELP_1warning[phase-2]);
				}
			}
		}else{
			if(ELPwarning[phase-2] != 0){
				for (i = 0; i < c_m_date.length; i++) {
					warning.push(ELPwarning[phase-2]);
				}
			}			
		}
        

        yLabel = "水位高程GL(m)";
        xLabel = "日期";

    } else if (c_wellName.includes("OW")) {

        for(const [key, value] of Object.entries(OWFirstData)){
            if(c_wellName == key){
                OWwarning1 = value + 2;
                OWwarning2 = value - 2;
            }
        }

        for (i = 0; i < c_m_date.length; i++) {
            warning.push(OWwarning1);
        }

        yLabel = "水位高程GL(m)";
        xLabel = "日期";

    } else if (c_wellName.includes("SM")) {
        for (i = 0; i < c_m_date.length; i++) {
            warning.push(45);
        }

        yLabel = "沉陷量(mm)";
        xLabel = "日期";

    } else if (c_wellName.includes("SBM")) {
        for (i = 0; i < c_m_date.length; i++) {
            warning.push(9.5);
        }

        yLabel = "沉陷量(mm)";
        xLabel = "日期";

    } else if (c_wellName.includes("SB")) {
        for (i = 0; i < c_m_date.length; i++) {
            warning.push(0.0008);
        }

        yLabel = "沉陷量(mm)";
        xLabel = "日期";

    } else if (c_wellName.includes("VG")) {
        for (i = 0; i < c_m_date.length; i++) {
            warning.push(110);
        }

        yLabel = "應力值(t)";
        xLabel = "日期";

    } else if (c_wellName.includes("HM")) {
        for (i = 0; i < c_m_date.length; i++) {
            warning.push(25);
        }

        yLabel = "沉陷量(mm)";
        xLabel = "日期";

    }

    for (j = 0; j < c_m_value.length; j++) {
        if (c_m_value[j] == "") {
            c_m_value[j] = null;
            //console.log(c_m_value[j]);
        }
    }

    //Destroy chart if it already exists. If not, there'll be multiple charts stack together
    if (window.chart != undefined) {
        window.chart.destroy();
    }

    window.chart = new Chart(ctx, {
        //Line chart
        type: 'line',
        data: {
            //X-axis displays the date
            labels: c_m_date,
            datasets: [{
                    //Label above the chart to illustrate which color has which purpose
                    label: c_wellName,
                    //Data value
                    data: c_m_value,
                    //Detemine line's color
                    borderColor: '#3e95cd'
                },
                {
                    label: "警戒值",
                    data: warning,
                    borderColor: "#FF0000",
					pointRadius: 0
                }
            ]
        },
        options: {
            spanGaps: true,
            maintainAspectRatio: false,
            responsive: true,
			scales: {
				y: {
					title: {
						display: true,
						text: yLabel
					}
				},
                x: {
                    title: {
						display: true,
						text: xLabel
					}
                }
			} 
        }
    });

    if (c_wellName.includes("SBM")) {

        let warning2 = [];

        for (i = 0; i < c_m_date.length; i++) {
            warning2.push(-9.5);
        }

        window.chart.data.datasets.push({
            label: "警戒值2",
            data: warning2,
            borderColor: "#FF0000",
			pointRadius: 0
			
        });

        window.chart.update();
    } else if (c_wellName.includes("SB")) {

        let warning2 = [];

        for (i = 0; i < c_m_date.length; i++) {
            warning2.push(-0.0008);
        }

        window.chart.data.datasets.push({
            label: "警戒值2",
            data: warning2,
            borderColor: "#FF0000",
			pointRadius: 0
        });

        window.chart.update();
    } else if (c_wellName.includes("OW")) {

        let warning2 = [];

        for (i = 0; i < c_m_date.length; i++) {
            warning2.push(OWwarning2);
        }

        window.chart.data.datasets.push({
            label: "警戒值2",
            data: warning2,
            borderColor: "#FF0000",
			pointRadius: 0
        });

        window.chart.update();
    }

}


function init2(c_wellName, c_m_date, c_m_value, c2_wellName, c2_m_date, c2_m_value, elementID) {

    var ctx = document.getElementById(elementID).getContext("2d");
    var yLabel = "";
    var xLabel = "";
    

    let warning = [];
    if (c_wellName.includes("TI")) {

        for (i = 0; i < c2_m_date.length; i++) {
            warning.push(0.00106);
        }

        yLabel = "徑度量(δ/ L)";
        xLabel = "日期";

    }

    for (j = 0; j < c_m_value.length; j++) {
        if (c_m_value[j] == "") {
            c_m_value[j] = null;
            //console.log(c_m_value[j]);
        }
    }

    if (window.chart != undefined) {
        window.chart.destroy();
    }
	c_m_value.forEach(function(item, index, array) {
		//console.log(item, index);
	});
    window.chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: c_m_date,
            datasets: [{
                    label: c_wellName,
                    data: c_m_value,
                    borderColor: '#3e95cd'
                },
                {
                    label: c2_wellName,
                    data: c2_m_value,
                    borderColor: '#63fff5'
                }
            ]
        },
        options: {
            responsive: true,
			maintainAspectRatio: false,
			scales: {
				y: {
					title: {
						display: true,
						text: yLabel
					}
				},
                x: {
                    title: {
						display: true,
						text: xLabel
					}
                }
			} 
        }
    });

    /*if(c_wellName.includes("ELP") && phase != 2 && phase != 7){

        window.chart.data.datasets.push({
            label: "警戒值",
            data: warning,
            borderColor: "#FF0000",
			pointRadius: 0
        });

        if(phase == 3 || phase == 4){
            let warning2 = [];

            for (i = 0; i < c2_m_date.length; i++) {
                warning2.push(ELP_1warning[phase-2]);
            }

            window.chart.data.datasets.push({
                label: "警戒值2",
                data: warning2,
                borderColor: "#FF0000",
                pointRadius: 0
            });
        }

        window.chart.update();
    }*/

    //ELP does not have second warning line, so you need to update it seperately
    if (c_wellName.includes("TI")) {

        let warning2 = [];

        for (i = 0; i < c2_m_date.length; i++) {
            warning2.push(-0.00106);
        }

        window.chart.data.datasets.push({
            label: "警戒值2",
            data: warning2,
            borderColor: "#FF0000",
			pointRadius: 0
        });

        window.chart.update();
    }

}


//SIS SID's lines are vertical
function initSISSID(c_m_date, c_m_depth, c_m_value, elementID, str) {
    
    var ctx = document.getElementById(elementID).getContext("2d");
    var datasetValue = [];
    let warning = [];
    var phase = document.getElementById("phase").value;
    var SID_data = [];
    var SIS_data = [];
    var SIS_array = ['SIS-1','SIS-2-1','SIS-2-2','SIS-3','SIS-4','SIS-6','SIS-7'];
	var SID_array = ['SID-1','SID-2-1','SID-2-2','SID-3-1','SID-3-2','SID-4','SID-5-1','SID-5-2','SID-6','SID-7'];
    var index = 0;
    var num = 0;

    if(phase == 2){
        SID_data = [1.85, 1.128, 1.128, 1.128, 1.698, 1.698, 1.698, 1.186, 1.186, 1.032];
        SIS_data = [1.85, 1.128, 1.128, 1.128, 1.698, 1.186, 1.032];
    }else if(phase == 3){
        SID_data = [2.39, 1.434, 1.434, 1.434, 2.304, 2.304, 2.304, 1.7, 1.7, 1.569];
        SIS_data = [2.39, 1.434, 1.434, 1.434, 2.304, 1.7, 1.569];
    }else if(phase == 4){
        SID_data = [2.89, 1.856, 1.856, 1.856, 2.968, 2.968, 2.968, 2.267, 2.267, 2.176];
        SIS_data = [2.89, 1.856, 1.856, 1.856, 2.968, 2.267, 2.176];
    }else if(phase == 5){
        SID_data = [3.36, 2.626, 2.626, 2.626, 4.531, 4.531, 4.531, 3.727, 3.727, 3.285];
        SIS_data = [3.36, 2.626, 2.626, 2.626, 4.531, 3.727, 3.285];
    }else if(phase == 6){
        SID_data = [4.015, 3.832, 3.832, 3.832, 7.966, 7.966, 7.966, 5.049, 5.049, 5.208];
        SIS_data = [4.015, 3.832, 3.832, 3.832, 7.966, 5.049, 5.208];
    }else if(phase == 7){
        SID_data = [4.918, 4.458, 4.458, 4.458, 8.909, 8.909, 8.909, 5.797, 5.797, 5.988];
        SIS_data = [4.918, 4.458, 4.458, 4.458, 8.909, 5.797, 5.988];
    }

    if(str.includes("SIS")){
        index = SIS_array.indexOf(str);
        num = SIS_data[index];
    }else if(str.includes("SID")){
        index = SID_array.indexOf(str);
        num = SID_data[index];
    }

    for (i = 0; i < c_m_value[0].length; i++) {
        warning.push(num);
    }

    yLabel = "觀測深度GL(m)";
    xLabel = "變位量(cm)";

    for (j = 0; j < c_m_value.length; j++) {
        if (c_m_value[j] == "") {
            c_m_value[j] = null;
            //console.log(c_m_value[j]);
        }
    }

    if (window.chart != undefined) {
        window.chart.destroy();
    }

    for (j = 0; j <= c_m_date.length; j++) {
        if (j == c_m_date.length) {
            datasetValue[j] = {
                axis: 'y',
                fill: false,
                label: "警戒值",
                data: warning,
                borderColor: "#FF0000",
				pointRadius: 0
            }
        } else {
            datasetValue[j] = {
                axis: 'y',
                label: c_m_date[j],
                data: c_m_value[j],
                borderColor: randomColor()
            }
        }

    }

    window.chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: c_m_depth,
            datasets: datasetValue
        },
        options: {
            //Turns line to vertical
            maintainAspectRatio: false,
            responsive: true,
            indexAxis: 'y',
            scales: {
                y: {
					title: {
						display: true,
						text: yLabel
					}
				},
                x: {
                    beginAtZero: true,
                    title: {
						display: true,
						text: xLabel
					}
                }
            }
        }
    });

}

function init6(c_wellName, c_m_date, c_m_value, c2_wellName, c2_m_value, c3_wellName, c3_m_value, c4_wellName, c4_m_value, c5_wellName, c5_m_value, c6_wellName, c6_m_value, elementID) {
    var ctx = document.getElementById(elementID).getContext("2d");

    let warning = [];
    if (c_wellName.includes("RS")) {
        for (i = 0; i < c_m_date.length; i++) {
            warning.push(2000);
        }

        yLabel = "應力值(kg/cm²)";
        xLabel = "日期";

    }

    if (window.chart != undefined) {
        window.chart.destroy();
    }

    window.chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: c_m_date,
            datasets: [{
                    label: c_wellName,
                    data: c_m_value,
                    borderColor: randomColor()
                },
                {
                    label: c2_wellName,
                    data: c2_m_value,
                    borderColor: randomColor()
                },
                {
                    label: c3_wellName,
                    data: c3_m_value,
                    borderColor: randomColor()
                },
                {
                    label: c4_wellName,
                    data: c4_m_value,
                    borderColor: randomColor()
                },
                {
                    label: c5_wellName,
                    data: c5_m_value,
                    borderColor: randomColor()
                },
                {
                    label: c6_wellName,
                    data: c6_m_value,
                    borderColor: randomColor()
                },
                {
                    label: "警戒值",
                    data: warning,
                    borderColor: "#FF0000",
					pointRadius: 0
                }
            ]
        },
        options: {
            responsive: true,
			maintainAspectRatio: false,
			scales: {
				y: {
					title: {
						display: true,
						text: yLabel
					}
				},
                x: {
                    title: {
						display: true,
						text: xLabel
					}
                }
			} 
        }
    });

    //ELP does not have second warning line, so you need to update it seperately
    if (c_wellName.includes("RS")) {

        let warning2 = [];

        for (i = 0; i < c_m_date.length; i++) {
            warning2.push(-2000);
        }

        window.chart.data.datasets.push({
            label: "警戒值2",
            data: warning2,
            borderColor: "#FF0000",
			pointRadius: 0
        });

        window.chart.update();
    }
}

function initCompare(m_date, chart_data,index,label) {
    var ctx = document.getElementById("myChart").getContext("2d");
	var value = -7.9;
    let warning = [];
    var phase = document.getElementById("phase").value;


    yLabel = "水位高程GL(m)";
    xLabel = "日期";	
		
	for (i = 0; i < m_date.length; i++) {
        warning.push(value);
    }

    if (window.chart != undefined) {
        window.chart.destroy();
    }		
    window.chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: m_date
        },
        options: {
            responsive: true,
			maintainAspectRatio: false,
			scales: {
				y: {
					title: {
						display: true,
						text: yLabel
					}
				},
                x: {
                    title: {
						display: true,
						text: xLabel
					}
                }
			} 
        }
    });

	for(i = 1; i < index+1; i++){
		window.chart.data.datasets.push({
            label: label[i].replaceAll("_","-"),
            data: chart_data[i],
            borderColor: randomColorBlue()
        });
	}
/*
	if(label[1].includes("ELP") && phase != 2 && phase != 7){
		window.chart.data.datasets.push({
            label: "警戒值",
            data: warning,
            borderColor: "#FF0000",
			pointRadius: 0
        });		
	}
*/
    window.chart.update();

}

//Chart has multiple lines that need different color
function randomColor() {	
    return "#" + ((1 << 24) * Math.random() | 0).toString(16);
}
function randomColorBlue() {
	var mid = Math.floor(Math.random() * 255);
    return "#30" +mid.toString(16) + "ff";
}

//Need to display multiple epuiment's data table and can't find the function to reset it. So I kill all the nodes.
function reset() {
    const myNode = document.getElementById("testssss");
    while (myNode.firstChild) {
        myNode.removeChild(myNode.lastChild);
    }
    var table = document.createElement("table");
    table.id = "dataTable";
    table.className = "display";
    //table.style.width = "100%";
    myNode.appendChild(table);
}