CODEWITHSUNDEEP
javascriptreactjschartsreact-chartjsreact-chartjs-2
Nitesh Singh
Nitesh Singh

Reputation: 395

Filtering data for more visualization of data in react-chartjs-2 when you have lot of array element

I want to get proper visualized data on my chart, but it is messing up because there is 1000 of array element. I don't want to reduce the data but actually to get proper visualization because in x-axis of graph it is showing NaN values.

fetch("./data.json")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        console.log(data);
        for (const dataObj of data) {
          empSal.push(parseInt(dataObj.intensity));
          empAge.push(parseInt(dataObj.start_year));
        }.catch((err) => {
    console.log(err);
  });

(1000) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]

enter image description here

sample data(data.json):

 [
        {
            "end_year": "",
            "intensity": 6,
            "sector": "Energy",
            "topic": "gas",
            "insight": "Annual Energy Outlook",
            "url": "http://www.eia.gov/outlooks/aeo/pdf/0383(2017).pdf",
            "region": "Northern America",
            "start_year": "",
            "impact": "",
            "added": "January, 20 2017 03:51:25",
            "published": "January, 09 2017 00:00:00",
            "country": "United States of America",
            "relevance": 2,
            "pestle": "Industries",
            "source": "EIA",
            "title": "U.S. natural gas consumption is expected to increase during much of the projection period.",
            "likelihood": 3
        },

....

want output as :enter image description here

Upvotes: 2

Views: 1395

Answers (1)

KcH
KcH

Reputation: 3502

You could filter the data array having both start_year and intensity and map for both the values :

const intensity = data.filter(el => el.intensity && el.start_year).map(val => val.intensity);
const year = data.filter(el => el.intensity && el.start_year).map(val => val.start_year);

Using this two you could draw a graph as per your req

sample data filtered example here

Upvotes: 1

Related Questions