BIM-Monitor/script/js/r03.js

var unityName = "R03Monitor";
var errorTable;
var sites = {};
var display_info = {};

$.ajaxSettings.async = false;
var jqxhr = $.getJSON("/BIM-Monitor/assets/errorTable.json", function (json) {
    errorTable = json;
});
var C3Json = $.getJSON("/BIM-Monitor/assets/json/c3-monitorList.json", function (json) {
    sites["c3"] = json;
});
var R03Json = $.getJSON("/BIM-Monitor/assets/json/r03-monitorList.json", function (json) {
    sites["r03"] = json;
});
$.ajaxSettings.async = true;

var lastNode;
var errorArray = [];
var switchNumber = 0;
passString('SIS');
var wellTBA = [];
var wellNameLists = [];
var isAll = true;
//var isCompare = false;
//var saveCheckCompare = "";
var dataTable;
var sparklinePieData = [];

$(document).ready(function () {

    GetCheckAllAJAXValue();
    LoadPage();
    $("#menu > ul > li.nav-parent.nav-active.nav-expanded > ul > li.nav-parent.nav-active.nav-expanded > ul > li:nth-child(1) > a").css("color", "#0088cc");
    $(".monitor").on('click', function () {
        $('.monitor').css('color', '#abb4be')
        let site = $(this).parent().parent().parent().attr("monitor");
        $(this).css("color", "#0088cc");
        if (site != 'r03') {
            location.href = `../${site}/Index.php`;
        } else {
            let option = $(this).attr("monitor");
            isAll = true;
            //isCompare = false;
            passString(option);
            document.getElementById("monitorName").innerHTML = option + "監測儀器";
            LoadPage();
        }
    });

})

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

//unity選擇到一個監測儀器後，在selectWell.cs會給一個監測儀器名稱(例：OW-1)給網頁
function GetWellName(wellName) {
    showWell(wellName, true);
}

//網頁用SendMessage()傳Initialization()給unity時，unity會回傳一個所有監測儀器名稱(例：OW-1,OW-2 ...)給網頁
function GetWellNameList(wellNameList) {
    window.localStorage.setItem("wellNameList", wellNameList);
}

//display well name and send its name to showWell function
function getEquipmentName(equipment) {
    $.ajaxSettings.async = false;
    $.ajax({
        url: '/BIM-Monitor/script/php/getEquipmentName.php',
        type: "GET",
        data: {
            equipment: equipment,
        }
    }).success(function (data) {
        GetWellNameList(data);
    }).error(function (error) {
        console.log("錯誤");
    });
    $.ajaxSettings.async = true;
}

//unity載入後會先跑LoadPage();
function LoadPage() {

    var option = window.localStorage.getItem("option");
    getEquipmentName(option);

    $('#' + window.localStorage.getItem("option")).removeClass('hidden').removeAttr('disabled');

    document.getElementById("monitorSelect2").innerHTML = "選擇觀測儀器";

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

    if (isLoad) {
        //dataValue = 監測儀器代號,超出警戒值的儀器名稱
        //AddDataTable會存option：監測儀器代號(string)
        //               abnormal：超出警戒值的儀器名稱(array)
        //               gameObjects：所有監測儀器名稱(array)
        //               optionGameObjects：包含監測儀器代號的所有監測儀器名稱(array)
        //               到unity的DataTable.cs裡面
        myGameInstance.SendMessage("Monitor", "AddDataTable", dataValue);
        //原本的模型牆被挖空，SID、RS、VG都有建各自的牆，若選擇一種監測儀器則另外兩種隱藏掉
        //addData(DataTable.option);
        //依照DataTable的option將所有optionGameObjects改成normal的顏色
        //Search(DataTable.option, DataTable.abnormal); 
        //將所有abnormal的儀器改成abnormal的顏色
        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);
}

//get well info from sql server
function showWell(str, changeCamera) {

    var strLocal = "";
    //isCompare = false;
    //$("#compareCheck").checked = false;
    strLocal = str;
    $("#monitorSelect2").innerHTML = strLocal;
    getTable(str);
    getChart(str, "myChart");

    if (isLoad) {
        //把現在選擇的儀器名稱(例：OW-1)傳到unity，unity找模型名稱相同的改變模型顏色以及鏡頭置中模型
        myGameInstance.SendMessage("MainCamera", "GetDataFromWebGL", str);
    }
    if (!changeCamera) {
        ResetCamera();
    }

}

function getTable(monitor) {
    $.ajax({
        url: '/BIM-Monitor/script/php/get_monitor_table.php',
        type: "GET",
        dataType: "JSON",
        data: {
            monitor: monitor
        }
    }).success(function (result) {

        let table = result.table;
        let unit = result.unit;
        let haveDepth = result.haveDepth;
        let haveDirection = result.haveDirection;
        var header = "";
        if (haveDepth) {
            for (i = 0; i < table[0].length - 1; i++) {
                head = i * 0.5;
                if (head == 0)
                    head = "TOP";
                header += `<th>${head}</th>`;
            }
        } else if (haveDirection) {
            header = `<th>${monitor}(1~3向)</th><th>${monitor}(2~4向)</th>`;
        } else {
            header = `<th id="unit">測量值 單位:</th>`;
        }

        $("#tabData").empty();
        $("#tabData").append(`<table id="dataTable" class="display">
        <thead>
            <tr id="dataTableCol">
                <th>測量日期</th>
                ${header}
            </tr>
        </thead>
        <tbody id="table">
        </tbody>
    </table>`);
        dataTable = $('#dataTable').DataTable({
            bProcessing: true,
            responsive: true,
            "searching": true,
            "pageLength": 10,
            "language": {
                "processing": "處理中...",
                "loadingRecords": "載入中...",
                "lengthMenu": "顯示 _MENU_ 項結果",
                "zeroRecords": "沒有符合的結果或是沒有資料",
                "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                "infoFiltered": "(從 _MAX_ 項結果中過濾)",
                "infoPostFix": "",
                "search": "",
                "paginate": {
                    "first": '<i class="fa fa-step-backward"></i>',
                    "previous": '<i class="fa fa-backward"></i>',
                    "next": '<i class="fa fa-forward"></i>',
                    "last": '<i class="fa fa-step-forward"></i>'
                },
                "aria": {
                    "sortAscending": ": 升冪排列",
                    "sortDescending": ": 降冪排列"
                }
            },
        });
        if (dataTable != null) {
            dataTable.clear();
            dataTable.draw();
        }
        if (monitor == '') {
            monitor = '查無監測儀器或';
        }
        $("#tableName").text(monitor + "資料表");
        $("#unit").text(`測量值(${unit})`);
        table.forEach(function (data) {
            dataTable.row.add(data)
            dataTable.draw();
        });

    }).error(function (error) {
        console.log(error);
    }).complete(function (e) {

    });
}

//建立pie chart
function getCheckValue() {
    /*
    var dataArray = [];

    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: "/BIM-Monitor/script/php/checkValue2.php",
            data: {
                method: method,
                table_name: table_name,
                warning1: warning1,
                warning2: warning2,
                warning_Count: warning_Count
            },
            async: false,
            contentType: "application/json",
            dataType: "json"
        })

        .success(function (response) {
            console.log(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 = "/BIM-Monitor/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;
    */
    var dataArray = [];
    return dataArray;
}

//建立左側監測儀器(異常數量/總數量)
function GetCheckAllAJAXValue() {
    /*
        errorArray = [];
        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: "/BIM-Monitor/script/php/checkValue2.php",
                    data: {
                        method: method,
                        table_name: table_name,
                        warning1: warning1,
                        warning2: warning2,
                        warning_Count: warning_Count
                    },
                    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 CheckError() {
    var checkBox = document.getElementById("errorCheck");
    if (checkBox.checked == true) {
        isAll = false;
    } else {
        isAll = true;
    }
    SetList();
}

function get_json_file(file_path) {
    output = {};
    $.ajax({
        dataType: "json",
        url: file_path,
    }).done(function (data) {
        output = data;
    }).error(function (error) {
        console.log(error);
    });
    return output;
}


//Display chart
function getChart(monitor) {
    type = monitor.split("-")[0];

    $.ajax({
        url: "/BIM-Monitor/script/php/get_monitor_chart.php",
        type: "GET",
        async: false,
        contentType: "application/json",
        dataType: "json",
        data: {
            monitor: monitor
        }
    }).done(function (response) {
        charts = response.chart;
        label = response.label;
        unit = response.unit;
        console.log(charts);
        displayChart(monitor, label, unit, charts);

    }).error(function (error) {
        console.log(error);
    });



}

function displayChart(monitor, label, unit, charts) {
    var ctx = document.getElementById("myChart").getContext("2d");
    var date = [];
    var data = [];
    var warning1 = [];
    var action1 = [];
    var warning2 = [];
    var action2 = [];
    var type = monitor.split("-")[0];


    var SIS = [];
    var SIS_data = {};

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

    // console.log(charts);

    if (type == "SIS" || type == "SID") {
        SIS_data["depth"] =  [];
        SIS_data["warning1"] =  [];
        SIS_data["warning2"] =  [];
        SIS_data["action1"] =  [];
        SIS_data["action2"] =  [];
        SIS_data["data"] = {};

        charts.forEach(element => {
            var sis_date = element["Date"];
            var sis_warning = element["WarningValue"].split("±")[1];
            var sis_action = element["ActionValue"].split("±")[1];
            delete element["Date"];
            delete element["WarningValue"];
            delete element["ActionValue"];

            var sis_data_length = Object.keys(element).length;
            SIS_data["data"][sis_date] = [];

            for (i = 1; i <= sis_data_length; i++) {
                SIS_data["data"][sis_date].push(element["" + i * 0.5]);

                if (SIS_data["depth"].length < sis_data_length) {
                    SIS_data["depth"].push(i * 0.5);
                    SIS_data["warning1"].push(+sis_warning);
                    SIS_data["warning2"].push(-sis_warning);
                    SIS_data["action1"].push(+sis_action);
                    SIS_data["action2"].push(-sis_action);
                }
            }
        });
        console.log(SIS_data);

        var datasets = [{
            label: "警戒值+",
            data: SIS_data["warning1"],
            borderColor: "#FF0000",
            pointRadius: 0
        }, {
            label: "警戒值-",
            data: SIS_data["warning2"],
            borderColor: "#FF0000",
            pointRadius: 0
        }];

        Object.keys(SIS_data["data"]).forEach(element => {
            datasets.push({
                label: element,
                data: SIS_data["data"][element],
                borderColor: "#3e95cd",
                pointRadius: 0
            });
        });

        console.log(datasets);

        window.chart = new Chart(ctx, {
            //Line chart
            type: 'line',
            data: {
                labels: SIS_data["depth"],
                datasets: datasets
            },
            options: {
                spanGaps: true,
                maintainAspectRatio: false,
                responsive: true,
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: "深度"
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: label + '(' + unit + ')'
                        }
                    }
                }
            }
        });
    } else {
        charts.forEach(function (chart) {
            Object.keys(chart).forEach(function (key) {
                if (key == "Date") {
                    date.push(chart[key]);
                } else if (key == "WarningValue") {
                    let value = 0;
                    if (chart[key].includes("±")) {
                        value = chart[key].split("±")[1];
                    }
                    warning1.push(+value);
                    warning2.push(-value);
                } else if (key == "ActionValue") {
                    let value = 0;
                    if (chart[key].includes("±")) {
                        value = chart[key].split("±")[1];
                    }
                    action1.push(+value);
                    action2.push(-value);
                } else {
                    data.push(chart[key]);
                }
            });
        })

        var datasets = [{
            label: "警戒值+",
            data: warning1,
            borderColor: "#FF0000",
            pointRadius: 0
        }, {
            label: "警戒值-",
            data: warning2,
            borderColor: "#FF0000",
            pointRadius: 0
        }];

        if (type == "TI") {
            var data1 = [];
            var data2 = [];
            for (i = 0; i < data.length; i += 2) {
                data1.push(data[i]);
                data2.push(data[i + 1]);
            }
            datasets.push({
                label: monitor + "(1-3)",
                data: data1,
                borderColor: "#3e95cd"
            });
            datasets.push({
                label: monitor + "(2-4)",
                data: data2,
                borderColor: "#000000"
            });

        } else {
            datasets.push({
                label: monitor,
                data: data,
                borderColor: "#3e95cd"
            });
        }
        window.chart = new Chart(ctx, {
            //Line chart
            type: 'line',
            data: {
                //X-axis displays the date
                labels: date,
                datasets: datasets
            },
            options: {
                spanGaps: true,
                maintainAspectRatio: false,
                responsive: true,
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: "日期"
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: label + '(' + unit + ')'
                        }
                    }
                }
            }
        });
    }
}
/*
function 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: "/BIM-Monitor/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 () {});

}
*/

function ResetCamera() {
    if (isLoad) {
        myGameInstance.SendMessage("MainCamera", "ResetCamera");
    }
}

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");
        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;
            }
        }
        createA.setAttribute('onclick', "showWell('" + wellNameLists[i] + "',true)");
        createButton.setAttribute('onclick', "showWell('" + wellNameLists[i] + "',true)");
        createButton.setAttribute('type', "button");

        if (isAll || (!isAll && isError)) {
            createA.appendChild(createAText);
            createButton.appendChild(createButtonText);
            option.appendChild(createA);
            monitorSelect.appendChild(option);
            monitorButton.appendChild(createButton);
        }
        isError = false;

    }

}

function UpdateGPS(GPS) {
    if (isLoad) {
        myGameInstance.SendMessage("PlayerArmature", "UpdateGPS", GPS);
    }
}

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

    var ctx = document.getElementById(elementID).getContext("2d");
    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")) {

        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;
        }
    }

    //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;
        }
    }

    if (window.chart != undefined) {
        window.chart.destroy();
    }
    c_m_value.forEach(function (item, index, array) {

    });
    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
                    }
                }
            }
        }
    });

    //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 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;

    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];

    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;
        }
    }

    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("tabData");
    while (myNode.firstChild) {
        myNode.removeChild(myNode.lastChild);
    }
    var table = document.createElement("table");
    table.id = "dataTable";
    table.className = "display";
    myNode.appendChild(table);
}