<!DOCTYPE html>
<!--
Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Dribbble: www.dribbble.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: https://1.envato.market/EA4JP
Renew Support: https://1.envato.market/EA4JP
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<html lang="en">
<!--begin::Head-->

<head>
    <base href="">
    <meta charset="utf-8" />
    <title>Metronic | Dashboard</title>
    <meta name="description" content="Updates and statistics" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!--begin::Fonts-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
    <!--end::Fonts-->

    <!--begin::Page Vendors Styles(used by this page)-->
    <link href="../assets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
    <!--end::Page Vendors Styles-->


    <!--begin::Global Theme Styles(used by all pages)-->
    <link href="../assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
    <link href="../assets/plugins/custom/prismjs/prismjs.bundle.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
    <!--end::Global Theme Styles-->

    <!--begin::Layout Themes(used by all pages)-->

    <link href="../assets/css/themes/layout/header/base/light.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/themes/layout/header/menu/light.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/themes/layout/brand/dark.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/themes/layout/aside/dark.css" rel="stylesheet" type="text/css" />
    <!--end::Layout Themes-->

    <link rel="shortcut icon" href="../assets/media/logos/favicon.ico" />

    <style>
        body{
            background-color: white;
        }

        #main_001 {
            height: 400px;
            /* overflow-x: scroll; */
            width: "100%";
        }

        #main_002 {
            height: 400px;
            /* overflow-x: scroll; */
            width: "100%";
        }

        #main_003 {
            height: 400px;
            /* overflow-x: scroll; */
            width: "100%";
        }

        .title {
            font-size:20px;
            font-weight: bold;
        }

        @media (max-width: 767px) {
            .title {
                font-size: 20px;
                font-weight: bold; 
            }
        }
    </style>

</head>
<!--end::Head-->

<!--begin::Body-->

<body id="kt_body"
    class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading">
    
    <!-- title -->
    <div class="row justify-content-center mb-3 mt-3">
        <div class="col-lg-8 col-xxl-8 col-md-10 text-center">
            <p class="title">Data Kepesertaan MCU</p>
        </div>
    </div>
    <!-- title -->
    
    <div class="row justify-content-center">
        <div class="col-lg-8 col-xxl-8 col-md-10 text-center" style="margin-bottom: 40px;">
            <div id="main_001" class="mx-auto"></div>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8 col-xxl-8 col-md-10 text-center" style="margin-top: 40px;">
            <div id="main_002"></div>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8 col-xxl-8 col-md-10 text-center" style="margin-top: 40px;">
            <div id="main_003"></div>
        </div>
    </div>

    <script>var HOST_URL = "https://preview.keenthemes.com/metronic/theme/html/tools/preview";</script>
    <!--begin::Global Config(global config for global JS scripts)-->
    <script>
        var KTAppSettings = {
            "breakpoints": {
                "sm": 576,
                "md": 768,
                "lg": 992,
                "xl": 1200,
                "xxl": 1400
            },
            "colors": {
                "theme": {
                    "base": {
                        "white": "#ffffff",
                        "primary": "#3699FF",
                        "secondary": "#E5EAEE",
                        "success": "#1BC5BD",
                        "info": "#8950FC",
                        "warning": "#FFA800",
                        "danger": "#F64E60",
                        "light": "#E4E6EF",
                        "dark": "#181C32"
                    },
                    "light": {
                        "white": "#ffffff",
                        "primary": "#E1F0FF",
                        "secondary": "#EBEDF3",
                        "success": "#C9F7F5",
                        "info": "#EEE5FF",
                        "warning": "#FFF4DE",
                        "danger": "#FFE2E5",
                        "light": "#F3F6F9",
                        "dark": "#D6D6E0"
                    },
                    "inverse": {
                        "white": "#ffffff",
                        "primary": "#ffffff",
                        "secondary": "#3F4254",
                        "success": "#ffffff",
                        "info": "#ffffff",
                        "warning": "#ffffff",
                        "danger": "#ffffff",
                        "light": "#464E5F",
                        "dark": "#ffffff"
                    }
                },
                "gray": {
                    "gray-100": "#F3F6F9",
                    "gray-200": "#EBEDF3",
                    "gray-300": "#E4E6EF",
                    "gray-400": "#D1D3E0",
                    "gray-500": "#B5B5C3",
                    "gray-600": "#7E8299",
                    "gray-700": "#5E6278",
                    "gray-800": "#3F4254",
                    "gray-900": "#181C32"
                }
            },
            "font-family": "Poppins"
        };
    </script>
    <!--end::Global Config-->

    <!--begin::Global Theme Bundle(used by all pages)-->
    <script src="../assets/plugins/global/plugins.bundle.js"></script>
    <script src="../assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
    <script src="../assets/js/scripts.bundle.js"></script>
    <!--end::Global Theme Bundle-->

    <!--begin::Page Vendors(used by this page)-->
    <script src="../assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
    <!--end::Page Vendors-->

    <!--begin::Page Scripts(used by this page)-->
    <script src="../assets/js/pages/widgets.js"></script>
    <!--end::Page Scripts-->

    <!-- echartjs.min.js -->
    <script src="../assets/js/echarts-js/echart.min.js"></script>

    <!-- SCRIPT -->
    <script type="text/javascript">
        // Initialize the echarts instance based on the prepared dom
        var myChart_001 = echarts.init(document.getElementById('main_001'));
        var option_001 = {
            title: {
                text: 'Status Index Massa Tubuh (BMI)',
            //  subtext: 'Berdasarkan Umur',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: 'bottom',
                left: 'center',
                orient:'vertical'
            },
            series: [
                {
                    label: {
                        'position':'inner',
                        'formatter': '{d}%'
                    },
                    name: 'Access From',
                    type: 'pie',
                    radius: ['20%', '50%'],
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    data: [
                        { value: 19, name: ' Underweight : 19 Peserta' },
                        { value: 104, name: 'Normal : 104 Peserta' } ,
                        { value: 230, name: 'Obese 1  : 230 Peserta' } ,
                        { value: 99, name: 'Obese 2 : 99 Peserta' }  
                    ],
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        var myChart_002 = echarts.init(document.getElementById('main_002'));
        var option_002 = {
            title: {
                text: 'Kriteria Hipertensi',
                //  subtext: 'Berdasarkan Umur',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: 'bottom',
                left: 'center',
                orient:'vertical'
            },
            series: [
                {
                    label: {
                        'position':'inner',
                        'formatter': '{d}%'
                    },
                    name: 'Access From',
                    type: 'pie',
                    radius: ['20%', '50%'],
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    data: [
                        { value: 237, name: ' Normal : 237 Peserta' },
                        { value: 215, name: 'Prehipertensi : 215 Peserta' } ,
                        { value: 66, name: 'Hipertensi Grade I  : 66 Peserta' } ,
                        { value: 33, name: 'Hipertensi Grade II : 33 Peserta' }  
                    ],
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        var myChart_003 = echarts.init(document.getElementById('main_003'));
        var option_003 = {
            title: {
                text: 'Visus Jauh',
                //  subtext: 'Berdasarkan Umur',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: 'bottom',
                left: 'center',
                orient:'vertical'
            },
            series: [
                {
                    label: {
                        'position':'inner',
                        'formatter': '{d}%'
                    },
                    name: 'Access From',
                    type: 'pie',
                    radius: ['20%', '50%'],
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    data: [
                        { value: 237, name: ' Normal : 237 Peserta' },
                        { value: 194, name: 'Kelainan Refraksi : 194 Peserta' } ,
                        { value: 64, name: 'Kelainan Refraksi terkoreksi : 64 Peserta' } ,
                        { value: 56, name: 'Kelainan Refraksi tidak terkoreksi : 56 Peserta' }  
                    ],
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        window.addEventListener('resize', function() {
            myChart_001.resize();
            myChart_002.resize();
            myChart_003.resize();
        });

        // Display the chart using the configuration items and data just specified.
        myChart_001.setOption(option_001);
        myChart_002.setOption(option_002);
        myChart_003.setOption(option_003);
    </script>
    <!-- SCRIPT -->
</body>
<!--end::Body-->

</html>