在视图中构造要发送到HighCharts的数据

Question

I'm currently working on a Node.js project using handlebars as my templating engine and HighCharts.js as my graphics engine to render some charts on the client side. I have successfully brought in data from my database and rendered it in HighCharts but I need to restructure the data to achieve what I'm trying to do. I'm using a stacked column graph with hours of the day on the y axis and the date on the x axis, any time in which it rains a stacked blue column should be rendered on the graph, if there's no rain a transparent column should be stacked. A rough idea of what I'm talking about can be seen in the image below.

stacked column graph

My data from the database is structured as seen below initially.

    { tstamp: 2010-11-05T02:00:00.000Z,
    rain: 0.2647019028663635,
    rainhr: true,
    latitude: 40.6875,
    longitude: -86.9375,
    date: '11/04/2010',
    hour: '22' },
  { tstamp: 2010-11-05T03:00:00.000Z,
    rain: 0.5646802186965942,
    rainhr: true,
    latitude: 40.6875,
    longitude: -86.9375,
    date: '11/04/2010',
    hour: '23' },
  { tstamp: 2010-11-05T04:00:00.000Z,
    rain: 0.08448517322540283,
    rainhr: true,
    latitude: 40.6875,
    longitude: -86.9375,
    date: '11/05/2010',
    hour: '00' },
  { tstamp: 2010-11-05T05:00:00.000Z,
    rain: 0,
    rainhr: false,
    latitude: 40.6875,
    longitude: -86.9375,
    date: '11/05/2010',
    hour: '01' },
  { tstamp: 2010-11-05T06:00:00.000Z,
    rain: 0,
    rainhr: false,
    latitude: 40.6875,
    longitude: -86.9375,
    date: '11/05/2010',
    hour: '02' },

On the server side is where I've been trying to do some processing of the data to send it to the client side, ready for HighCharts to use.

The data structure I've been trying to use looks like the following,

var testData = {
          day: '',
          hour: [],
          color: []
        }
        dataArray = [];

One day should go to each object, and the available hours and colors (blue or transparent [rain or no rain]) should be in the testData object. Once I loop through all of the day values (for example all values associated with 11/5/2010), the object should get pushed to the dataArray and I would start over with the testData object on the new day. What I've tried so far to process the data is below.

var prevDate = wxPrecipResult.recordset[0].date;
        for (let i = 0; i < wxPrecipResult.recordset; i++) {
          currentDate = wxPrecipResult.recordset[i].date;
          testData.day = currentDate;
          console.log(testData);

          if (currentDate === prevDate) {
            testData.hour.push(wxPrecipResult.recordset[i].hour);

            if (wxPrecipResult.recordset[i].rainhr === 1) {
              testData.color.push('rgba(0,0,255,1)');
            } else {
              testData.color.push('rgba(0,0,0,0)');
            }            
          } else {
            dataArray.push(testData);
          }
          prevDate = currentDate;
        }

Any help would be greatly appreciated. I'm still new to using JavaScript on such a big project, I've used it for little things up to this point. Thanks!

Answer 1

After running VsCode's debugger, it looks like there was some strange issue with a for loop. After cleaning up some of my old commented code and finishing fixing the logic behind my data structuring, everything seems to be in order now. The corrected code is below, hopefully this will be helpful to someone.

var testData = {
          day: wxPrecipResult.recordset[0].date,
          datapairs: []
        };
        var dataArray = [];

        //
        var prevDate = testData.day;
        for (let i = 0; i < wxPrecipResult.recordset.length; i++) {
          currentDate = wxPrecipResult.recordset[i].date;
          // testData.day = currentDate;
          // console.log(testData);

          if (currentDate !== prevDate) {
            dataArray.push(testData);
            testData = {
              day: currentDate,
              datapairs: []
            };
          }
          var datapair = {
            hour: wxPrecipResult.recordset[i].hour,
            color: ''
          }

          if (wxPrecipResult.recordset[i].rainhr === true) {
            datapair.color = 'rgba(0,0,255,1)';
          } else {
            datapair.color = 'rgba(0,0,0,0)';
          }       
          testData.datapairs.push(datapair); 
          prevDate = currentDate;
        }
        dataArray.push(testData);