<%@ Page Title="" Language="C#" MasterPageFile="~/Application.Master" EnableViewState="true" AutoEventWireup="true" CodeBehind="RealTimeDisplay.aspx.cs" Inherits="ICDAS_3_0_Web_App.ICDAS_3_0.Real_Time.RealTimeDisplay" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="javascript/Chart.bundle.js"></script>
    <script type="text/javascript">

        function GetChart() {

            var _EquipmentId = 0;
            var _EquipmentName = "";
            var _EquipmentTypeGroup = "";
            var colour = [];
            var ParameterType = [];
            var channelCount = 0;
            var MinY1 = 0; var MaxY1 = 0; var MinY2 = 0; var MaxY2 = 0;
            var datetime; var Today;
            var SeriesNames = [];
            var YaxisDataseries = [];//NUMBER OF Y AXIS
            var DualAxis = false;

            colour = $('#<%=hdnParameterColorCode.ClientID%>').val().split(',');
            ParameterType = $('#<%=hdnParameterType.ClientID%>').val().split(',');
            channelCount = $('#<%=hdnActiveChannel.ClientID%>').val();
            _EquipmentId = $('#<%=ddlEquipment.ClientID%>').val();
            _EquipmentName = $('#<%=ddlEquipment.ClientID%> option:selected').text();
            _EquipmentTypeGroup = $('#<%=hdnEquipTypeGroup.ClientID%>').val();

            if (_EquipmentTypeGroup.search('CI') > -1 || (_EquipmentTypeGroup.search('PS') > -1 && _EquipmentTypeGroup.includes('PSH') == false) || _EquipmentTypeGroup.search('TC') > -1
                || _EquipmentTypeGroup.search('SHC') > -1 || _EquipmentTypeGroup.search('LO') > -1 || _EquipmentTypeGroup.search('VO') > -1) {
                SeriesNames = ["Temperature1", "Temperature2", "Temperature3", "Temperature4", "Temperature5"
                    , "Temperature6", "Temperature7", "Temperature8", "Temperature9", "Temperature10"];

            }
            else if (_EquipmentTypeGroup.search('DC') > -1) {
                SeriesNames = ["Chamber 1 Temp1", "Chamber 2 Temp1", "Chamber 1 Temp2", "Chamber 2 Temp2", "Chamber 1 Temp3", "Chamber 2 Temp3", "Chamber 1 Temp4", "Chamber 2 Temp4"
                    , "Chamber 1 Temp5", "Chamber 2 Temp5", "Chamber 1 Temp6", "Chamber 2 Temp6", "Chamber 1 Temp7", "Chamber 2 Temp7", "Chamber 1 Temp8", "Chamber 2 Temp8"
                    , "Chamber 1 Temp9", "Chamber 2 Temp9", "Chamber 1 Temp10", "Chamber 2 Temp10"];
            }

            else {
                SeriesNames = ["Temperature1", "Humidity1", "Temperature2", "Humidity2", "Temperature3", "Humidity3", "Temperature4", "Humidity4"
                    , "Temperature5", "Humidity5", "Temperature6", "Humidity6", "Temperature7", "Humidity7", "Temperature8", "Humidity8"
                    , "Temperature9", "Humidity9", "Temperature10", "Humidity10"];

                DualAxis = true;

            }

            if (DualAxis == false) {
                YaxisDataseries.push({
                    type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                    display: true,
                    position: "left",
                    labelString: "Temperature"
                });
            }
            else {
                //Y AXIS ATTRIBUTES
                YaxisDataseries.push({
                    type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                    display: true,
                    position: "left",
                    id: "y-axis-1",//IMP TO SET ID WHENEVER RESPECTIVE AXIS ARE MULTIPLE LIKE Y1 AXIS AND Y2 AXIS
                    scaleLabel: {
                        show: true,
                        labelString: 'Temperature'
                    }
                });

                YaxisDataseries.push({
                    type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                    display: true,
                    position: "right",
                    id: "y-axis-2",
                    scaleLabel: {
                        show: true,
                        labelString: 'Humidity'
                    }
                });

            }

            Today = new Date();
            datetime = new Date(Today.getYear(), Today.getMonth(), Today.getDate(), Today.getHours(), Today.getMinutes(), Today.getSeconds());


            //CHART CREATION
            var config = null;
            config = {
                type: 'line',
                data: {
                    labels: [],
                    datasets: []
                },
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: _EquipmentName
                    },
                    tooltips: {
                        mode: 'label',
                        callbacks: {
                        }
                    },
                    hover: {
                        mode: 'dataset'
                    },
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                show: true,
                                labelString: 'Time'
                            }
                        }],
                        yAxes: YaxisDataseries//SET Y AXIS HERE
                    }
                }
            };//var config 


            $('#canvasContainer').html("");
            var canvas1 = document.createElement('canvas');
            canvas1.setAttribute("id", "canvas");
            $('#canvasContainer').append(canvas1);

            var ctx = null;
            ctx = canvas1.getContext("2d");//document.getElementById("canvas").getContext("2d");

            window.myLine = new Chart(ctx, config);

            //CONFIGURE CHART            
            for (var i = 0; i < channelCount; i++) {
                //alert(SeriesNames[i]);
                var axisType;
                if (ParameterType[i] == "T") {
                    axisType = "y-axis-1";
                }
                else {
                    axisType = "y-axis-2";
                }
                var newDataset;//NUMBER OF LINES OR SERIES CREATION
                if (DualAxis == true) {
                    newDataset = {//SERIES ATTRIBUTES
                        label: SeriesNames[i],
                        fill: false,
                        borderColor: colour[i],
                        pointBorderColor: colour[i],
                        pointBackgroundColor: colour[i],
                        pointBorderWidth: 1,
                        data: [],
                        yAxisID: axisType
                        //SET AXIS
                    };
                }
                else {
                    newDataset = {
                        label: SeriesNames[i],
                        fill: false,
                        borderColor: colour[i],
                        pointBorderColor: colour[i],
                        pointBackgroundColor: colour[i],
                        pointBorderWidth: 1,
                        data: []
                        //SET AXIS
                    };
                }

                config.data.datasets.push(newDataset);
                window.myLine.update();
            }

            //trchannel trtemp trHumid

            var updateChart = function () {

                var paramdata = [];
                var request = $.ajax({

                    type: 'POST',
                    url: 'ICDAS_3_0/WebService/EquipmentWebService.asmx/GetUpdatedXYPlot',
                    data: "{ Id:" + $('#<%=hdnEquipmentMasterId.ClientID%>').val() + " }",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (serverdata) {
                        paramdata = JSON.parse(serverdata.d);

                        var Today = new Date();
                        var datetime = new Date(Today.getYear(), Today.getMonth(), Today.getDate(), Today.getHours(), Today.getMinutes(), Today.getSeconds());
                        var hrs = Today.getHours();
                        var minutes = Today.getMinutes();
                        var Seconds = Today.getSeconds();

                        var tempv = 0; var humidv = 0;

                        _EquipmentTypeGroup = $('#<%=hdnEquipTypeGroup.ClientID%>').val();
                        for (var i = 0; i < paramdata.length; i++) {

                            if (_EquipmentTypeGroup.search('CI') > -1 || (_EquipmentTypeGroup.search('PS') > -1 && _EquipmentTypeGroup.includes('PSH') == false) || _EquipmentTypeGroup.search('TC') > -1
                || _EquipmentTypeGroup.search('SHC') > -1 || _EquipmentTypeGroup.search('LO') > -1 || _EquipmentTypeGroup.search('VO') > -1) {

                                $('#ContentPlaceHolder1_temp' + i).text(paramdata[i]);

                            }
                            else {
                                if (i % 2 == 0) {
                                    $('#ContentPlaceHolder1_temp' + tempv).text(paramdata[i]);
                                    tempv = tempv + 1;
                                }
                                else {
                                    $('#ContentPlaceHolder1_humid' + humidv).text(paramdata[i]);
                                    humidv = humidv + 1;
                                }
                            }
                        }

                        //push Time AND DATA
                        if (config.data.datasets.length >= 0) {

                            datetime = Today.getHours() + ":" + Today.getMinutes() + ":" + Today.getSeconds();
                            config.data.labels.push(datetime);//PUSH X AXIS VALUE
                            $.each(config.data.datasets, function (x, dataset) {//PUSH Y AXIS VALUE USING $.each()
                                dataset.data.push(paramdata[x]);

                            });
                            window.myLine.update();//NEED TO UPDATE AFTER EVERY ENTRY 

                            if (config.data.datasets[0].data.length > 11) {//SET X AXIS LENGTH ON CHART LIKE HERE IT IS 11
                                config.data.labels.splice(0, 1); // REMOVE FIRST LABLE 
                                config.data.datasets.forEach(function (dataset, datasetIndex) {
                                    dataset.data.shift();//REMOVE FIRST DATASERIES VALUE
                                });

                            }
                            window.myLine.update();

                            var latestYAxis = [];

                            //SET DYNAMIC Y AXIS RANGE                            
                            if (DualAxis == false) {
                                latestYAxis.push({
                                    type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                                    display: true,
                                    position: "left",
                                    ticks: {
                                        min: parseFloat($('#<%=txtPLLValue.ClientID%>').val()),//HERE YOU CAN SET YOUR Y AXIS MINIMUM VALUE MANUALLY OR DYANAMICALLY
                                        max: parseFloat($('#<%=txtPULValue.ClientID%>').val())//HERE YOU CAN SET YOUR Y AXIS MAXIMUM VALUE MANUALLY OR DYANAMICALLY
                                    }
                                });
                            }
                            else {
                                latestYAxis.push({
                                    type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                                    display: true,
                                    position: "left",
                                    id: "y-axis-1",
                                    ticks: {
                                        min: parseFloat($('#<%=txtPLLValue.ClientID%>').val()),
                                        max: parseFloat($('#<%=txtPULValue.ClientID%>').val())
                                    }
                                });

                                latestYAxis.push({
                                    type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                                    display: true,
                                    position: "right",
                                    id: "y-axis-2",
                                    ticks: {
                                        min: parseFloat($('#<%=txtSLLValue.ClientID%>').val()),
                                        max: parseFloat($('#<%=txtSULValue.ClientID%>').val())
                                    }
                                });
                            }
                            config.options.scales = {
                                yAxes: latestYAxis//ASSIGN AXIS MAX AND MIN SCLAES HERE

                            };
                            //SET DYNAMIC Y AXIS RANGE


                            window.myLine.update();
                        }// if (config.data.datasets.length > 0) 

                    },//success: function (serverdata)
                    error: function (error) {
                        alert("error  ");
                    }
                });

            }//updateChart


            updateChart();
            setInterval(function () { updateChart() }, 3000);
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:UpdatePanel ID="upnlwzRealTimeDisplay" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <asp:HiddenField runat="server" ID="hdnEquipmentMasterId" Value="0" />
                        <asp:HiddenField runat="server" ID="hdnEquipTypeGroup" />
                        <asp:HiddenField runat="server" ID="hdnMaxY" />
                        <asp:HiddenField runat="server" ID="hdnMinY" />
                        <asp:HiddenField runat="server" ID="hdnActiveChannel" />
                        <asp:HiddenField runat="server" ID="hdnParameterColorCode" />
                        <asp:HiddenField runat="server" ID="hdnParameterType" />
                        <asp:HiddenField runat="server" ID="hdnVersion" />

                        <div class="x_title">
                            <h4>
                                <asp:Label ID="lblFormTitle" runat="server"></asp:Label></h4>
                            <div class="clearfix"></div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-lg-5">
                            <div class="row">
                                <div class="input-group">
                                    <span class="input-group-addon">Equipment</span>
                                    <asp:DropDownList runat="server" ID="ddlEquipment" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="ddlEquipment_SelectedIndexChanged"></asp:DropDownList><%-- onchange="javascript:GetEquipmentDetails();"--%>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-12 col-sm-8 col-lg-8">
                                <asp:UpdatePanel runat="server" UpdateMode="Conditional">
                                    <ContentTemplate>
                                        <table id="tblRealTime" visible="false" border="0" runat="server" style="width: 100%; font-weight: bold;" class="text-center">
                                            <tr runat="server" id="ChannelRow" style="background-color: #28a067; color: white">
                                                <td>Parameter</td>
                                                <td runat="server" id="cr0" style="height: 30px;" visible="false">CH-1</td>
                                                <td runat="server" id="cr1" style="height: 30px;" visible="false">CH-2</td>
                                                <td runat="server" id="cr2" style="height: 30px;" visible="false">CH-3</td>
                                                <td runat="server" id="cr3" style="height: 30px;" visible="false">CH-4</td>
                                                <td runat="server" id="cr4" style="height: 30px;" visible="false">CH-5</td>
                                                <td runat="server" id="cr5" style="height: 30px;" visible="false">CH-6</td>
                                                <td runat="server" id="cr6" style="height: 30px;" visible="false">CH-7</td>
                                                <td runat="server" id="cr7" style="height: 30px;" visible="false">CH-8</td>
                                                <td runat="server" id="cr8" style="height: 30px;" visible="false">CH-9</td>
                                                <td runat="server" id="cr9" style="height: 30px;" visible="false">CH-10</td>
                                            </tr>
                                            <tr id="trTemperature" visible="false" runat="server" style="background-color: #28a067; color: white">
                                                <td runat="server" id="TempHeader" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black">Temperature</td>
                                                <td runat="server" id="temp0" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="temp1" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="temp2" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="temp3" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="temp4" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="temp5" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="temp6" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="temp7" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="temp8" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="temp9" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                            </tr>

                                            <tr id="trHumidity" runat="server" visible="false">
                                                <td runat="server" id="HumHeader" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black">Humidity</td>
                                                <td runat="server" id="humid0" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="humid1" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="humid2" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="humid3" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="humid4" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="humid5" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="humid6" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="humid7" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="humid8" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                                <td runat="server" id="humid9" visible="false" style="border-right: hidden; height: 30px; background-color: #cdf9e4; color: black"></td>
                                            </tr>
                                        </table>
                                    </ContentTemplate>
                                </asp:UpdatePanel>

                            </div>
                            <div class="col-xs-12 col-sm-4 col-lg-4">
                                <table id="tblSetting" border="1" runat="server" style="width: 100%; font-weight: bold;" class="text-center">
                                    <tr runat="server" id="trSettingParameter">
                                        <td runat="server" visible="false" id="tdST" style="border-right: hidden; width: 14%; height: 30px; background-color: #28a067; color: white">ST</td>
                                        <td runat="server" visible="false" id="tdEST" style="border-right: hidden; width: 14%; height: 30px; background-color: #28a067; color: white">EST</td>
                                        <td runat="server" visible="false" id="tdLLA" style="border-right: hidden; width: 14%; height: 30px; background-color: #28a067; color: white">LLA</td>
                                        <td runat="server" id="tdLA" style="border-right: hidden; width: 14%; height: 30px; background-color: #28a067; color: white">LA</td>
                                        <td runat="server" id="tdSV" style="border-right: hidden; width: 14%; height: 30px; background-color: #28a067; color: white">SV</td>
                                        <td runat="server" id="tdHA" style="width: 14%; height: 30px; background-color: #28a067; color: white">HA</td>
                                        <td runat="server" visible="false" id="tdHHA" style="border-left: hidden; width: 14%; height: 30px; background-color: #28a067; color: white">HHA</td>
                                    </tr>
                                    <tr runat="server" id="trTempSetting">
                                        <td runat="server" visible="false" id="tdTempST" style="border-right: hidden; width: 14%; height: 30px; background-color: #cdf9e4; color: black"></td>
                                        <td runat="server" visible="false" id="tdTempEST" style="border-right: hidden; width: 14%; height: 30px; background-color: #cdf9e4; color: black"></td>
                                        <td runat="server" visible="false" id="tdTempLLA" style="border-right: hidden; width: 14%; height: 30px; background-color: #cdf9e4; color: black"></td>
                                        <td runat="server" id="tdTempLA" style="border-right: hidden; width: 14%; height: 30px; background-color: #cdf9e4; color: black"></td>
                                        <td runat="server" id="tdTempSV" style="border-right: hidden; width: 14%; height: 30px; background-color: #cdf9e4; color: black"></td>
                                        <td runat="server" id="tdTempHA" style="width: 14%; height: 30px; background-color: #cdf9e4; color: black"></td>
                                        <td runat="server" visible="false" id="tdTempHHA" style="border-left: hidden; width: 14%; height: 30px; background-color: #cdf9e4; color: black"></td>
                                    </tr>
                                    <tr runat="server" id="trHumidSetting">
                                        <td runat="server" visible="false" id="tdHumidST" style="border-right: hidden; width: 14%; height: 30px; background-color: #cdf9e4; color: black"></td>
                                        <td runat="server" visible="false" id="tdHumidEST" style="border-right: hidden; width: 14%; height: 30px; background-color: #cdf9e4; color: black"></td>
                                        <td runat="server" visible="false" id="tdHumidLLA" style="border-right: hidden; width: 14%; height: 30px; background-color: #cdf9e4; color: black"></td>
                                        <td runat="server" id="tdHumidLA" style="border-right: hidden; width: 14%; height: 30px; background-color: #cdf9e4; color: black"></td>
                                        <td runat="server" id="tdHumidSV" style="border-right: hidden; width: 14%; height: 30px; background-color: #cdf9e4; color: black"></td>
                                        <td runat="server" id="tdHumidHA" style="width: 14%; height: 30px; background-color: #cdf9e4; color: black"></td>
                                        <td runat="server" visible="false" id="tdHumidHHA" style="border-left: hidden; width: 14%; height: 30px; background-color: #cdf9e4; color: black"></td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-lg-12" id="divRealtime" runat="server">
                                <br />
                                <asp:UpdatePanel runat="server" UpdateMode="Conditional">
                                    <ContentTemplate>
                                        <%--<asp:Timer runat="server" ID="tmrRealTimeDisplay"></asp:Timer>
                                        Interval="10000" OnTick="tmrRealTimeDisplay_Tick"--%>
                                        <div class="x_panel">
                                            <div class="x_title">
                                                <h2>Real Time graph</h2>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="x_content">
                                                <h4 runat="server" id="tempMsg" visible="false" style="text-align: center; color: green">Chart is Loading...Please Wait</h4>
                                                <asp:Literal ID="LitLine" runat="server"></asp:Literal>
                                                <div id="canvasContainer" style="height: 500px; width: 100%;">
                                                    <%-- <canvas id="canvas"></canvas>--%>
                                                </div>



                                            </div>
                                        </div>
                                    </ContentTemplate>
                                </asp:UpdatePanel>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-lg-2"></div>
                        <div class="col-xs-12 col-sm-12 col-lg-10">
                            <table id="tblUpperLower" border="0" runat="server" style="width: 100%; font-weight: bold;" class="text-center">
                                <tr>
                                    <td runat="server" id="tdPLL" style="width: 20%">
                                        <div class="input-group">
                                            <span class="input-group-addon" style="background-color: #28a067; color: white">PLL</span>
                                            <asp:TextBox ID="txtPLLValue" runat="server" TextMode="Number" MaxLength="4" class="form-control"></asp:TextBox>
                                        </div>
                                    </td>
                                    <td runat="server" style="width: 7%"></td>
                                    <td runat="server" id="tdPUL" style="width: 20%">
                                        <div class="input-group">
                                            <span class="input-group-addon" style="background-color: #28a067; color: white">PUL</span>
                                            <asp:TextBox ID="txtPULValue" runat="server" TextMode="Number" MaxLength="4" class="form-control"></asp:TextBox>
                                        </div>
                                    </td>
                                    <td runat="server" style="width: 7%"></td>
                                    <td runat="server" id="tdSLL" style="width: 20%">
                                        <div class="input-group">
                                            <span class="input-group-addon" style="background-color: #28a067; color: white">SLL</span>
                                            <asp:TextBox ID="txtSLLValue" runat="server" TextMode="Number" MaxLength="4" class="form-control"></asp:TextBox>
                                        </div>
                                    </td>
                                    <td runat="server" style="width: 6%"></td>
                                    <td runat="server" id="tdSUL" style="width: 20%">
                                        <div class="input-group">
                                            <span class="input-group-addon" style="background-color: #28a067; color: white">SUL</span>
                                            <asp:TextBox ID="txtSULValue" runat="server" TextMode="Number" MaxLength="4" class="form-control"></asp:TextBox>
                                        </div>
                                    </td>


                                </tr>
                                <tr style="visibility: hidden">



                                    <td style="border-bottom: hidden; border-top: hidden; border-left: hidden; width: 6%; height: 30px;"></td>
                                    <td runat="server" style="border-right: hidden; width: 6%; height: 30px; background-color: #28a067; color: white">PLL</td>
                                    <td runat="server" id="tdtxtPLL" style="width: 6%; height: 30px;">
                                        <asp:TextBox runat="server" MaxLength="4" Width="50px">0</asp:TextBox></td>
                                    <td style="border-bottom: hidden; border-top: hidden; width: 6%; height: 30px;"></td>
                                    <td runat="server" style="border-right: hidden; width: 6%; height: 30px; background-color: #28a067; color: white">PUL</td>
                                    <td runat="server" style="width: 6%; height: 30px;">
                                        <asp:TextBox TextMode="Number" runat="server" MaxLength="4" Width="50px">0</asp:TextBox></td>
                                    <td style="border-bottom: hidden; border-top: hidden; width: 6%; height: 30px;"></td>
                                    <td runat="server" style="border-right: hidden; width: 6%; height: 30px; background-color: #28a067; color: white">SLL</td>
                                    <td runat="server" id="tdtxtSLL" style="width: 6%; height: 30px;">
                                        <asp:TextBox TextMode="Number" runat="server" MaxLength="4" Width="50px">0</asp:TextBox></td>
                                    <td runat="server" id="tdr0" style="border-bottom: hidden; border-top: hidden; width: 6%; height: 30px;"></td>
                                    <td runat="server" style="border-right: hidden; width: 6%; height: 30px; background-color: #28a067; color: white">SUL</td>
                                    <td runat="server" id="tdtxtSUL" style="width: 6%; height: 30px;">
                                        <asp:TextBox TextMode="Number" MaxLength="4" runat="server" Width="50px">0</asp:TextBox></td>
                                    <td runat="server" id="tdr1" style="border-bottom: hidden; border-top: hidden; width: 6%; height: 30px;"></td>
                                    <td runat="server" style="border: hidden; width: 8%; height: 30px; text-align: left">
                                        <asp:Button runat="server" ID="btnReplot" CssClass="btn btn-md btn-danger" Visible="false" Text="Replot" ToolTip="REPLOT GRAPH" OnClientClick="ReplotGraph();return false;" /><%--OnClick="btnReplot_Click" --%>
                                    </td>
                                    <td runat="server" id="tdr2" style="border-bottom: hidden; border-top: hidden; border-right: hidden; width: 6%; height: 30px;"></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            </div>

        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

