charting.html

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="description"
      content="Indonesian NLP Data Catalogue"
    />
    <title>IndoNLP | Data Catalogue</title>
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="assets/images/favicons/favicon.ico"
    />
    <!-- Fonts -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
    />
    <!-- Style -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css"
    />
    <link href="assets/style/style.min.css" rel="stylesheet" />
  </head>
  <body>
    <main class="main">
      <!-- Navbar section -->
      <div id ="nav-placeholder"></div>
      <!-- END Navbar Section -->

      <!-- Table section -->
      <section
        style="
          background: linear-gradient(180deg, #fffefc -54.51%, #fff8f0 99.98%);
        "
        id="home"
      >
        <div class="container">
          <div class="table-section py-4">
            <div class="fa-3x loading-spinner">
              <h5 class="text-center">
                Fetching data <i class="fas fa-spinner fa-pulse"></i>
              </h5>
            </div>

            <div class="dropdown">
              <select id="myDropdown">
                <option value="" selected disabled>Select Attribute</option>
                <option value="Year">Year</option>
                <option value="Language">Language</option>
                <option value="Tasks">Tasks</option>
                <option value="Access">Access</option>
                <option value="Domain">Domains</option>
                <option value="License">Licenses</option>
                <!-- <option value="Dialect">Dialects</option> -->
                <option value="Form">Forms</option>
                <option value="Ethical Risks">Ethical Risks</option>
              </select>
            </div>
            
            
            <div>
              <canvas id="myChart" style="height: 80vh; padding-top:5vh; padding-bottom:5vh;"></canvas>
            </div>
            
            <div id="chartdiv"></div>
          </div>
        </div>
      </section>
      <!-- END Table Section -->
      
    </main>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
      integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
      crossorigin="anonymous"
    ></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
      integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
      crossorigin="anonymous"
    ></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/map.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script type="text/javascript" src="palette.js"></script>
    <script type="text/javascript" src="amcharts.js"></script>
    <script type="text/javascript" src="charting.js"></script>
    <script>
    $.get("navigation.html", function(data){
        $("#nav-placeholder").replaceWith(data);
    });
</script>

  </body>
</html>