@{
    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="divChartS" style="width: 100%; height: 300px; margin: 0 auto"></div>
        <div id="divChartB" style="width: 100%; height: 300px; margin: 0 auto"></div>
        <div id="divChartM" style="width: 100%; height: 300px; margin: 0 auto"></div>
        <input type="hidden" id="param_list" value="@ViewData["ParamList"]" />
        @Html.Raw(ViewData["RateDataList"])
    </div>
</div>

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

    <script type="text/javascript">
        $(document).ready(function () {

            $.ajax({
                type: "Post",
                url: '/QRS/GetYieldData4QRS014BS?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["yield"];
                        xAxisData[idx] = item["month"];
                        idx = idx + 1;
                    });

                    Highcharts.chart('divChartS', {
                        title: {
                            text: '單板直通率圖表'
                        },
                        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("查無單板直通率資料!");
                    $("#divChartS").empty();
                }
            });

            $.ajax({
                type: "Post",
                url: '/QRS/GetYieldData4QRS014BB?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["yield"];
                        xAxisData[idx] = item["month"];
                        idx = idx + 1;
                    });

                    Highcharts.chart('divChartB', {
                        title: {
                            text: '系統直通率圖表'
                        },
                        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("查無系統直通率資料!");
                    $("#divChartB").empty();
                }
            });

            $.ajax({
                type: "Post",
                url: '/QRS/GetYieldData4QRS014BM?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["yield"];
                        xAxisData[idx] = item["month"];
                        idx = idx + 1;
                    });

                    Highcharts.chart('divChartM', {
                        title: {
                            text: '醫療直通率圖表'
                        },
                        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("查無醫療直通率資料!");
                    $("#divChartM").empty();
                }
            });
        });

    </script>


}