Chartjs-Is there a way in JavaScript/TypeScript of adding two arrays in an object and sort them?

by

3👍

✅

Create an array for the merged objects, then sort the array of objects by mortality rate:

const countries = ["USA", "Spain", "Italy", "France", "Germany", "UK", "Iran", "Turkey", "Belgium", "Netherlands", "Canada", "Switzerland", "Brazil", "Russia", "Portugal", "Austria", "Israel", "Ireland", "Sweden", "India", "S. Korea", "Peru", "Chile", "Japan", "Ecuador", "Poland", "Romania", "Norway", "Denmark", "Australia", "Czechia", "Pakistan", "Saudi Arabia", "Philippines", "Mexico", "Malaysia", "Indonesia", "UAE", "Serbia", "Panama", "Qatar", "Ukraine"]
const mortalityRates = ["4.17", "10.46", "12.97", "10.98", "2.49", "12.90", "6.25", "2.15", "13.36", "10.74", "3.34", "4.53", "5.70", "0.81", "3.25", "2.70", "0.99", "3.54", "9.03", "3.36", "2.10", "2.21", "1.16", "1.87", "4.67", "3.65", "5.10", "2.10", "4.59", "0.95", "2.63", "1.64", "1.36", "6.41", "6.62", "1.64", "9.49", "0.55", "2.11", "2.71", "0.20", "2.91"]
    
const merged = []
for (let i = 0; i < countries.length; i++) {
  merged.push({
    country: countries[i],
    rate: mortalityRates[i],
  })
}
merged.sort((a, b) => b.rate - a.rate)

console.log(merged)

And a one-liner:

const merged = countries
  .map((country, i) => ({ country, rate: mortalityRates[i]}))
  .sort((a, b) => b.rate - a.rate)

1👍

You can map the values of both arrays into an array of objects and sort them as follows:

const sortedData = mortalityRates.map((v, i) => ({ rate: v, country: countries[i] })).sort((o1, o2) => o1.rate - o2.rate);

From there, it’ll be easy to create a bar chart for example.

const countries = ["USA", "Spain", "Italy", "France", "Germany", "UK", "Iran", "Turkey", "Belgium", "Netherlands", "Canada", "Switzerland", "Brazil", "Russia", "Portugal", "Austria", "Israel", "Ireland", "Sweden", "India", "S. Korea", "Peru", "Chile", "Japan", "Ecuador", "Poland", "Romania", "Norway", "Denmark", "Australia", "Czechia", "Pakistan", "Saudi Arabia", "Philippines", "Mexico", "Malaysia", "Indonesia", "UAE", "Serbia", "Panama", "Qatar", "Ukraine"];
const mortalityRates = ["4.17", "10.46", "12.97", "10.98", "2.49", "12.90", "6.25", "2.15", "13.36", "10.74", "3.34", "4.53", "5.70", "0.81", "3.25", "2.70", "0.99", "3.54", "9.03", "3.36", "2.10", "2.21", "1.16", "1.87", "4.67", "3.65", "5.10", "2.10", "4.59", "0.95", "2.63", "1.64", "1.36", "6.41", "6.62", "1.64", "9.49", "0.55", "2.11", "2.71", "0.20", "2.91"];

const sortedData = mortalityRates.map((v, i) => ({
  rate: v,
  country: countries[i]
})).sort((o1, o2) => o1.rate - o2.rate);

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: sortedData.map(o => o.country),
    datasets: [{
      data: sortedData.map(o => o.rate),
      backgroundColor: 'red'
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Mortality Rates'
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        ticks: {
          autoSkip: false
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

Leave a comment