| <!doctype html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta content="IE=edge" http-equiv="X-UA-Compatible">
|
| <meta content="width=device-width, initial-scale=1" name="viewport">
|
| <title>WD Data Sets 04</title>
|
| <link href="https://playground.anychart.com/dRg7KVzn/iframe" rel="canonical">
|
| <meta content="Bar Chart,Column Chart,Line Chart,Spline Chart" name="keywords">
|
| <meta content="AnyChart - JavaScript Charts designed to be embedded and integrated" name="description">
|
| |
| |
| |
|
|
| <link href="_deps/cdn.anychart.com/releases/8.14.0/css/anychart-ui.min_qe95e7e741b.css" rel="stylesheet" type="text/css">
|
| <style>html, body, #container {
|
| width: 100%;
|
| height: 100%;
|
| margin: 0;
|
| padding: 0;
|
| }</style>
|
| </head>
|
| <body>
|
| <div id="container"></div>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.0/js/anychart-base.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.0/js/anychart-exports.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.0/js/anychart-ui.min_qe95e7e741b.js"></script>
|
| <script type="text/javascript">anychart.onDocumentReady(function () {
|
| var csv = `
|
| Parameter Makroskopis Bau Warna Viskositas Waktu Likuifaksi pH Volume Kuantitas Sperma Konsentrasi (juta/ml) Jumlah total (juta/ejakulat) Gerakan Sperma Progressif (PR) Non-Progresif (NP) Imotil PR+NP Morfologi Normal
|
| 10 Agustus 2023 Khas Putih mutiara 1 20 7.9 2.3 16.29 37.47 14 66 21 80 1
|
| 21 September 2023 Khas Putih mutiara 1 25 7.9 3.6 4.47 16.09 21 42 37 63 0
|
| 27 Juli 2024 Khas Bening 1 33 7.9 2.4 11.45 27.48 0 11 89 11 0
|
| 21 Agustus 2025 Khas Putih mutiara <2 60 7.5 4.2 8.11 34.06 22 15 63 37 1
|
| 25 September 2025 Khas Putih mutiara <2 50 7.5 2.5 11.25 31.5 30 11 59 41 1
|
| 29 Oktober 2025 Khas Putih mutiara <2 60 7.5 2.4 1.38 3.31 14 8 78 22 1
|
| 13 Desember 2025 Khas Putih mutiara <2 45 8 3.3 8.9 29.5 11 8 81 19 0
|
| `;
|
|
|
| var rows = csv.trim().split(/\n/).map(row=> row.split(/\t/));
|
| var header = rows[0];
|
| var val = rows.filter((r,i) => i!==0)
|
| console.log(val)
|
|
|
|
|
| var data = [
|
| ...val
|
|
|
|
|
|
|
|
|
| ];
|
|
|
|
|
| var dataSet = anychart.data.set(data);
|
|
|
|
|
|
|
|
|
|
|
|
|
| var chart = anychart.line();
|
|
|
|
|
| var colors=[,,,,,"#E53F40","#22AB68","#7461BC","#11DAD3", "#356CC8", "#4D3952","#015E24","#962253"]
|
| var excludes = [1,8,11,16];
|
| for (let i=5; i < header.length; i++) {
|
| if (excludes.includes(i)) continue;
|
| let series1 = chart.spline(dataSet.mapAs({x: 0, value: i}));
|
| series1.name(header[i])
|
| series1.color(colors[i])
|
| }
|
|
|
|
|
|
|
|
|
| chart.title("Hasil Analisis Sperma");
|
| chart.legend(true);
|
|
|
|
|
| chart.container("container");
|
|
|
|
|
| chart.draw();
|
| });</script>
|
| </body>
|
| </html> |
