Show nested objects in Chart.js

I'm working with Ionic 3 and I'm consuming an API that gets as response a json with nested objects. I need to show some part of these objects in a chart.js graph bar.

I'm not familiar with manipulating json objects.

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

I dont know how many fruits will be there in the response.

The fruits's names would be the labels and the 'good' and 'not good' would be the datasets.


You can try converting your object into an array of fruits objects:

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

const output = Object.keys(input.fruits[0])
.map(fruit => new Object({'name' : fruit, 'dataset' : input.fruits[0][fruit] })  ); 

console.log(output);
 

Data structures, Object[]#. Copy. data: [{x: 10, y: 20}, {x: 15, y: 10}]. Copy. data: [{x:'2016-12-25', y:​20}, {x:'2016-12-26', y:10}]. Copy. data: [{x:'Sales' yAxisKey: 'nested.value'. You basically check if user exists, if not, you create an empty object on the fly. This way, the next level key will always be accessed from an object that exists or an empty object, but never from undefined. Unfortunately, you cannot access nested arrays with this trick. Access Nested Objects Using Array Reduce


let goods = []; 
let bads = [];
let labels = [];
for (let i = 0; i < obj.fruits.length; i++) {
    const fruit = obj.fruits[i];
    // Since we don't know the fruit name, we iterate through its keys
    for (var key in fruit) {
        // Push the fruit name
        labels.push(key);
        let val = fruit[key];
        if(val.good == 1) {
            // If good is 1, push the fruit name to goods array
            goods.push(val);
        } else {
            // If not_good is 1, push to bads array
            bads.push(val);
        }
    }
}

Category · Chart.js documentation, They are nested in the ticks sub object. These options extend the In the example below, the x axis would only display "March" through "June". let chart = new  Parsing Nested JSON Data in JavaScript JSON objects and arrays can also be nested. A JSON object can arbitrarily contains other JSON objects, arrays, nested arrays, arrays of JSON objects, and so on. The following example will show you how to parse a nested JSON object and extract all the values in JavaScript.


Drawing this kind of bar chart with chart.js could be done like this.

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>

Legend · Chart.js documentation, The legend label configuration is nested below the legend configuration using the labels key. This can be easily achieved using a callback in the config object​. Lets say we wanted instead to link the display of the first two datasets. In this post we will show you Best way to implement Accessing Nested Objects in Vuejs, hear for Iterating Over nested Items in Vue.js With V-for with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.


Labelling · Chart.js documentation, The scale label configuration is nested under the scale configuration in the scaleLabel key. It defines options for the scale title. Note that this only applies to  Nested pies are a module variation on our standard pie chart type. Nested Pie Chart Types. You can create a nested pie chart, nested donut chart, or nested pie small multiples. Nested Pie Chart. Specify the chart type by adding a type attribute to the chart object and setting the value to nestedpie. Without further modification, here is how a


Doughnut & Pie · Chart.js documentation, They are excellent at showing the relational proportions between data. these default values for each Doughnut type that is created, this object is available at  The scale label configuration is nested under the scale configuration in the scaleLabel key. It defines options for the scale title. It defines options for the scale title. Note that this only applies to cartesian axes.


ChartJS Tutorials #3 - Diving Into The Data Object, Chart.js is a open-source, light-weight (~11KB) library based on the HTML5 and then insert that data into an object chart.js understands ( tempData ): code required to read JSON data from a specific URL is shown below. Plotting JSON Data with Chart.js. Jan 10, 2016 : KTown : 9 minute read Chart.js is a open-source, light-weight (~11KB) library based on the HTML5 canvas control. It supports a limited number of charts, but unlike Google Charts it can be embedded directly in your website and made available offline.