@{
    Layout = "~/Views/Shared/_AMESLayout.cshtml";
}

<script src="~/Highcharts-7.1.2/highcharts.js"></script>
<script src="~/Highcharts-7.1.2/modules/exporting.js"></script>
<script src="~/Highcharts-7.1.2/modules/export-data.js"></script>

<div class="layui-card">
    <div class="layui-card-header">
        <div class="layui-form">
            <div class="layui-form-item ">
                <div class="layui-inline"><i class="fa fa-file-text-o fa-fw"></i> @ViewBag.Title</div>
            </div>

        </div>
    </div>
    <div class="layui-card-body">
        <div id="divChart" style="width: 100%; height: 400px; margin: 0 auto"></div>
        <input type="hidden" id="param_list" value="@ViewData["ParamList"]" />
        @Html.Raw(ViewData["IPQCDataList"])
    </div>
</div>

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial");
        await Html.RenderPartialAsync("_FileinputScriptsPartial"); }

    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "Post",
                url: '/QRS/GetIPQCData4QRS015?id=' + param_list.value,
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function (response) {
                    var idx = 0;
                    var xAxisData = new Array();
                    var yieldData = new Array();
                    $.each(response, function (i, item) {
                        yieldData[idx] = item["rate"];
                        xAxisData[idx] = item["weekCode"];
                        idx = idx + 1;
                    });

                    Highcharts.chart('divChart', {
                        title: {
                            text: 'IPQC通過率圖表'
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            categories: xAxisData
                        },
                        yAxis: {
                            title: {
                                text: '通過率'
                            }
                        },
                        plotOptions: {
                            line: {
                                dataLabels: {
                                    enabled: true
                                },
                                enableMouseTracking: false
                            }
                        },
                        series: [{
                            type: 'column',
                            name: '周次',
                            data: yieldData
                        },
                        {
                            type: 'line',
                            name: '周次',
                            data: yieldData
                        }]
                    });
                },
                error: function () {
                    alert("查無IPQC資料!");
                    $("#divChart").empty();
                }
            });
        });

    </script>


}