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

When defining functions in Typescript, the new() syntax is used

Tips for integrating Reactjs with Chessboard.js

Tips for enabling resize functionality on individual components one at a time

Looking to adjust the height of a foreignObject element within an SVG?

Creating custom functionality by redefining methods in Typescript

Generating a random number to be input into the angular 2 form group index can be done by following these

Simulating server-side interactions in Node.js with TestCafe

Error: Property 'content' is not defined and cannot be read

What steps are involved in adding an image to an autocomplete script?

Priority is given to strings over numbers

Comprehending the significance of this within class structures

Enhancing jQuery Mobile listview with voting buttons on each item row

Can someone guide me on how to use contract.on() in ethers.js to listen to events from a smart contract in a node.js application?

Error message: Unable to assign value to 'kind' property as it is undefined in Angular Webpack application

Is it possible to use cakephp and AJAX to determine if a table is empty?

React.js with Typescript is throwing an error stating that a property does not exist on the child component

Build an Angular wrapper component for the phone textbox functionality

Utilizing Angular for Webcam Integration

How to retrieve document.getElementsByName from a separate webpage using PHP and javascript

Mastering the art of invoking a JavaScript function from a GridView Selected Index Changed event

Display sub-objects within Chart.js

Answer №1

Answer №2

Answer №3

Similar questions

When defining functions in Typescript, the new() syntax is used

Tips for integrating Reactjs with Chessboard.js

Tips for enabling resize functionality on individual components one at a time

Looking to adjust the height of a foreignObject element within an SVG?

Creating custom functionality by redefining methods in Typescript

Generating a random number to be input into the angular 2 form group index can be done by following these

Simulating server-side interactions in Node.js with TestCafe

Error: Property 'content' is not defined and cannot be read

What steps are involved in adding an image to an autocomplete script?

Priority is given to strings over numbers

Comprehending the significance of *this* within class structures

Enhancing jQuery Mobile listview with voting buttons on each item row

Can someone guide me on how to use contract.on() in ethers.js to listen to events from a smart contract in a node.js application?

Error message: Unable to assign value to 'kind' property as it is undefined in Angular Webpack application

Is it possible to use cakephp and AJAX to determine if a table is empty?

React.js with Typescript is throwing an error stating that a property does not exist on the child component

Build an Angular wrapper component for the phone textbox functionality

Utilizing Angular for Webcam Integration

How to retrieve document.getElementsByName from a separate webpage using PHP and javascript

Mastering the art of invoking a JavaScript function from a GridView Selected Index Changed event

Comprehending the significance of this within class structures