Visualising my mapped 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. My code is ready but i can’t get it working. At this part i am getting undefinied error for the yearVal.entries.

This is the sulyhavonta.entries:
K%C3%A9pkiv%C3%A1g%C3%A1s

for (let [yearKey, yearVal] of sulyhavonta.entries()) { for (let [monthKey, monthVal] of yearVal.entries())

 let labels = [];
    let datasets = [];
    let fishData = {};

    this.firebasedb.list("/fogasok/").subscribe(_data => {

            // this.osszesfogasadatok = _data.filter(item => item.publikus == true);
            // let fogasSzam=this.osszesfogasadatok.length;
            let sulySum = _data.reduce((sum, item) => sum + parseInt(item.suly), 0);
            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)
    var sulyhavonta=sulySumByDate;
    console.log("sulyhavonta",sulyhavonta)
    for (let [yearKey, yearVal] of sulyhavonta.entries()) {
      for (let [monthKey, monthVal] of yearVal.entries()) {
        for (let [dayKey, dayVal] of monthVal.entires()) {
          labels.push(yearKey + '.' + monthKey + '.' + dayKey);
          for (let [fish, fishVal] of dayVal.entires()) {
            if (fishData[fish] === undefined) {
              fishData[fish] = [];
            }
            fishData[fish].push(fishVal);
            console.log("fishdata",fishData);
          }
        }
      }
    }
    var colors = [
      ["#ce8d00", "#ffae00"],
      ["#007bce", "#84ceff"]
    ];
    var i = 0;
    for (let key in fishData) {
      datasets.push({
        label: key,
        data: fishData[key],
        backgroundColor: colors[i % 2][0],
        hoverBackgroundColor: colors[i % 2][1],
        hoverBorderWidth: 0
      });
      i++;
    }
    console.log("dataset",datasets)
  });

    var bar_ctx = document.getElementById('bar-chart');
    var bar_chart = new Chart(bar_ctx, {
      type: 'bar',
      data: {
        labels: labels,
        datasets: datasets
      },
      options: {
        animation: {
          duration: 10,
        },
        scales: {
          xAxes: [{
            stacked: true,
            gridLines: {
              display: false
            },
          }],
          yAxes: [{
            stacked: true
          }],
        }, // scales
        legend: {
          display: true
        }
      } // options
    });

Just a quick note, instead of the reading from firebase and d3 nesting, it is working with static data, but i would like to use the code above to directly read from my database.

var sulyhavonta = new Map([ [2018, new Map([ [1,new Map([[15, new Map([[‘keszeg’,3],[‘ponty’,5]])], [29, new Map([[‘keszeg’,1],[‘ponty’,1]])]])], [5,new Map([[24, new Map([[‘keszeg’,9],[‘ponty’,7]])]])] ] )] ]);


#2

hello,

maybe at runtime whatever.entries is not ready. Make sure that whatever exists a this time you call it.

Best regards, anna-liebt