<%@ Page Title="Graphical" Language="C#" AutoEventWireup="true" CodeFile="TA_UI_Report_Graphical_View.aspx.cs"
    Inherits="Reports_TA_UI_Report_Graphical_View" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" runat="server" id="htmlGraphical">
<head id="Head1" runat="server">

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Report Viewer</title>
    <script src="../plugins/canvasjs.min.js" type="text/javascript"></script>
    <link id="stylebootstrap" rel="stylesheet" runat="server" type="text/css" />
    <link id="stylefontawesome" rel="stylesheet" runat="server" type="text/css" />
    <link id="styleAdminLTE" rel="stylesheet" runat="server" type="text/css" />
    <link id="stylecustom" rel="stylesheet" runat="server" type="text/css" />
    <link id="stylefonts" rel="stylesheet" runat="server" type="text/css" />
    <script src="../js/GetGraphicalReportData.js" type="text/javascript"></script>
    <script type="text/javascript">
        function back() {
            window.history.back();
            return false;
        }
        function changeMessage(val) {
            if (val == 0) {
                document.getElementById('SplineChart').style.display = "block";
                document.getElementById('PieChart').style.display = "none";
                document.getElementById('DoughnutChart').style.display = "none";
                document.getElementById('CloumnChart').style.display = "none";
            }
            else if (val == 1) {
                document.getElementById('SplineChart').style.display = "none";
                document.getElementById('PieChart').style.display = "none";
                document.getElementById('DoughnutChart').style.display = "none";
                document.getElementById('CloumnChart').style.display = "block";
                document.getElementById('CloumnChart').style.width = "100%";
            }
            else if (val == 2) {
                document.getElementById('SplineChart').style.display = "none";
                document.getElementById('PieChart').style.display = "block";
                document.getElementById('DoughnutChart').style.display = "none";
                document.getElementById('CloumnChart').style.display = "none";
            }
            else if (val == 3) {
                document.getElementById('SplineChart').style.display = "none";
                document.getElementById('PieChart').style.display = "none";
                document.getElementById('DoughnutChart').style.display = "block";
                document.getElementById('CloumnChart').style.display = "none";
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="content">
            <div class="row form-group">
                <div class="col-md-12">
                    <asp:Label ID="lbl_ReportHeader" runat="server"></asp:Label>
                </div>
            </div>
            <div class="row form-group" style="display: none">
                <div class="col-md-2">
                    <asp:Label runat="server" Text="Chart Type" ID="lblChartType"></asp:Label>
                </div>
                <div class="col-md-3">
                    <asp:DropDownList ID="ddlReportType" runat="server" CssClass="form-control select2" onchange="changeMessage(this.value);"></asp:DropDownList>
                    <%--<asp:DropDownList ID="ddlReportType" runat="server" CssClass="form-control select2" OnSelectedIndexChanged="ddlReportType_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>--%>
                </div>
                <div class="col-md-1">
                </div>
                <div class="col-md-2">
                </div>
                <div class="col-md-3">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="PieChart" runat="server" style="width: 100% !important; height: 450px">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="DoughnutChart" runat="server" style="width: 100% !important; height: 450px">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="SplineChart" runat="server" style="width: 100% !important; height: 450px">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="CloumnChart" runat="server" style="width: 100% !important; height: 460px">
                    </div>
                </div>
            </div>
            <div class="row" style="display:none">
                <div class="col-md-12"></div>
                <div class="col-md-12">
                    <div class="pull-right-button">
                        <asp:LinkButton ID="btnback" runat="server" Text="&nbsp;&nbsp;Back" OnClick="btnback_Click" CssClass="btn save-btn fa-angle-left"></asp:LinkButton>
                    </div>
                </div>
            </div>

        </div>
    </form>
</body>
</html>


