Chartjs-Javascript count daily occurrencies from a datatable for the creation of a linechart

by

0👍

You need to loop through your table and build an array object like {day1:value1, day2:value2, etc.}

    arrayOfOccurrencies = {};

// A class selector will be better but you don't have it in your example
    $("td:nth-child(4)").each(function(){
      day = $(this).html();

      // If it's the first occurence we initialise it to 0
      if(typeof arrayOfOccurrencies[day] == "undefined"){
        arrayOfOccurrencies[day] = 0;
      }
      
      arrayOfOccurrencies[day] += 1;
    })

    //console.log(arrayOfOccurrencies);

    // To display arrayOfOccurrencies you just need to loop and do what you want 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="datatable">
  <thead>
    <tr>
      <th>Id</th>
      <th>software name</th>
      <th>windows version</th>
      <th>2020-09-01</th>
    </tr>
  </thead>


  <tbody>

    <tr>
      <td>Id</td>
      <td>software 1</td>
      <td>win10</td>
      <td>2020-09-01</td>
    </tr>

    <tr>
      <td>Id</td>
      <td>software 1</td>
      <td>winXp</td>
      <td>2020-09-02</td>
    </tr>

    <tr>
      <td>Id</td>
      <td>software 2</td>
      <td>win7</td>
      <td>2020-09-03</td>
    </tr>

    <tr>
      <td>Id</td>
      <td>software 3</td>
      <td>win10</td>
      <td>2020-09-04</td>
    </tr>

    <tr>
      <td>Id</td>
      <td>software 3</td>
      <td>winXp</td>
      <td>2020-09-04</td>
    </tr>

    <tr>
      <td>Id</td>
      <td>software 4</td>
      <td>win10</td>
      <td>2020-09-05</td>
    </tr>

    <tr>
      <td>Id</td>
      <td>software 2</td>
      <td>winVista</td>
      <td>2020-09-06</td>
    </tr>

    <tr>
      <td>Id</td>
      <td>software 4</td>
      <td>win10</td>
      <td>2020-09-06</td>
    </tr>

    <tr>
      <td>Id</td>
      <td>software 4</td>
      <td>win7</td>
      <td>2020-09-06</td>
    </tr>
    <tr>
      <td>Id</td>
      <td>software 1</td>
      <td>win10</td>
      <td>2020-09-07</td>
    </tr>

    <tr>
      <td>Id</td>
      <td>software 4</td>
      <td>winXp</td>
      <td>2020-09-07</td>
    </tr>

  </tbody>
</table>

To loop and get elements I use JQuery but you can use whatever you want.

However I think it will be easier for you to count day occurencies when you build your table from json.

Leave a comment