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

<style>
    .TR_Item_Sstyle {
        width: 60px;
        text-align: center;
        font-weight: bold;
        color: #FFFFF2;
        background-color: #2B2B2B;        
    }
    .TD_Data_Sstyle {
        width: 60px;
        text-align: center;
        font-weight: bold;
    }
    .TD_Data_Rate_Sstyle {
        width: 60px;
        text-align: right;
        font-weight: bold;
        padding: 5px 5px 5px 5px
    }
</style>

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


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

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

            $.ajax({
                type: "Post",
                url: '/RPT/GetMonthData4RPT001C?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('divChart', {
                        title: {
                            text: '@ViewBag.Title2'
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            categories: xAxisData
                        },
                        yAxis: {
                            title: {
                                text: '@ViewBag.Title2'
                            }
                        },
                        plotOptions: {
                            line: {
                                dataLabels: {
                                    enabled: true
                                },
                                enableMouseTracking: false
                            }
                        },
                        series: [{
                            type: 'column',
                            name: '月份',
                            data: yieldData
                        },
                        {
                            type: 'line',
                            name: '數值',
                            data: yieldData
                        }]
                    });
                },
                error: function () {
                    alert("查無資料!");
                    $("#divChart").empty();
                }
            });

            $.ajax({
                type: "Post",
                url: '/RPT/GetMonthData4RPT001C2?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["group"];
                        idx = idx + 1;
                    });

                    Highcharts.chart('divChart1', {
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: '@ViewBag.Title2'
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                        },
                        yAxis: {
                            title: {
                                text: '@ViewBag.Title2'
                            }
                        },
                        plotOptions: {
                            series: {
                                stacking: 'normal'
                            }
                        },
                        series: @Html.Raw(@ViewBag.SeriesData),
                        tooltip: {
                            pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>'
                        }
                    });
                },
                error: function () {
                    alert("查無資料!");
                    $("#divChart1").empty();
                }
            });
        });

</script>


}