CINXE.COM
Survei Layanan yang Digunakan
<!DOCTYPE html> <html> <head> <title>Survei Layanan yang Digunakan</title> <meta charset="utf-8"> <style> html{ font:75% Arial, Helvetica, sans-serif; } </style> <link href="js/kendoui/styles/kendo.common.min.css" rel="stylesheet"> <link href="js/kendoui/styles/kendo.default.min.css" rel="stylesheet"> <link href="js/kendoui/styles/kendo.default.mobile.min.css" rel="stylesheet"> <link href="js/kendoui/styles/kendo.metro.min.css" rel="stylesheet"> <link href="js/kendoui/styles/kendo.dataviz.min.css" rel="stylesheet"> <link href="js/kendoui/styles/kendo.dataviz.metro.min.css" rel="stylesheet"> <script src="js/kendoui/js/jquery.min.js"></script> <script src="js/kendoui/js/kendo.custom.min.js"></script> </head> <body style="margin: 0px"> <div class="chart-wrapper"> <div id="chart"></div> </div> <script> function createChart() { $("#chart").kendoChart({ theme: "metro", renderAs: "svg", "title": { visible: true, position: "top", align: "center", text: "Survei Layanan yang Digunakan" }, chartArea: {"background":"","height":600}, legend: { visible: true, position: "left" }, seriesDefaults: { labels: { visible: true, template: "#= kendo.format('{0:P}', percentage)#", align: "circle", position: "outsideEnd" } }, series: [{ type: "pie", startAngle: 90, data: [{"category":"Layanan Penerjemahan","value":6.06,"entry":2},{"category":"Layanan UKBI","value":42.42,"entry":14},{"category":"Layanan Penyediaan Bahan Ajar BIPA Berbasis Multimedia untuk Keperluan Nonkomersil","value":12.12,"entry":4},{"category":"Layanan Penyediaan Pengiriman Tenaga Pengajar BIPA dari Indonesia","value":3.03,"entry":1},{"category":"Layanan Penyediaan Penugasan Tenaga BIPA secara Daring","value":0,"entry":0},{"category":"Layanan Penyediaan Penugasan Tenaga Pengajar Lokal BIPA","value":3.03,"entry":1},{"category":"Layanan Penyediaan Tenaga Instruktur Pelatihan BIPA untuk Luar Negeri","value":6.06,"entry":2},{"category":"Layanan Ahli Bahasa","value":27.27,"entry":9}] }], tooltip: { visible: true, template: "#= category # - #= dataItem.entry # entries" } }); } $(document).ready(createChart); $(window).on("resize", function() { kendo.resize($(".chart-wrapper")); }); </script></body> </html>