Как сделать диаграмму по таблице?

Question

у меня есть программа с 2 таблицами, вторая таблица создается из 1, мне ещё нужен сделать диаграмму на основе 2 таблицы, как можно это сделат с использованием JavaScript или jQuery? Если никак, то может порекомендуете библиотеки.

Программа: https://codepen.io/kapets666/pen/VwROwWe

<!DOCTYPE html>
<html>
<head>
  <title>Фильтр заявок</title>
</head>
<body>
  <h2>Фильтр заявок</h2>

  <input type="text" id="mashine" placeholder="Введите номер станка">
  <input type="text" id="priority" placeholder="Введите приоритет заявки">
  <input type="text" id="plot" placeholder="Введите Участок">
  <button onclick="filterTable()">Фильтровать</button>
  
  <table  id="requests" border="1">
    <caption>Таблица заявок</caption>
    <tr>
      <th>Инвентарный номер станка</th>
      <th>Приоритет заявки</th>
      <th>Участок</th>
      <th>Дата создания заявки</th>
      <th>Дата закрытия заявки</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Красная</td>
      <td>1</td>
      <td>2024-01-01</td>
      <td>2024-05-01</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Зеленая</td>
        <td>5</td>
        <td>2024-01-01</td>
        <td>2024-05-02</td>
      </tr>
    <tr>
      <td>2</td>
      <td>Зеленая</td>
      <td>4</td>
      <td>2024-02-01</td>
      <td>2024-02-01</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Серая</td>
      <td>4</td>
      <td>2024-02-02</td>
      <td>2024-06-02</td>
    </tr>
  </table>
  <br>
  
  <label for="fromDate">От:</label>
  <input type="date" id="fromDate">
  <label for="toDate">До:</label>
  <input type="date" id="toDate">
  <button onclick="filterRequests()">Отфильтровать</button>
  <br><br>
  
  <table id="filteredRequests" border="1">
    <caption>Таблица отфильтрованных заявок</caption>
  </table>
</body>
<script src="main.js"></script>
</html>

function filterTable() {
  var inputMashine = document.getElementById("mashine").value.toUpperCase();
  var inputPriority = document.getElementById("priority").value.toUpperCase();
  var inputPlot = document.getElementById("plot").value.toUpperCase();
  var table = document.getElementById("requests");
  var tr = table.getElementsByTagName("tr");

  for (var i = 1; i < tr.length; i++) {
    var tdMashine = tr[i].getElementsByTagName("td")[0];
    var tdPriority = tr[i].getElementsByTagName("td")[1];
    var tdPlot = tr[i].getElementsByTagName("td")[2];
    if (tdMashine && tdPriority && tdPlot) {
      var mashine = tdMashine.textContent.toUpperCase();
      var priority = tdPriority.textContent.toUpperCase();
      var plot = tdPlot.textContent.toUpperCase();
      if (mashine.includes(inputMashine) && priority.includes(inputPriority) && plot.includes(inputPlot)) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}


function filterRequests() {

    var inputMashine = document.getElementById("mashine").value.toUpperCase();
    var inputPriority = document.getElementById("priority").value.toUpperCase();
    var inputPlot = document.getElementById("plot").value.toUpperCase();
    var table = document.getElementById("requests");
    var tr = table.getElementsByTagName("tr");

    


    var fromDate = document.getElementById("fromDate").value;
    var toDate = document.getElementById("toDate").value;
    var requests = document.getElementById("requests");
    var filteredRequests = document.getElementById("filteredRequests");
    
    var rows = requests.rows;
    var filteredRows = [];

    var filteredRowsTwo = [];

    


    var fromDate = document.getElementById("fromDate").value;
    var toDate = document.getElementById("toDate").value;
    var requests = document.getElementById("requests");
    var filteredRequests = document.getElementById("filteredRequests");
    
    var rows = requests.rows;
    var filteredRows = [];

    var filteredRowsTwo = [];



    for (var i = 1; i < tr.length; i++) {
      var tdMashine = tr[i].getElementsByTagName("td")[0];
      var tdPriority = tr[i].getElementsByTagName("td")[1];
      var tdPlot = tr[i].getElementsByTagName("td")[2];
      if (tdMashine && tdPriority && tdPlot) {
        var mashine = tdMashine.textContent.toUpperCase();
        var priority = tdPriority.textContent.toUpperCase();
        var plot = tdPlot.textContent.toUpperCase();
        if (mashine.includes(inputMashine) && priority.includes(inputPriority) && plot.includes(inputPlot)) {
            filteredRowsTwo.push(rows[i]);
        } 
      }
    }
    
    for (var i = 0; i < filteredRowsTwo.length; i++) {
      var date = filteredRowsTwo[i].cells[3].innerHTML;
      if (date >= fromDate && date <= toDate) {
        filteredRows.push(filteredRowsTwo[i]);
      }
    }
    
    filteredRequests.innerHTML = '<tr><th>Дата</th><th>Вид заявки</th><th>Количество заявок</th></tr>';
    
    var counts = {};
    for (var i = 0; i < filteredRows.length; i++) {
      var date = filteredRows[i].cells[3].innerHTML;
      var requestType = filteredRows[i].cells[1].innerHTML;
      counts[date + requestType] = (counts[date + requestType] || 0) + 1;
    }
    
    for (var key in counts) {
      var date = key.substring(0, 10);
      var requestType = key.substring(10);
      filteredRequests.innerHTML += '<tr><td>' + date + '</td><td>' + requestType + '</td><td>' + counts[key] + '</td></tr>';
    }
  }

Диаграмма должна выглядеть вот так:

Снизу даты, слева количество заявок, так же желательно, чоб на диаграмме были числа с количеством заявок данного вида

БЛОГ НА HUSL

Как сделать диаграмму по таблице?

Ответы (0 шт):