How can i show the content of my map object with Charts.js?


#1

I have a map object: As you can see it is nesting by year-month-day.

I would like to create a bar chart where you can see those numbers for “Keszeg”, “Ponty”…etc based on the year-month-day.
Anyone have an idea how could i rewrite this code?
K%C3%A9pkiv%C3%A1g%C3%A1s

this.barChart = new Chart(this.barCanvas.nativeElement, {
      
                 type: 'bar',
                 data: {
                     labels: ???,
                     datasets: [{
                         label: '# of catches',
                         data: ???,
                         backgroundColor: [
                             'rgba(255, 99, 132, 0.2)',
                             'rgba(54, 162, 235, 0.2)',
                             'rgba(255, 206, 86, 0.2)',
                             'rgba(75, 192, 192, 0.2)',
                             'rgba(153, 102, 255, 0.2)',
                             'rgba(255, 159, 64, 0.2)'
                         ],
                         borderColor: [
                             'rgba(255,99,132,1)',
                             'rgba(54, 162, 235, 1)',
                             'rgba(255, 206, 86, 1)',
                             'rgba(75, 192, 192, 1)',
                             'rgba(153, 102, 255, 1)',
                             'rgba(255, 159, 64, 1)'
                         ],
                         borderWidth: 1
                     }]
                 },
                 options: {
                     scales: {
                         yAxes: [{
                             ticks: {
                                 beginAtZero:true
                             }
                         }]
                     }
                 }
      
             });

This is how i created the map object if it is needed:

      let sulySumMap = _data.map((item, index) => {
        var n = new Date(item.datum);
        return {

          ev: n.getFullYear(),
          honap: n.getMonth() + 1,
          nap: n.getDate(),
          suly: item.suly,
          halfaj: item.halfaj,
          eteto: item.etetoanyag1,
          csali: item.hasznaltcsali,
          helyszin: item.helyszin
        }

      });
      var sulySumByDate = d3.nest()
        .key(function (d) {
          return d.ev;
        })
        .key(function (d) {
          return d.honap;
        })
        .key(function (d) {
          return d.nap;
        })
        .key(function (d) {
          return d.halfaj;
        })
        .rollup(function (values) {
          return d3.sum(values, function (d) {
            return parseInt(d.suly);
          });
        })
        .map(sulySumMap)
      this.sulyhavonta=sulySumByDate;