<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/AppMaster.Master"
    Inherits="System.Web.Mvc.ViewPage<QMAPP.FJC.Web.Models.StatisticalAnalysis.QualifiedRateModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    合格率分析
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <style type="text/css">
        .tdset
        {
            border-top: 1px solid black;
            border-left: 1px solid black;
            width: 100px;
            text-align: center;
        }
        
        .tdright
        {
            border-right: 1px solid black;
        }
        
        .tdbottom
        {
            border-bottom: 1px solid black;
        }
    </style>
    <%=Html.QPSeach(80,true) %>
    <table id="condiTable">
        <tr>
            <th align="right">
                <%=Html.QV(p => p.PROCESSTYPE)%>
            </th>
            <td>
                <%=Html.QC(p => p.PROCESSTYPE)%>
            </td>
            <th align="right">
                <%=Html.QV(p => p.CreateDateStart)%>
            </th>
            <td>
                <%=Html.QC(p => p.CreateDateStart)%>
            </td>
            <th align="right">
                <%=Html.QV(p => p.CreateDateEnd)%>
            </th>
            <td>
                <%=Html.QC(p => p.CreateDateEnd)%>
            </td>
        </tr>
    </table>
    <div style="left: 1px; position: relative;">
    </div>
    <%=Html.QPEnd()%>
    <%=Html.QPList() %>
    <table cellpadding="0" cellspacing="0" align="center" style="margin-left: 5px; margin-top: 5px;">
        <tr style="height: 10px">
        </tr>
        <tr>
            <td align="center">
           <div id="chartdiv" style="width: 600px; height: 400px;"></div>
        <div style="margin-left:30px;">
	        <input type="radio" checked="true" name="group" id="rb1" onclick="setDepth()">2D
	        <input type="radio" name="group" id="rb2" onclick="setDepth()">3D
		</div>
            </td>
        </tr>
    </table>
    <%=Html.QPEnd() %>
     <%=Html.Hidden("Arr", Model.arr)%>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ToolContent" runat="server">
    <table id="EditTable" cellpadding="0" cellspacing="0">
        <tr>
            <td align="center">
                <%=Html.QTButtonSearch("QualifiedRate", "List", "Search()", (s, f) => { return true; })%>
                <%=Html.QTButton("export", "ExportExcel", QMFrameWork.WebUI.IconCls.redo, "Export()", (s, f) => { return true; })%>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        var chart;
        $(function () {
            var chartData = eval($("#Arr").val());
            if (chartData != undefined && chartData.length > 0) {
        AmCharts.ready(function () {
            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.dataProvider = chartData;
            chart.categoryField = "PROCESSTYPETEXT";
            chart.plotAreaBorderAlpha = 0.2;

            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.gridAlpha = 0.1;
            categoryAxis.axisAlpha = 0;
            categoryAxis.gridPosition = "start";

            // value
            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.stackType = "regular";
            valueAxis.gridAlpha = 0.1;
            valueAxis.axisAlpha = 0;
            chart.addValueAxis(valueAxis);

            // GRAPHS
            // first graph
            var graph = new AmCharts.AmGraph();
            graph.title = "合格";
            graph.labelText = "[[value]]";
            graph.valueField = "QUALIFIED";
            graph.type = "column";
            graph.lineAlpha = 0;
            graph.fillAlphas = 1;
            graph.lineColor = "#C72C95";
            graph.balloonText = "<span style='color:#555555;'>[[category]]</span><br><span style='font-size:14px'>[[title]]:<b>[[value]]</b></span>";
            chart.addGraph(graph);

            // second graph
            graph = new AmCharts.AmGraph();
            graph.title = "不合格";
            graph.labelText = "[[value]]";
            graph.valueField = "UNQUALIFIED";
            graph.type = "column";
            graph.lineAlpha = 0;
            graph.fillAlphas = 1;
            graph.lineColor = "#D8E0BD";
            graph.balloonText = "<span style='color:#555555;'>[[category]]</span><br><span style='font-size:14px'>[[title]]:<b>[[value]]</b></span>";
            chart.addGraph(graph);

            // LEGEND
            var legend = new AmCharts.AmLegend();
            legend.borderAlpha = 0.2;
            legend.horizontalGap = 10;
            chart.addLegend(legend);

            // WRITE
            chart.write("chartdiv");
        });
    }
});
        // this method sets chart 2D/3D
        function setDepth() {
            if (document.getElementById("rb1").checked) {
                chart.depth3D = 0;
                chart.angle = 0;
            } else {
                chart.depth3D = 25;
                chart.angle = 30;
            }
            chart.validateNow();
        }



        //查询
        function Search() { 
            submitByButton("List");
        }
        //导出
        function Export() { 
            submitByButton("ExportExcel");
        }
        
    </script>
</asp:Content>