Display sub-objects within Chart.js

Question

Display sub-objects within Chart.js

I'm currently tackling a project in Ionic 3 where I am utilizing an API that returns a JSON response with nested objects. My goal is to display certain aspects of these objects within a bar graph using chart.js.

Unfortunately, I lack experience in manipulating JSON objects.

{
"fruits": [
    {
    "oranges": {
      "good": 1,
      "not_good": 0
    },
    "apples": {
      "good": 1,
      "not_good": 0
    },
    "grapes": {
      "good": 2,
      "not_good": 0
    }
  }]
 }

It's uncertain how many fruits will be included in the response.

The names of the fruits would serve as the labels for the graph, while the 'good' and 'not good' values would make up the datasets.

javascript typescript charts chart.js

Answer 1

Answer №1

const healthyFruits = []; 
const unhealthyFruits = [];
const fruitLabels = [];
for (let index = 0; index < obj.fruits.length; index++) {
    const fruitObj = obj.fruits[index];
    // Iterate through the keys of each fruit object to determine its health status
    for (var property in fruitObj) {
        // Record the fruit name
        fruitLabels.push(property);
        let value = fruitObj[property];
        if(value.good == 1) {
            // If good is 1, add the fruit name to healthyFruits array
            healthyFruits.push(value);
        } else {
            // If bad is 1, add the fruit name to unhealthyFruits array
            unhealthyFruits.push(value);
        }
    }
}

Answer 2

const healthyFruits = []; 
const unhealthyFruits = [];
const fruitLabels = [];
for (let index = 0; index < obj.fruits.length; index++) {
    const fruitObj = obj.fruits[index];
    // Iterate through the keys of each fruit object to determine its health status
    for (var property in fruitObj) {
        // Record the fruit name
        fruitLabels.push(property);
        let value = fruitObj[property];
        if(value.good == 1) {
            // If good is 1, add the fruit name to healthyFruits array
            healthyFruits.push(value);
        } else {
            // If bad is 1, add the fruit name to unhealthyFruits array
            unhealthyFruits.push(value);
        }
    }
}

Answer 3

Answer №2

Creating a bar chart using Chart.js entails the following steps:

var ctx = document.getElementById("myChart").getContext("2d");

var data = {
  labels: ["Good", "Not good"],
  datasets: [{
    label: "Oranges",
    backgroundColor: "orange",
    data: [2, 1]
  }, {
    label: "Apples",
    backgroundColor: "green",
    data: [4, 2]
  }, {
    label: "Grapes",
    backgroundColor: "purple",
    data: [3, 1]
  }]
};

var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    barValueSpacing: 20,
    scales: {
      yAxes: [{
        ticks: {
          min: 0
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

To adjust the data received from an API to fit the required format for the chart, you can manipulate the data as follows:

const res = {
  fruits: [
    {
      oranges: {
        good: 1,
        not_good: 0
      },
      apples: {
        good: 1,
        not_good: 0
      },
      grapes: {
        good: 2,
        not_good: 0
      }
    }
  ]
};
const dataset = Object.entries(res.fruits[0]).map(fruit => {
  return {
    label: fruit[0],
    data: Object.values(fruit[1])
  };
});

console.log(dataset);

Additionally, if the background colors for each bar are not provided by the API, you will need to determine where to source this information.

Here is how everything comes together in the final implementation:

const res = {
  fruits: [
    {
      oranges: {
        good: 10,
        not_good: 5
      },
      apples: {
        good: 6,
        not_good: 1
      },
      grapes: {
        good: 9,
        not_good: 5
      },
      pears: {
        good: 15,
        not_good: 6
      }
    }
  ]
};

const datasets = Object.entries(res.fruits[0]).map(fruit => {
  return {
    label: fruit[0], 
    data: Object.values(fruit[1]),
    backgroundColor: getRandomColor()
  };
});


const ctx = document.getElementById("myChart").getContext("2d");

const data = {
  labels: ["Good", "Not good"],
  datasets
};

const myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    barValueSpacing: 20,
    scales: {
      yAxes: [{
        ticks: {
          min: 0
        }
      }]
    }
  }
});

function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

View JSfiddle Example

Reference to getRandomColor Implementation

Answer 4

Creating a bar chart using Chart.js entails the following steps:

var ctx = document.getElementById("myChart").getContext("2d");

var data = {
  labels: ["Good", "Not good"],
  datasets: [{
    label: "Oranges",
    backgroundColor: "orange",
    data: [2, 1]
  }, {
    label: "Apples",
    backgroundColor: "green",
    data: [4, 2]
  }, {
    label: "Grapes",
    backgroundColor: "purple",
    data: [3, 1]
  }]
};

var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    barValueSpacing: 20,
    scales: {
      yAxes: [{
        ticks: {
          min: 0
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

To adjust the data received from an API to fit the required format for the chart, you can manipulate the data as follows:

const res = {
  fruits: [
    {
      oranges: {
        good: 1,
        not_good: 0
      },
      apples: {
        good: 1,
        not_good: 0
      },
      grapes: {
        good: 2,
        not_good: 0
      }
    }
  ]
};
const dataset = Object.entries(res.fruits[0]).map(fruit => {
  return {
    label: fruit[0],
    data: Object.values(fruit[1])
  };
});

console.log(dataset);

Additionally, if the background colors for each bar are not provided by the API, you will need to determine where to source this information.

Here is how everything comes together in the final implementation:

const res = {
  fruits: [
    {
      oranges: {
        good: 10,
        not_good: 5
      },
      apples: {
        good: 6,
        not_good: 1
      },
      grapes: {
        good: 9,
        not_good: 5
      },
      pears: {
        good: 15,
        not_good: 6
      }
    }
  ]
};

const datasets = Object.entries(res.fruits[0]).map(fruit => {
  return {
    label: fruit[0], 
    data: Object.values(fruit[1]),
    backgroundColor: getRandomColor()
  };
});


const ctx = document.getElementById("myChart").getContext("2d");

const data = {
  labels: ["Good", "Not good"],
  datasets
};

const myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    barValueSpacing: 20,
    scales: {
      yAxes: [{
        ticks: {
          min: 0
        }
      }]
    }
  }
});

function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

View JSfiddle Example

Reference to getRandomColor Implementation

Answer 5

Answer №3

If you want to transform your object into an array of fruit objects, consider the following approach:

const data = {
 "fruits": [
   {
    "oranges": {
      "good": 1,
      "not_good": 0
    },
    "apples": {
      "good": 1,
      "not_good": 0
    },
    "grapes": {
      "good": 2,
      "not_good": 0
    }
   }]
 };

 const result = Object.keys(data.fruits[0])
 .map(fruit => ({'name': fruit, 'values': data.fruits[0][fruit] }));

 console.log(result);

Answer 6

If you want to transform your object into an array of fruit objects, consider the following approach:

const data = {
 "fruits": [
   {
    "oranges": {
      "good": 1,
      "not_good": 0
    },
    "apples": {
      "good": 1,
      "not_good": 0
    },
    "grapes": {
      "good": 2,
      "not_good": 0
    }
   }]
 };

 const result = Object.keys(data.fruits[0])
 .map(fruit => ({'name': fruit, 'values': data.fruits[0][fruit] }));

 console.log(result);

Display sub-objects within Chart.js

Answer №1

Answer №2

Answer №3

Similar questions

Node.js QuickStart guide for authenticating with the Youtube API encounters error

What is the best way to eliminate excess white space on the right side in WordPress for a mobile perspective?

Issue with Jquery plugin malfunctioning on dynamically loaded elements via Ajax requests

Using jQuery sortable with the overflow property set to hidden to sort items between two lists

Having trouble with updating React state? The useEffect hook runs when attempting to change the state, but it seems to have the

Unusual behavior involving the selection of $stateParams

Using JavaScript, HTML, and CSS to select slices of a donut pie chart created with SVG

Error in TypeScript React component due to prop-types ESLint in React

Retrieve a Play Scala variable in the $scope of an AngularJS application

Interested in incorporating dynamic calendar entries in ASP C#?

Fetching various data from MongoDB using NodeJS and presenting it in Jade(Pug) template

Dropdown feature in the side navigation bar

Error message when using Vue Global Filter: Value undefined is not defined

The Angular route seems to be unresponsive to a single click, but it starts functioning properly when clicked

Enhance your React application by making two API requests in

What is the best way to iterate through an array of objects in React and JavaScript, adding a new property to each object in order to generate a new array

Switching a conditional className to a styled component

Is it feasible to incorporate a method into a prototype and ensure that 'this' is associated with the appropriate type in TypeScript?

What's the best way to implement asynchronous state updating in React and Redux?

Retrieve the thousand separator for numbers using Angular in various languages