{"id":1214,"date":"2025-09-10T11:02:52","date_gmt":"2025-09-10T04:02:52","guid":{"rendered":"https:\/\/jariyathum.ac.th\/?page_id=1214"},"modified":"2025-09-10T11:16:40","modified_gmt":"2025-09-10T04:16:40","slug":"graph-list","status":"publish","type":"page","link":"https:\/\/jariyathum.ac.th\/?page_id=1214","title":{"rendered":"Graph list"},"content":{"rendered":"\n
<\/summary>\n

<\/p>\n<\/details>\n\n\n\n\n\n\n \n \n \u0e01\u0e23\u0e32\u0e1f\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chartjs-plugin-datalabels@2.2.0\/dist\/chartjs-plugin-datalabels.min.js\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.datatables.net\/1.11.5\/css\/jquery.dataTables.min.css\">\n <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\n <script src=\"https:\/\/cdn.datatables.net\/1.11.5\/js\/jquery.dataTables.min.js\"><\/script>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\n <link rel=\"stylesheet\" href=\"css\/style.css\">\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n <style>\n .container { width: 90%; margin: auto; max-width: 1200px; }\n .block { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 10px; background: #f9f9f9; }\n h4 {\n text-align: center;\n color: #007bff;\n margin-bottom: 15px;\n line-height: 1.3;\n }\n \/* Style for chart container to control height *\/\n .chart-container {\n position: relative;\n height: 450px;\n width: 100%;\n }\n @media (max-width: 768px) {\n .container { width: 100%; padding: 5px; }\n .chart-container {\n height: 300px; \/* Adjust height for smaller screens *\/\n }\n \/* \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e02\u0e19\u0e32\u0e14\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2b\u0e31\u0e27\u0e15\u0e32\u0e23\u0e32\u0e07\u0e41\u0e25\u0e30\u0e40\u0e0b\u0e25\u0e25\u0e4c\u0e15\u0e32\u0e23\u0e32\u0e07 *\/\n #studentTable th, #studentTable td,\n #departmentTable th, #departmentTable td,\n #attendanceTable th, #attendanceTable td {\n font-size: 14px; \/* \u0e02\u0e19\u0e32\u0e14\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23\u0e17\u0e35\u0e48\u0e41\u0e19\u0e30\u0e19\u0e33\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d *\/\n padding: 8px; \/* \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e23\u0e30\u0e22\u0e30\u0e2b\u0e48\u0e32\u0e07\u0e20\u0e32\u0e22\u0e43\u0e19\u0e40\u0e0b\u0e25\u0e25\u0e4c\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e2d\u0e48\u0e32\u0e19\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19 *\/\n }\n\n \/* \u0e1b\u0e23\u0e31\u0e1a\u0e02\u0e19\u0e32\u0e14\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e48\u0e27\u0e19\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e02\u0e2d\u0e07 DataTables (\u0e40\u0e0a\u0e48\u0e19 \u0e08\u0e33\u0e19\u0e27\u0e19\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23, \u0e01\u0e32\u0e23\u0e04\u0e49\u0e19\u0e2b\u0e32, \u0e40\u0e25\u0e02\u0e2b\u0e19\u0e49\u0e32) *\/\n .dataTables_wrapper .dataTables_info,\n .dataTables_wrapper .dataTables_length,\n .dataTables_wrapper .dataTables_filter,\n .dataTables_wrapper .dataTables_paginate {\n font-size: 13px; \/* \u0e40\u0e25\u0e47\u0e01\u0e25\u0e07\u0e40\u0e25\u0e47\u0e01\u0e19\u0e49\u0e2d\u0e22\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e48\u0e27\u0e19\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21 *\/\n }\n }\n\n \n <\/style>\n \n\n<\/head>\n<body>\n <h2>\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e22\u0e01\u0e15\u0e32\u0e21\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e0a\u0e31\u0e49\u0e19<\/h2>\n<div class=\"chart-container\">\n <canvas id=\"studentChart\"><\/canvas>\n<\/div>\n <script>\n const ctx = document.getElementById('studentChart').getContext('2d');\n const studentChart = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['\u0e2d\u0e19\u0e38\u0e1a\u0e32\u0e25', '\u0e1b\u0e23\u0e30\u0e16\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32', '\u0e21\u0e31\u0e18\u0e22\u0e21\u0e15\u0e49\u0e19', '\u0e21\u0e31\u0e18\u0e22\u0e21\u0e1b\u0e25\u0e32\u0e22'],\n datasets: [\n {\n label: '\u0e0a\u0e32\u0e22',\n data: [56, 204, 562, 398],\n backgroundColor: 'rgba(54, 162, 235, 0.8)'\n },\n {\n label: '\u0e2b\u0e0d\u0e34\u0e07',\n data: [49, 183, 503, 451],\n backgroundColor: 'rgba(255, 99, 132, 0.8)'\n }\n ]\n },\n options: {\n plugins: {\n title: {\n display: true,\n text: '\u0e01\u0e23\u0e32\u0e1f\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 (Stacked Bar Chart)'\n },\n tooltip: {\n mode: 'index',\n intersect: false\n }\n },\n responsive: true,\n interaction: {\n mode: 'index',\n intersect: false\n },\n scales: {\n x: {\n stacked: true\n },\n y: {\n stacked: true,\n beginAtZero: true,\n title: {\n display: true,\n text: '\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19'\n }\n }\n }\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e01\u0e23\u0e32\u0e1f\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e41\u0e22\u0e01\u0e15\u0e32\u0e21\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e0a\u0e31\u0e49\u0e19<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1214","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jariyathum.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jariyathum.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jariyathum.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jariyathum.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jariyathum.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1214"}],"version-history":[{"count":7,"href":"https:\/\/jariyathum.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1214\/revisions"}],"predecessor-version":[{"id":1224,"href":"https:\/\/jariyathum.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1214\/revisions\/1224"}],"wp:attachment":[{"href":"https:\/\/jariyathum.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}