Render React bar chart from one-dimensional array (dates)

user_9542994 0
Viewed 161

I’m getting an array of dates from an api like:

[‘Apr 14th, 2022’, ‘Apr 14th, 2022’, ‘Apr 12th, 2022’, ‘Apr 12th, 2022’, ‘Apr 11th, 2022’]

Notice multiple of the same dates in there. So each date is an “activity”, and what I’m trying to do is show a bar chart of activities for the last 14 days. I can get the current date with “new Date”. If the array has 3 of the same date, then 3 activities happened and the bar chart for that date should have 3 boxes on the bar chart.enter image description here

I can’t seem to find a bar chart that takes in a one-dimensional array of dates, how would I go about doing this? What I have currently tried is to group the array of dates by the day into an array of arrays, example: [ [14, 14], [12, 12], [11]] And using that I can use the map function to iterate through each index of the array to render boxes depending on the length of the array. This is getting very ugly very fast, so looking for a small library where I can simple give it the array of dates and show me the bar graph. Any help is appreciated.

reactjs charts javascript
1 Answers

Edit:

So after digging a little more I believe I found a minimal solution to your problem. I believe it would be difficult to find a library that deals with your exact situation, and the best course would be to try to format your data to fit with excepted parameters. Here is a snippet of code that I would believe would do that. I use the package moment.js because it is widely used. https://momentjs.com/docs/

Here is the code snippet

const fourteenDaysAgo = moment().subtract(14, 'days')

let barChartArray = new Array(14).fill(0);

console.log(barChartArray)

dates.forEach((date) => {
    const dateAsMoment = moment(date, 'MMM Do, YYYY')
    const DateIsInFourteenDayRange = moment(dateAsMoment).isAfter(fourteenDaysAgo, 'day')

    if(DateIsInFourteenDayRange) {
      //initalizes a new moment that start at the beginning of the day
      //checks the differences in days between now and that date
      //uses that difference to populat the barChartArray

      const index = moment().startOf('day').diff(dateAsMoment, 'days')
      barChartArray[index]++
    }
})

console.log(barChartArray)

I created a jsfiddle you can try out here: https://jsfiddle.net/h2809Ljy/208/

Here are some of the console.log statements for random data.

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[4, 3, 2, 2, 1, 1, 5, 7, 4, 2, 1, 1, 3, 1]

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[2, 3, 1, 4, 4, 6, 4, 5, 8, 3, 6, 6, 2, 3]

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[2, 2, 4, 6, 6, 5, 5, 5, 1, 5, 5, 5, 2, 2]

I believe this could suit your needs, and it would allow a lot of flexibility with how you display the data. If you have any more questions about this code or how to start displaying it please let me know and I'd be happy to address them!

Original:

I would recommend checking out d3! It can be a powerful library for displaying data in react but doing something simple such as a bar chart is a relatively easy process. d3

d3: https://www.npmjs.com/package/d3

simple bar chart tutorials: https://observablehq.com/@d3/lets-make-a-bar-chart https://blog.logrocket.com/data-visualization-in-react-using-react-d3-c35835af16d0/

One thing that can be initially confusing about using d3 with react is that they both have their own processes for managing elements, so you have to be conscientious of that while writing code (for something simple it probably won't affect anything). I would recommend giving this article a read to understand what's going on with that (specifically the last few paragraphs). https://medium.com/noteableio/interactive-applications-with-react-d3-f76f7b3ebc71 https://betterprogramming.pub/5-steps-to-render-d3-js-with-react-functional-components-fcce6cec1411

user_169628640
Related