<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="YearContrastPic.aspx.cs" Inherits="HySoft.BaseCallCenter.Web.reportmanage.operationdata.YearContrastPic" %>

<!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">
<head runat="server">
    <title>图形报表</title>

     <link href="../../scripts/ui/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="../../images/style.css" rel="stylesheet" type="text/css" />
    <script src="../../scripts/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="../../scripts/ui/js/ligerui.min.js" type="text/javascript"></script>
    <script src="../../scripts/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
    <script src="../../ThirdParty/js/highcharts.js" type="text/javascript"></script>
    <script src="../../ThirdParty/js/modules/exporting.js" type="text/javascript"></script>
    <%--wbx 5-7 打印--%>
     <script type="text/javascript">
         $(function () {
             SearchData();
         });
         //报表列表
         function SearchData() {
            $('#divfromlist').highcharts({
                chart: {
            },
            title: {
                text: '呼叫数据对比'
            },
            xAxis: {
                categories: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月']
            },
            yAxis: [
            {
             title: {
                    text: '百分比',
                    style: {
                        color: '#4572A7'
                    }
                },
                opposite: true
            },
            {
                title: {
                    text: '电话数量'
                },
            }
            ],
            tooltip: {
                            shared: true
                        },
            series: [{
                    type: 'column',
                    name: document.getElementById("dptBgn").value+'客户呼叫数',
                     yAxis: 1,
                    tooltip: {
                                valueSuffix: '通'
                            },
                    data: [<%=GetKhCall( dptBgn.SelectedValue) %>],
                    color:Highcharts.getOptions().colors[6],
                }, {
                    type: 'column',
                    name: document.getElementById("dptBgn").value+'坐席接听数',
                     yAxis: 1,
                     tooltip: {
                                valueSuffix: '通'
                            },
                    data: [<%=GetZxJt(dptBgn.SelectedValue) %>],
                      color:Highcharts.getOptions().colors[7],
                }, {
                    type: 'column',
                    name: document.getElementById("dptEnd").value+'客户呼叫数',
                     yAxis: 1,
                     tooltip: {
                                valueSuffix: '通'
                            },
                    data: [<%=GetKhCall(dptEnd.SelectedValue) %>],
                      color:Highcharts.getOptions().colors[8],
                }
                , {
                    type: 'column',
                    name: document.getElementById("dptEnd").value+'坐席接听数',
                     yAxis: 1,
                     tooltip: {
                                valueSuffix: '通'
                            },
                    data: [<%=GetZxJt(dptEnd.SelectedValue) %>],
                      color:Highcharts.getOptions().colors[9],
                }
                
                ,{
                    type: 'spline',
                    name: document.getElementById("dptBgn").value+'接通率',
                    data: [<%=GetJTL(dptBgn.SelectedValue) %>],
                     tooltip: {
                                valueSuffix: '%'
                            },
                    marker: {
                        lineWidth: 2,
                        lineColor: Highcharts.getOptions().colors[5],
                        fillColor: 'white'
                    }
                }, {
                    type: 'spline',
                    name: document.getElementById("dptEnd").value+'接通率',
                    tooltip: {
                                valueSuffix: '%'
                            },
                    data: [<%=GetJTL(dptEnd.SelectedValue) %>],
                    marker: {
                        lineWidth: 2,
                        lineColor: Highcharts.getOptions().colors[5],
                        fillColor: 'white'
                    }
                }]
                    });


        }


    </script>


</head>
<body>
    <form id="form1" runat="server">
   <asp:HiddenField ID="htHtmlReport" runat="server" />
    <div class="tools_box">
        <div class="tools_bar">
            <div class="search_box">
                选择年份：<asp:DropDownList ID="dptBgn" runat="server" CssClass="select"></asp:DropDownList> &nbsp;对比&nbsp;
                <asp:DropDownList ID="dptEnd" runat="server" CssClass="select"></asp:DropDownList>&nbsp;&nbsp;
                <input id="Button2" type="button" value="搜 索" class="btnSearch" onclick="SearchData();" />&nbsp;&nbsp;
            </div>
        </div>
    </div>
   
    <div id="divfromlist" style="min-width: 700px; height: 400px">
    </div>
    
    </form>
</body>
</html>
