@extends('layouts.note_layout')
@section('title', 'EndoCapture')
@section('con-top')

@endsection


@section('style')
<style>
    .tab-menu{
        border: 1px solid #fbaf43;
        border-radius: 15px;
        box-shadow: 0 0 1px #fbaf43;
    }
    .nav-left{
        border-radius: 15px 0px 0px 15px !important;
    }
    .nav-right{
        border-radius: 0px 15px 15px 0px !important;
    }
    .nav.nav-pills.nav-light-success .nav-link.active{
        transition: 0.5s;
        color: #FBAF43 !important;
        background-color: #fbae4317;
    }
    .cn{
        align-items: center;
    }
    .ul{
        text-decoration: underline;
        font-size: large;
        font-weight: normal;
    }
    tspan{
        font-size: smaller;
    }
    g[aria-labelledby^="id-"]{
        display: none;
        position: absolute;
    }
    #chartstorage,#month,#age,#gender,#today,#totime,#come,
    #Illness,#medicine,#procedure,#food_allergy,#drug_allergy
    ,#cigarette,#spirits,#assessment,#physical,#last{
        margin-top: 0.4em;
        height: 17em;
    }
    .set-padding .col-lg-3:nth-child(1){ padding: 0.5em 0em 0em 0em}
    .set-padding .col-lg-3:nth-child(2){ padding: 0.5em 0.5em 0em 0.5em}
    .set-padding .col-lg-3:nth-child(3){ padding: 0.5em 0.5em 0em 0em}
    .set-padding .col-lg-3:nth-child(4){ padding: 0.5em 0em 0em 0em}
    .bottom-chart.active{
        display: flex;
    }
    .bottom-chart{
        display: none;
    }
</style>
@endsection

@section('content')

    <div class="row m-0">
        <div class="col-lg-2 p-0">
            <div class="row m-0 h-100">
                <div class="col-lg-12 pr-0">
                    <div class="card h-100">
                        <div class="card-body p-4 text-center">
                            <img src="{{url('')}}/public/image/rama.gif" alt="" srcset="" class="w-50 p-2">
                            <h4 class="text-center p-1">ผู้ป่วยทั้งหมด</h4>
                            <b class="text-center p-1 pt-3 display-2">2570</b>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 pr-0 pt-2">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <h4 class="text-center p-1">Total Nurse</h4>
                            <b class="text-center p-1 pt-3 display-2">35</b>

                        </div>
                    </div>
                </div>
                <div class="col-lg-12 pr-0 pt-2">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <h2 class="text-center p-1">Total Assist</h2>
                            <b class="text-center p-1 pt-3 display-2">35</b>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 pr-0 pt-2">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <h4 class="text-center p-1">อัตราการนัดสำเร็จ</h4>
                            <b class="text-center p-1 pt-3 display-2">80 %</b>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 pr-0 pt-2">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <h4 class="text-center p-1">ยืนยันออนไลน์</h4>
                            <b class="text-center p-1 pt-3 display-2">80 %</b>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-10 p-0">
            <div class="row m-0">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row m-0 cn">
                                <div class="col-lg-5">
                                    <ul class="nav nav-light-warning nav-pills row m-auto tab-menu" id="myTab3" role="tablist">
                                        <li class="nav-item w-50 m-0 text-center">
                                            <a class="nav-link active nav-left h-100" id="home-tab-3" data-toggle="tab" href="#home-3">
                                                <span class="nav-text">ก่อนทำหัตถการ</span>
                                            </a>
                                        </li>
                                        <li class="nav-item w-50 m-0 text-center">
                                            <a class="nav-link nav-right h-100" id="profile-tab-3" data-toggle="tab" href="#profile-3" aria-controls="profile">
                                                <span class="nav-text">ระหว่าง และ หลังทำหัตถการ</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-lg-7">
                                    <div class="row m-0">
                                        <div class="col-lg-3 p-1">
                                            <div class="row m-0 cn">
                                                <div class="col-auto"><h4 class="m-0">Year</h4></div>
                                                <div class="col pl-0"><select name="" id="" class="form-control form-control-sm"></select></div>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 p-1">
                                            <div class="row m-0 cn">
                                                <div class="col-auto"><h4 class="m-0">Month</h4></div>
                                                <div class="col pl-0"><select name="" id="" class="form-control form-control-sm"></select></div>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 p-1">
                                            <div class="row m-0 cn">
                                                <div class="col-auto"><h4 class="m-0">Age</h4></div>
                                                <div class="col pl-0"><select name="" id="" class="form-control form-control-sm"></select></div>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 p-1">
                                            <div class="row m-0 cn">
                                                <div class="col-auto"><h4 class="m-0">Gender</h4></div>
                                                <div class="col pl-0"><select name="" id="" class="form-control form-control-sm"></select></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m-0 mt-2">
                                        <div class="col-lg-6 p-1">
                                            <div class="row m-0 cn">
                                                <div class="col-auto"><h4 class="m-0">Procedure</h4></div>
                                                <div class="col pl-0"><select name="" id="" class="form-control form-control-sm"></select></div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 p-1">
                                            <div class="row m-0 cn">
                                                <div class="col-auto"><h4 class="m-0">Nurse</h4></div>
                                                <div class="col pl-0"><select name="" id="" class="form-control form-control-sm"></select></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row m-0">
                <div class="tab-content col-lg-12 pt-2" id="myTabContent3">
                    <div class="tab-pane fade show active" id="home-3" role="tabpanel" aria-labelledby="home-tab-3">
                        <div class="row m-0">
                            <div class="col-lg-6 p-0 pr-2">
                                <div class="card">
                                    <div class="card-body p-1">
                                        <div class="row m-0">
                                            <div class="col-lg-4">
                                                <b class="ul">Year</b>
                                                <div id="chartstorage"></div>
                                            </div>
                                            <div class="col-lg-8">
                                                <b class="ul">Month</b>
                                                <div id="month"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 p-0">
                                <div class="card">
                                    <div class="card-body p-1">
                                        <div class="row m-0">
                                            <div class="col-lg-6">
                                                <b class="ul">Age</b>
                                                <div id="age"></div>
                                            </div>
                                            <div class="col-lg-6">
                                                <b class="ul">Gender</b>
                                                <div id="gender"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row m-0 set-padding">
                            <div class="col-lg-3">
                                <div class="card">
                                    <div class="card-body p-2">
                                        <div class="row m-0">
                                            <div class="col-6 p-0">
                                                <b class="ul">อาการนำมา</b>
                                            </div>
                                            <div class="col-6 p-0 text-right">
                                                <button type="button" class="btn btn-outline-secondary btn-sm">Show All</button>
                                            </div>
                                            <div class="col-12 p-0">
                                                <div id="come"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="card">
                                    <div class="card-body p-2">
                                        <div class="row m-0">
                                            <div class="col-6 p-0">
                                                <b class="ul">ประวัติการเจ็บป่วย</b>
                                            </div>
                                            <div class="col-6 p-0 text-right">
                                                <button type="button" class="btn btn-outline-secondary btn-sm">Show All</button>
                                            </div>
                                            <div class="col-12 p-0">
                                                <div id="Illness"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="card">
                                    <div class="card-body p-2">
                                        <div class="row m-0">
                                            <div class="col-6 p-0">
                                                <b class="ul">ประวัติการใช้ยา</b>
                                            </div>
                                            <div class="col-6 p-0 text-right">
                                                <button type="button" class="btn btn-outline-secondary btn-sm">Show All</button>
                                            </div>
                                            <div class="col-12 p-0">
                                                <div id="medicine"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="card">
                                    <div class="card-body p-2">
                                        <div class="row m-0">
                                            <div class="col-6 p-0">
                                                <b class="ul">ประวัติการทำหัตถการ</b>
                                            </div>
                                            <div class="col-6 p-0 text-right">
                                                <button type="button" class="btn btn-outline-secondary btn-sm">Show All</button>
                                            </div>
                                            <div class="col-12 p-0">
                                                <div id="procedure"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row m-0 set-padding">
                            <div class="col-lg-3">
                                <div class="card h-100">
                                    <div class="card-body p-2">
                                        <div class="row m-0">
                                            <div class="col-6 p-0">
                                                <b class="ul">การแพ้อาหาร</b>
                                            </div>
                                            <div class="col-6 p-0 text-right">
                                                <button type="button" class="btn btn-outline-secondary btn-sm">Show All</button>
                                            </div>
                                            <div class="col-12 p-0">
                                                <div id="food_allergy"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <div class="row m-0">
                                            <div class="col-6 p-0">
                                                <b class="ul">การแพ้ยา</b>
                                            </div>
                                            <div class="col-6 p-0 text-right">
                                                <button type="button" class="btn btn-outline-secondary btn-sm">Show All</button>
                                            </div>
                                            <div class="col-12 p-0">
                                                <div id="drug_allergy"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 p-0 pt-2">
                                <div class="card h-100">
                                    <div class="card-body p-2">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <b class="ul">ดื่มสุรา เเละ สูบบุหรี่</b>
                                                <div id="spirits"></div>
                                            </div>
                                            <div class="col-lg-6">
                                                <b class="ul" style="opacity: 0;">&nbsp;</b>
                                                <div id="cigarette"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade row m-0" id="profile-3" role="tabpanel" aria-labelledby="profile-tab-3">
                        <div class="row m-0">
                            <div class="col-lg-6 p-0 pr-2">
                                <div class="card">
                                    <div class="card-body p-1">
                                        <div class="row m-0">
                                            <div class="col-lg-4">
                                                <b class="ul">Year</b>
                                                <div id="chartstorage2"></div>
                                            </div>
                                            <div class="col-lg-8 ">
                                                <b class="ul">Month</b>
                                                <div id="month2"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 p-0">
                                <div class="card h-100">
                                    <div class="card-body p-1">
                                        <div class="row m-0">
                                            <div class="col-lg-6">
                                                <b class="ul2">Age</b>
                                                <div id="age2"></div>
                                            </div>
                                            <div class="col-lg-6">
                                                <b class="ul2">Gender</b>
                                                <div id="gender2"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row m-0 mt-2 set-padding">
                            <div class="col-lg-6 p-0 pr-2">
                                <div class="card h-100">
                                    <div class="card-body p-1">
                                        <div class="row m-0">
                                            <div class="col-lg-6 p-0">
                                                <div class="row m-0">
                                                    <div class="col-6 p-0 pr-2">
                                                        <b class="ul">Anesthsia</b>
                                                    </div>
                                                    <div class="col-6 p-0 text-right">
                                                        <button type="button" class="btn btn-outline-secondary btn-sm">Show All</button>
                                                    </div>
                                                    <div class="col-12 p-0">
                                                        <div id="anesthsia"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 p-0">
                                                <div class="row m-0">
                                                    <div class="col-6 p-0">
                                                        <b class="ul">Medication</b>
                                                    </div>
                                                    <div class="col-6 p-0 text-right">
                                                        <button type="button" class="btn btn-outline-secondary btn-sm">Show All</button>
                                                    </div>
                                                    <div class="col-12 p-0">
                                                        <div id="medication"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 p-0 pr-2">
                                <div class="card">
                                    <div class="card-body p-1">
                                        <div class="row m-0">
                                            <div class="col-9 p-0">
                                                <b class="ul">Complication (Post-operation)</b>
                                            </div>
                                            <div class="col-3 p-0 text-right">
                                                <button type="button" class="btn btn-outline-secondary btn-sm">Show All</button>
                                            </div>
                                            <div class="col-12 p-0">
                                                <div id="operation"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 p-0">
                                <div class="card">
                                    <div class="card-body p-1">
                                        <div class="row m-0">
                                            <div class="col-9 p-0">
                                                <b class="ul">Complication (Discharage)</b>
                                            </div>
                                            <div class="col-3 p-0 text-right">
                                                <button type="button" class="btn btn-outline-secondary btn-sm">Show All</button>
                                            </div>
                                            <div class="col-12 p-0">
                                                <div id="discharage"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row m-0 mt-2 set-padding">
                            <div class="col-lg-3 p-0 pr-2">
                                <div class="card">
                                    <div class="card-body p-1">
                                        <div class="row m-0">
                                            <div class="col-6 p-0">
                                                <b class="ul">ประวัติการเจ็บป่วย</b>
                                            </div>
                                            <div class="col-6 p-0 text-right">
                                                <button type="button" class="btn btn-outline-secondary btn-sm">Show All</button>
                                            </div>
                                            <div class="col-12 p-0">
                                                <div id="detail_pt"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row m-0 mt-2 bottom-chart active" sub="1">
        <div class="col-lg-3">
            <div class="card">
                <div class="card-body p-1">
                    <b class="ul">การประเมินด้านจิตใจ</b>
                    <div id="assessment"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 p-0">
            <div class="card h-100">
                <div class="card-body p-1">
                    <b class="ul">การประเมินด้านร่างกาย</b>
                    <div id="physical"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="card h-100">
                <div class="card-body p-1">
                    <b class="ul">การประเมินผลตรวจทางห้องทดลอง</b>
                    <div class="row m-0 cn">
                        <div class="col-lg-2 text-center">
                            เคสที่เกินเกณฑ์ <br> 15 %
                        </div>
                        <div class="col-lg-9">
                            <div id="last"></div>
                        </div>
                        <div class="col-lg-1"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('script')
<script src="{{asset('public/js/core.js')}}"></script>
<script src="{{asset('public/js/charts.js')}}"></script>
<script src="{{asset('public/js/animated.js')}}"></script>
<script>
    $("#home-tab-3").click(function(){
        if($(".bottom-chart").attr('sub')!=1){
            $(".bottom-chart").addClass('active')
            $(".bottom-chart").attr('sub',1)
        }
    })
    $("#profile-tab-3").click(function(){
        if($(".bottom-chart").attr('sub')!=2){
            $(".bottom-chart").removeClass('active')
            $(".bottom-chart").attr('sub',2)
        }
    })
</script>


<script>

    am4core.ready(function() {

        // Themes begin
        am4core.useTheme(am4themes_animated);
        // Themes end

        // Create chart instance
        var chart = am4core.create("chartstorage", am4charts.XYChart);

        // Add data
        chart.data = [{
        "country": "2021",
        "visits": 6
        }];

        // Create axes

        var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
        categoryAxis.dataFields.category = "country";
        categoryAxis.renderer.grid.template.location = 0;
        categoryAxis.renderer.minGridDistance = 10;

        categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
        return dy;
        });

        var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

        // Create series
        var series = chart.series.push(new am4charts.ColumnSeries());
        series.dataFields.valueY = "visits";
        series.dataFields.categoryX = "country";
        series.name = "Visits";
        series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
        series.columns.template.fillOpacity = .8;
        series.fill = am4core.color("#83e0db");
        series.stroke = am4core.color("#83e0db");

        var columnTemplate = series.columns.template;
        columnTemplate.strokeWidth = 2;
        columnTemplate.strokeOpacity = 1;

    }); // end am4core.ready()



</script>

<script>
    am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("month", am4charts.XYChart);

    // Add data
    chart.data = [{
      "country": "1",
      "visits": 2025
    }, {
      "country": "2",
      "visits": 1882
    }, {
      "country": "3",
      "visits": 1809
    }, {
      "country": "4",
      "visits": 1322
    }, {
      "country": "5",
      "visits": 1122
    }, {
      "country": "6",
      "visits": 1114
    }, {
      "country": "7",
      "visits": 984
    }, {
      "country": "8",
      "visits": 711
    }, {
      "country": "9",
      "visits": 665
    }, {
      "country": "10",
      "visits": 580
    }, {
      "country": "11",
      "visits": 443
    }, {
      "country": "12",
      "visits": 441
    }];

    // Create axes

    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "country";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.minGridDistance = 30;

    categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
    //   if (target.dataItem && target.dataItem.index & 2 == 2) {
    //     return dy + 25;
    //   }
      return dy;
    });

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "visits";
    series.dataFields.categoryX = "country";
    series.name = "Visits";
    series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
    series.columns.template.fillOpacity = .8;
    series.fill = am4core.color("#83e0db");
    series.stroke = am4core.color("#83e0db");

    var columnTemplate = series.columns.template;
    columnTemplate.strokeWidth = 2;
    columnTemplate.strokeOpacity = 1;

    }); // end am4core.ready()
</script>


<script>
    am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("age", am4charts.XYChart);

    // Add data
    chart.data = [{
      "country": "0-20",
      "visits": 2025
    }, {
      "country": "20-40",
      "visits": 1882
    }, {
      "country": "40-60",
      "visits": 1809
    }, {
      "country": "60-80",
      "visits": 1322
    }, {
      "country": "80+",
      "visits": 1122
    }];

    // Create axes

    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "country";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.minGridDistance = 30;

    categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
    //   if (target.dataItem && target.dataItem.index & 2 == 2) {
    //     return dy + 25;
    //   }
      return dy;
    });

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "visits";
    series.dataFields.categoryX = "country";
    series.name = "Visits";
    series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
    series.columns.template.fillOpacity = .8;
    series.fill = am4core.color("#83e0db");
    series.stroke = am4core.color("#83e0db");

    var columnTemplate = series.columns.template;
    columnTemplate.strokeWidth = 2;
    columnTemplate.strokeOpacity = 1;

    }); // end am4core.ready()
</script>

<script>
    am4core.ready(function() {
    am4core.useTheme(am4themes_animated);
    var chart = am4core.create("gender", am4charts.PieChart);
    chart.data = [
        {
      "country": "F",
      "litres": 2
    },{
      "country": "M",
      "litres": 10
    },

    ];

    // Add and configure Series
    var pieSeries = chart.series.push(new am4charts.PieSeries());
    pieSeries.dataFields.value = "litres";
    pieSeries.dataFields.category = "country";
    pieSeries.slices.template.stroke = am4core.color("#fff");
    pieSeries.slices.template.strokeWidth = 2;
    pieSeries.slices.template.strokeOpacity = 1;
    pieSeries.colors.list = [
        am4core.color("#374649"),
        am4core.color("#83e0db"),
    ];
    // This creates initial animation
    pieSeries.hiddenState.properties.opacity = 1;
    pieSeries.hiddenState.properties.endAngle = -90;
    pieSeries.hiddenState.properties.startAngle = -90;

    }); // end am4core.ready()


</script>

<script>

    am4core.ready(function() {

        // Themes begin
        am4core.useTheme(am4themes_animated);
        // Themes end

        // Create chart instance
        var chart = am4core.create("chartstorage2", am4charts.XYChart);

        // Add data
        chart.data = [{
        "country": "2021",
        "visits": 6
        }];

        // Create axes

        var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
        categoryAxis.dataFields.category = "country";
        categoryAxis.renderer.grid.template.location = 0;
        categoryAxis.renderer.minGridDistance = 10;

        categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
        return dy;
        });

        var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

        // Create series
        var series = chart.series.push(new am4charts.ColumnSeries());
        series.dataFields.valueY = "visits";
        series.dataFields.categoryX = "country";
        series.name = "Visits";
        series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
        series.columns.template.fillOpacity = .8;
        series.fill = am4core.color("#83e0db");
        series.stroke = am4core.color("#83e0db");

        var columnTemplate = series.columns.template;
        columnTemplate.strokeWidth = 2;
        columnTemplate.strokeOpacity = 1;

    }); // end am4core.ready()



</script>

<script>
    am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("month2", am4charts.XYChart);

    // Add data
    chart.data = [{
      "country": "1",
      "visits": 2025
    }, {
      "country": "2",
      "visits": 1882
    }, {
      "country": "3",
      "visits": 1809
    }, {
      "country": "4",
      "visits": 1322
    }, {
      "country": "5",
      "visits": 1122
    }, {
      "country": "6",
      "visits": 1114
    }, {
      "country": "7",
      "visits": 984
    }, {
      "country": "8",
      "visits": 711
    }, {
      "country": "9",
      "visits": 665
    }, {
      "country": "10",
      "visits": 580
    }, {
      "country": "11",
      "visits": 443
    }, {
      "country": "12",
      "visits": 441
    }];

    // Create axes

    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "country";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.minGridDistance = 30;

    categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
    //   if (target.dataItem && target.dataItem.index & 2 == 2) {
    //     return dy + 25;
    //   }
      return dy;
    });

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "visits";
    series.dataFields.categoryX = "country";
    series.name = "Visits";
    series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
    series.columns.template.fillOpacity = .8;
    series.fill = am4core.color("#83e0db");
    series.stroke = am4core.color("#83e0db");

    var columnTemplate = series.columns.template;
    columnTemplate.strokeWidth = 2;
    columnTemplate.strokeOpacity = 1;

    }); // end am4core.ready()
</script>


<script>
    am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("age2", am4charts.XYChart);

    // Add data
    chart.data = [{
      "country": "0-20",
      "visits": 2025
    }, {
      "country": "20-40",
      "visits": 1882
    }, {
      "country": "40-60",
      "visits": 1809
    }, {
      "country": "60-80",
      "visits": 1322
    }, {
      "country": "80+",
      "visits": 1122
    }];

    // Create axes

    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "country";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.minGridDistance = 30;

    categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
    //   if (target.dataItem && target.dataItem.index & 2 == 2) {
    //     return dy + 25;
    //   }
      return dy;
    });

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "visits";
    series.dataFields.categoryX = "country";
    series.name = "Visits";
    series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
    series.columns.template.fillOpacity = .8;
    series.fill = am4core.color("#83e0db");
    series.stroke = am4core.color("#83e0db");

    var columnTemplate = series.columns.template;
    columnTemplate.strokeWidth = 2;
    columnTemplate.strokeOpacity = 1;

    }); // end am4core.ready()
</script>

<script>
    am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("anesthsia", am4charts.XYChart);

    // Add data
    chart.data = [{
      "country": 'Topical',
      "visits": 10
    }, {
      "country": 'IV sedate',
      "visits": 8
    }, {
      "country": 'ET Intube',
      "visits": 6
    }, {
      "country": 'Tracheostmy',
      "visits": 4
    }];

    // Create axes

    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "country";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.minGridDistance = 30;

    categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
    //   if (target.dataItem && target.dataItem.index & 2 == 2) {
    //     return dy + 25;
    //   }
      return dy;
    });

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "visits";
    series.dataFields.categoryX = "country";
    series.name = "Visits";
    series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
    series.columns.template.fillOpacity = .8;
    series.fill = am4core.color("#83e0db");
    series.stroke = am4core.color("#83e0db");

    var columnTemplate = series.columns.template;
    columnTemplate.strokeWidth = 2;
    columnTemplate.strokeOpacity = 1;

    }); // end am4core.ready()
</script>

<script>
    am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("medication", am4charts.XYChart);

    // Add data
    chart.data = [{
      "country": 'Fentany1',
      "visits": 10
    }, {
      "country": 'Fentany2',
      "visits": 8
    }, {
      "country": 'Fentany3',
      "visits": 6
    }, {
      "country": 'Fentany4',
      "visits": 4
    }];

    // Create axes

    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "country";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.minGridDistance = 30;

    categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
    //   if (target.dataItem && target.dataItem.index & 2 == 2) {
    //     return dy + 25;
    //   }
      return dy;
    });

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "visits";
    series.dataFields.categoryX = "country";
    series.name = "Visits";
    series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
    series.columns.template.fillOpacity = .8;
    series.fill = am4core.color("#83e0db");
    series.stroke = am4core.color("#83e0db");

    var columnTemplate = series.columns.template;
    columnTemplate.strokeWidth = 2;
    columnTemplate.strokeOpacity = 1;

    }); // end am4core.ready()
</script>

<script>
    am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("operation", am4charts.XYChart);

    // Add data
    chart.data = [{
      "country": 'None',
      "visits": 10
    }, {
      "country": 'ปวดท้อง',
      "visits": 8
    }, {
      "country": 'ถ่ายเลือด',
      "visits": 4
    }];

    // Create axes

    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "country";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.minGridDistance = 30;

    categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
    //   if (target.dataItem && target.dataItem.index & 2 == 2) {
    //     return dy + 25;
    //   }
      return dy;
    });

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "visits";
    series.dataFields.categoryX = "country";
    series.name = "Visits";
    series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
    series.columns.template.fillOpacity = .8;
    series.fill = am4core.color("#83e0db");
    series.stroke = am4core.color("#83e0db");

    var columnTemplate = series.columns.template;
    columnTemplate.strokeWidth = 2;
    columnTemplate.strokeOpacity = 1;

    }); // end am4core.ready()
</script>

<script>
    am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("discharage", am4charts.XYChart);

    // Add data
    chart.data = [{
      "country": 'None',
      "visits": 10
    }, {
      "country": 'ท้องเสีย',
      "visits": 8
    }, {
      "country": 'แสบคอ',
      "visits": 4
    }];

    // Create axes

    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "country";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.minGridDistance = 30;

    categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
    //   if (target.dataItem && target.dataItem.index & 2 == 2) {
    //     return dy + 25;
    //   }
      return dy;
    });

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "visits";
    series.dataFields.categoryX = "country";
    series.name = "Visits";
    series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
    series.columns.template.fillOpacity = .8;
    series.fill = am4core.color("#83e0db");
    series.stroke = am4core.color("#83e0db");

    var columnTemplate = series.columns.template;
    columnTemplate.strokeWidth = 2;
    columnTemplate.strokeOpacity = 1;

    }); // end am4core.ready()
</script>

<script>
    am4core.ready(function() {
    am4core.useTheme(am4themes_animated);
    var chart = am4core.create("gender2", am4charts.PieChart);
    chart.data = [
        {
      "country": "F",
      "litres": 2
    },{
      "country": "M",
      "litres": 10
    },

    ];

    // Add and configure Series
    var pieSeries = chart.series.push(new am4charts.PieSeries());
    pieSeries.dataFields.value = "litres";
    pieSeries.dataFields.category = "country";
    pieSeries.slices.template.stroke = am4core.color("#fff");
    pieSeries.slices.template.strokeWidth = 2;
    pieSeries.slices.template.strokeOpacity = 1;
    pieSeries.colors.list = [
        am4core.color("#374649"),
        am4core.color("#83e0db"),
    ];
    // This creates initial animation
    pieSeries.hiddenState.properties.opacity = 1;
    pieSeries.hiddenState.properties.endAngle = -90;
    pieSeries.hiddenState.properties.startAngle = -90;

    }); // end am4core.ready()


</script>


<script>
    am4core.ready(function() {
    am4core.useTheme(am4themes_animated);

    var chart = am4core.create("come", am4charts.XYChart);

    chart.data = [{
      "year": 'ปวดท้อง',
      "income": 23.5,
    },{
      "year": 'ถ่ายดำ',
      "income": 26.2,
    },{
      "year": 'มีไข้',
      "income": 24.6,
    }];

    // Create axes
    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "year";
    categoryAxis.numberFormatter.numberFormat = "#";
    categoryAxis.renderer.inversed = true;
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.cellStartLocation = 0.1;
    categoryAxis.renderer.cellEndLocation = 0.9;

    var  valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.opposite = true;

    // Create series
    function createSeries(field, name) {
      var series = chart.series.push(new am4charts.ColumnSeries());
      series.dataFields.valueX = field;
      series.dataFields.categoryY = "year";
      series.name = name;
      series.columns.template.tooltipText = "{name}: [bold]{valueX}[/]";
      series.columns.template.height = am4core.percent(100);
      series.sequencedInterpolation = true;
      series.fill = am4core.color("#83e0db");
      series.stroke = am4core.color("#83e0db");

      var valueLabel = series.bullets.push(new am4charts.LabelBullet());
      valueLabel.label.text = "{valueX}";
      valueLabel.label.horizontalCenter = "left";
      valueLabel.label.dx = 10;
      valueLabel.label.hideOversized = false;
      valueLabel.label.truncate = false;

      var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
      categoryLabel.label.text = "{name}";
      categoryLabel.label.horizontalCenter = "right";
      categoryLabel.label.dx = -10;
      categoryLabel.label.fill = am4core.color("#fff");
      categoryLabel.label.hideOversized = false;
      categoryLabel.label.truncate = false;
    }

    createSeries("income", "");

    }); // end am4core.ready()
</script>

<script>
    am4core.ready(function() {
    am4core.useTheme(am4themes_animated);

    var chart = am4core.create("Illness", am4charts.XYChart);

    chart.data = [{
      "year": 'ปวดท้อง',
      "income": 23.5,
    },{
      "year": 'ถ่ายดำ',
      "income": 26.2,
    },{
      "year": 'มีไข้',
      "income": 24.6,
    }];

    // Create axes
    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "year";
    categoryAxis.numberFormatter.numberFormat = "#";
    categoryAxis.renderer.inversed = true;
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.cellStartLocation = 0.1;
    categoryAxis.renderer.cellEndLocation = 0.9;

    var  valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.opposite = true;

    // Create series
    function createSeries(field, name) {
      var series = chart.series.push(new am4charts.ColumnSeries());
      series.dataFields.valueX = field;
      series.dataFields.categoryY = "year";
      series.name = name;
      series.columns.template.tooltipText = "{name}: [bold]{valueX}[/]";
      series.columns.template.height = am4core.percent(100);
      series.sequencedInterpolation = true;
      series.fill = am4core.color("#83e0db");
      series.stroke = am4core.color("#83e0db");

      var valueLabel = series.bullets.push(new am4charts.LabelBullet());
      valueLabel.label.text = "{valueX}";
      valueLabel.label.horizontalCenter = "left";
      valueLabel.label.dx = 10;
      valueLabel.label.hideOversized = false;
      valueLabel.label.truncate = false;

      var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
      categoryLabel.label.text = "{name}";
      categoryLabel.label.horizontalCenter = "right";
      categoryLabel.label.dx = -10;
      categoryLabel.label.fill = am4core.color("#fff");
      categoryLabel.label.hideOversized = false;
      categoryLabel.label.truncate = false;
    }

    createSeries("income", "");

    }); // end am4core.ready()
</script>

<script>
    am4core.ready(function() {
    am4core.useTheme(am4themes_animated);

    var chart = am4core.create("medicine", am4charts.XYChart);

    chart.data = [{
      "year": 'ปวดท้อง',
      "income": 23.5,
    },{
      "year": 'ถ่ายดำ',
      "income": 26.2,
    },{
      "year": 'มีไข้',
      "income": 24.6,
    }];

    // Create axes
    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "year";
    categoryAxis.numberFormatter.numberFormat = "#";
    categoryAxis.renderer.inversed = true;
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.cellStartLocation = 0.1;
    categoryAxis.renderer.cellEndLocation = 0.9;

    var  valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.opposite = true;

    // Create series
    function createSeries(field, name) {
      var series = chart.series.push(new am4charts.ColumnSeries());
      series.dataFields.valueX = field;
      series.dataFields.categoryY = "year";
      series.name = name;
      series.columns.template.tooltipText = "{name}: [bold]{valueX}[/]";
      series.columns.template.height = am4core.percent(100);
      series.sequencedInterpolation = true;
      series.fill = am4core.color("#83e0db");
      series.stroke = am4core.color("#83e0db");

      var valueLabel = series.bullets.push(new am4charts.LabelBullet());
      valueLabel.label.text = "{valueX}";
      valueLabel.label.horizontalCenter = "left";
      valueLabel.label.dx = 10;
      valueLabel.label.hideOversized = false;
      valueLabel.label.truncate = false;

      var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
      categoryLabel.label.text = "{name}";
      categoryLabel.label.horizontalCenter = "right";
      categoryLabel.label.dx = -10;
      categoryLabel.label.fill = am4core.color("#fff");
      categoryLabel.label.hideOversized = false;
      categoryLabel.label.truncate = false;
    }

    createSeries("income", "");

    }); // end am4core.ready()
</script>

<script>
    am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("procedure", am4charts.XYChart);

    // Add data
    chart.data = [{
      "country": "ผ่าตัด",
      "visits": 100
    }, {
      "country": "ส่องกล้อง",
      "visits": 20
    }];

    // Create axes

    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "country";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.minGridDistance = 30;

    categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
    //   if (target.dataItem && target.dataItem.index & 2 == 2) {
    //     return dy + 25;
    //   }
      return dy;
    });

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "visits";
    series.dataFields.categoryX = "country";
    series.name = "Visits";
    series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
    series.columns.template.fillOpacity = .8;
    series.fill = am4core.color("#83e0db");
    series.stroke = am4core.color("#83e0db");

    var columnTemplate = series.columns.template;
    columnTemplate.strokeWidth = 2;
    columnTemplate.strokeOpacity = 1;

    }); // end am4core.ready()
</script>

<script>
    am4core.ready(function() {
    am4core.useTheme(am4themes_animated);

    var chart = am4core.create("food_allergy", am4charts.XYChart);

    chart.data = [{
      "year": 'กุ้ง',
      "income": 23.5,
    },{
      "year": 'นม',
      "income": 26.2,
    },{
      "year": 'แป้ง',
      "income": 24.6,
    }];

    // Create axes
    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "year";
    categoryAxis.numberFormatter.numberFormat = "#";
    categoryAxis.renderer.inversed = true;
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.cellStartLocation = 0.1;
    categoryAxis.renderer.cellEndLocation = 0.9;

    var  valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.opposite = true;

    // Create series
    function createSeries(field, name) {
      var series = chart.series.push(new am4charts.ColumnSeries());
      series.dataFields.valueX = field;
      series.dataFields.categoryY = "year";
      series.name = name;
      series.columns.template.tooltipText = "{name}: [bold]{valueX}[/]";
      series.columns.template.height = am4core.percent(100);
      series.sequencedInterpolation = true;
      series.fill = am4core.color("#83e0db");
      series.stroke = am4core.color("#83e0db");

      var valueLabel = series.bullets.push(new am4charts.LabelBullet());
      valueLabel.label.text = "{valueX}";
      valueLabel.label.horizontalCenter = "left";
      valueLabel.label.dx = 10;
      valueLabel.label.hideOversized = false;
      valueLabel.label.truncate = false;

      var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
      categoryLabel.label.text = "{name}";
      categoryLabel.label.horizontalCenter = "right";
      categoryLabel.label.dx = -10;
      categoryLabel.label.fill = am4core.color("#fff");
      categoryLabel.label.hideOversized = false;
      categoryLabel.label.truncate = false;
    }

    createSeries("income", "");

    }); // end am4core.ready()
</script>

<script>
    am4core.ready(function() {
    am4core.useTheme(am4themes_animated);

    var chart = am4core.create("drug_allergy", am4charts.XYChart);

    chart.data = [{
      "year": 'Glucosamine',
      "income": 23.5,
    },{
      "year": 'Paracetamol',
      "income": 26.2,
    },{
      "year": 'Fentanyl',
      "income": 24.6,
    }];

    // Create axes
    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "year";
    categoryAxis.numberFormatter.numberFormat = "#";
    categoryAxis.renderer.inversed = true;
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.cellStartLocation = 0.1;
    categoryAxis.renderer.cellEndLocation = 0.9;

    var  valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.opposite = true;

    // Create series
    function createSeries(field, name) {
      var series = chart.series.push(new am4charts.ColumnSeries());
      series.dataFields.valueX = field;
      series.dataFields.categoryY = "year";
      series.name = name;
      series.columns.template.tooltipText = "{name}: [bold]{valueX}[/]";
      series.columns.template.height = am4core.percent(100);
      series.sequencedInterpolation = true;
      series.fill = am4core.color("#83e0db");
      series.stroke = am4core.color("#83e0db");

      var valueLabel = series.bullets.push(new am4charts.LabelBullet());
      valueLabel.label.text = "{valueX}";
      valueLabel.label.horizontalCenter = "left";
      valueLabel.label.dx = 10;
      valueLabel.label.hideOversized = false;
      valueLabel.label.truncate = false;

      var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
      categoryLabel.label.text = "{name}";
      categoryLabel.label.horizontalCenter = "right";
      categoryLabel.label.dx = -10;
      categoryLabel.label.fill = am4core.color("#fff");
      categoryLabel.label.hideOversized = false;
      categoryLabel.label.truncate = false;
    }

    createSeries("income", "");

    }); // end am4core.ready()
</script>

<script>
    am4core.ready(function() {
    am4core.useTheme(am4themes_animated);
    var chart = am4core.create("spirits", am4charts.PieChart);
    chart.data = [
        {
      "country": "ดื่ม",
      "litres": 2
    },{
      "country": "ไม่ดื่ม",
      "litres": 10
    },

    ];

    // Add and configure Series
    var pieSeries = chart.series.push(new am4charts.PieSeries());
    pieSeries.dataFields.value = "litres";
    pieSeries.dataFields.category = "country";
    pieSeries.slices.template.stroke = am4core.color("#fff");
    pieSeries.slices.template.strokeWidth = 2;
    pieSeries.slices.template.strokeOpacity = 1;
    pieSeries.colors.list = [
        am4core.color("#374649"),
        am4core.color("#83e0db"),
    ];
    // This creates initial animation
    pieSeries.hiddenState.properties.opacity = 1;
    pieSeries.hiddenState.properties.endAngle = -90;
    pieSeries.hiddenState.properties.startAngle = -90;

    }); // end am4core.ready()


</script>

<script>
    am4core.ready(function() {
    am4core.useTheme(am4themes_animated);
    var chart = am4core.create("cigarette", am4charts.PieChart);
    chart.data = [
        {
      "country": "สูบ",
      "litres": 2
    },{
      "country": "ไม่สูบ",
      "litres": 10
    },

    ];

    // Add and configure Series
    var pieSeries = chart.series.push(new am4charts.PieSeries());
    pieSeries.dataFields.value = "litres";
    pieSeries.dataFields.category = "country";
    pieSeries.slices.template.stroke = am4core.color("#fff");
    pieSeries.slices.template.strokeWidth = 2;
    pieSeries.slices.template.strokeOpacity = 1;
    pieSeries.colors.list = [
        am4core.color("#374649"),
        am4core.color("#83e0db"),
    ];
    // This creates initial animation
    pieSeries.hiddenState.properties.opacity = 1;
    pieSeries.hiddenState.properties.endAngle = -90;
    pieSeries.hiddenState.properties.startAngle = -90;

    }); // end am4core.ready()


</script>


<script>
    am4core.useTheme(am4themes_animated);

    var chart = am4core.create("assessment", am4charts.XYChart);

    chart.data = [
    {
        category: " ",
        value1: 30,
        value2: 15,
        value3: 10,
    }
    ];

    chart.cursor = new am4charts.XYCursor();

    chart.legend = new am4charts.Legend();
    chart.legend.useDefaultMarker = true;
    chart.legend.valueLabels.template.align = "left";
    chart.legend.valueLabels.template.textAlign = "end";
    var marker = chart.legend.markers.template.children.getIndex(0);
    marker.cornerRadius(12, 12, 12, 12);
    marker.strokeWidth = 2;
    marker.strokeOpacity = 1;
    marker.stroke = am4core.color("#ccc");


    chart.colors.step = 2;

    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "category";
    categoryAxis.renderer.grid.template.location = 10;

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.min = 0;
    valueAxis.renderer.minWidth = 35;

    var series1 = chart.series.push(new am4charts.ColumnSeries());
    series1.columns.template.width = am4core.percent(80);
    series1.columns.template.tooltipText = "{name}: {valueY.value}";
    series1.fill = am4core.color("#83E0DB");
    series1.stroke = am4core.color("#83E0DB");
    series1.name = "ปกติ";
    series1.dataFields.categoryX = "category";
    series1.dataFields.valueY = "value1";
    series1.stacked = true;

    var series2 = chart.series.push(new am4charts.ColumnSeries());
    series2.columns.template.width = am4core.percent(80);
    series2.columns.template.tooltipText = "{name}: {valueY.value}";
    series2.name = "กังวลเล็กน้อย";
    series2.fill = am4core.color("#1F827C");
    series2.stroke = am4core.color("#1F827C");
    series2.dataFields.categoryX = "category";
    series2.dataFields.valueY = "value2";
    series2.stacked = true;

    var series3 = chart.series.push(new am4charts.ColumnSeries());
    series3.columns.template.width = am4core.percent(80);
    series3.columns.template.tooltipText = "{name}: {valueY.value}";
    series3.name = "กังวลมาก";
    series3.fill = am4core.color("#374649");
    series3.stroke = am4core.color("#374649");
    series3.dataFields.categoryX = "category";
    series3.dataFields.valueY = "value3";
    series3.stacked = true;


</script>


<script>
    am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("physical", am4charts.XYChart);

    // Title


    // Add data
    chart.data = [{
        "category": "BP, Pulse",
        "negative2": -0.9,
        "positive2": 94
    }, {
        "category": "งดอาหารเเละน้ำ",
        "negative2": -4,
        "positive2": 75
    }, {
        "category": "ไม่มีฟันปลอม",
        "negative2": -10,
        "positive2": 42
    }, {
        "category": "งดยาสลายลิ่มเลือด",
        "negative2": -13,
        "positive2": 52
    }, {
        "category": "กินยาลดความดัน",
        "negative2": -19,
        "positive2": 41
    }];

    chart.colors.list = [
        am4core.color("#374649"),
        am4core.color("#83E0DB"),
    ];
    // Create axes
    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "category";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.inversed = true;
    categoryAxis.renderer.minGridDistance = 20;
    categoryAxis.renderer.axisFills.template.disabled = false;
    categoryAxis.renderer.axisFills.template.fillOpacity = 0.05;


    var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
    valueAxis.min = -100;
    valueAxis.max = 100;
    valueAxis.renderer.minGridDistance = 50;
    valueAxis.renderer.ticks.template.length = 5;
    valueAxis.renderer.ticks.template.disabled = false;
    valueAxis.renderer.ticks.template.strokeOpacity = 0.4;
    valueAxis.renderer.labels.template.adapter.add("text", function(text) {
      return text + "%";
    })

    // Legend
    chart.legend = new am4charts.Legend();
    chart.legend.position = "right";

    // Use only absolute numbers
    chart.numberFormatter.numberFormat = "#.#s";

    // Create series
    function createSeries(field, name, color) {

      var series = chart.series.push(new am4charts.ColumnSeries());
      series.dataFields.valueX = field;
      series.dataFields.categoryY = "category";
      series.stacked = true;
      series.name = name;
      series.stroke.list = ["#83E0DB","#83E0DB","#83E0DB"];
      series.fill.list = ["#83E0DB","#83E0DB","#83E0DB"];

      var label = series.bullets.push(new am4charts.LabelBullet);
      label.label.text = "{valueX}%";
      label.label.fill = am4core.color("#fff");
      label.label.strokeWidth = 0;
      label.label.truncate = false;
      label.label.hideOversized = true;
      label.locationX = 0.5;
      return series;
    }

    var interfaceColors = new am4core.InterfaceColorSet();
    var positiveColor = interfaceColors.getFor("positive");
    var negativeColor = interfaceColors.getFor("negative");

    createSeries("negative2", "Unlikely", negativeColor);
    createSeries("positive2", "Very often", positiveColor);

    chart.legend.events.on("layoutvalidated", function(event){
      chart.legend.itemContainers.each((container)=>{
        if(container.dataItem.dataContext.name == "Never"){
          container.toBack();
        }
      })
    })

    }); // end am4core.ready()
</script>

<script>
    am4core.ready(function() {

        // Themes begin
        am4core.useTheme(am4themes_animated);
        // Themes end

        // Create chart instance
        var chart = am4core.create("last", am4charts.XYChart);

        // Add data
        chart.data = [ {
        "year": "CBC",
        "europe": 2.5,
        "namerica": 2.5,
        }, {
        "year": "Coagulation",
        "europe": 2.6,
        "namerica": 2.7,

        }, {
        "year": "LFT",
        "europe": 2.8,
        "namerica": 2.9,
        } ];
        chart.colors.list = [
            am4core.color("#83E0DB"),
            am4core.color("#374649"),
        ];
        // Create axes
        var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
        categoryAxis.dataFields.category = "year";
        categoryAxis.renderer.grid.template.location = 0;
        categoryAxis.renderer.minGridDistance = 20;
        categoryAxis.renderer.cellStartLocation = 0.1;
        categoryAxis.renderer.cellEndLocation = 0.9;

        var  valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
        valueAxis.min = 0;

        // Create series
        function createSeries(field, name, stacked) {
        var series = chart.series.push(new am4charts.ColumnSeries());
        series.dataFields.valueY = field;
        series.dataFields.categoryX = "year";
        series.name = name;
        series.columns.template.tooltipText = "{name}: [bold]{valueY}[/]";
        series.stacked = stacked;
        series.columns.template.width = am4core.percent(95);
        }
        createSeries("europe", "Europe", true);
        createSeries("namerica", "North America", true);
        createSeries("asia", "Asia", true);

        // Add legend

    }); // end am4core.ready()
</script>

<script>
    am4core.ready(function() {
    am4core.useTheme(am4themes_animated);

    var chart = am4core.create("detail_pt", am4charts.XYChart);

    chart.data = [{
      "year": 'ปวดท้อง',
      "income": 23.5,
    },{
      "year": 'ถ่ายดำ',
      "income": 26.2,
    },{
      "year": 'มีไข้',
      "income": 24.6,
    }];

    // Create axes
    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "year";
    categoryAxis.numberFormatter.numberFormat = "#";
    categoryAxis.renderer.inversed = true;
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.cellStartLocation = 0.1;
    categoryAxis.renderer.cellEndLocation = 0.9;

    var  valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.opposite = true;

    // Create series
    function createSeries(field, name) {
      var series = chart.series.push(new am4charts.ColumnSeries());
      series.dataFields.valueX = field;
      series.dataFields.categoryY = "year";
      series.name = name;
      series.columns.template.tooltipText = "{name}: [bold]{valueX}[/]";
      series.columns.template.height = am4core.percent(100);
      series.sequencedInterpolation = true;
      series.fill = am4core.color("#83e0db");
      series.stroke = am4core.color("#83e0db");

      var valueLabel = series.bullets.push(new am4charts.LabelBullet());
      valueLabel.label.text = "{valueX}";
      valueLabel.label.horizontalCenter = "left";
      valueLabel.label.dx = 10;
      valueLabel.label.hideOversized = false;
      valueLabel.label.truncate = false;

      var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
      categoryLabel.label.text = "{name}";
      categoryLabel.label.horizontalCenter = "right";
      categoryLabel.label.dx = -10;
      categoryLabel.label.fill = am4core.color("#fff");
      categoryLabel.label.hideOversized = false;
      categoryLabel.label.truncate = false;
    }

    createSeries("income", "");

    }); // end am4core.ready()
</script>
@endsection