Display JSON file on ChartJS-CodePudding

I am trying to display JSON data on a doughnut chart using chartJS. My issue is that it will only display one piece of data from the JSON. How do I get all pieces of data to display? Code is below:

const xmlhttp = new XMLHttpRequest();
const url = 'https://api.npoint.io/c189874f4d8f7c14d816';

xmlhttp.open('GET', url, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
        const datapoints = JSON.parse(this.responseText);
        var labels1 = datapoints.activePositions.map(function(e) {
            return e.positions;
        });
        var data1 = datapoints.activePositions.map(function(e) {
            return e.holders;
        });
        const insitutionalholders = document.getElementById('institutional_activepositions_piechart').getContext('2d');
        const insitutionalholdersforstock = new Chart(insitutionalholders, {
            type: 'doughnut',
            data: {
                labels: labels1,
                datasets: [{
                    label: 'yooooo',
                    data: data1,
                    backgroundColor: [
                        'rgba(0, 255, 255, 0.2)'
                    ],
                    borderColor: [
                        'rgba(0, 255, 255, 1)'
                    ],
                    borderWidth: 2.5

                }]
            }
        });

    }
}

Below is my JSON data (the data is need is from "activePositions"):

{
    "activePositions": [
        {
            "positions": "Increased Positions",
            "holders": "1,799",
            "shares": "201,837,184"
        }, 
        {
            "positions": "Decreased Positions",
            "holders": "2,313",
            "shares": "226,754,389"
        }, 
        {
            "positions": "Held Positions",
            "holders": "306",
            "shares": "8,979,550,845"
        }, 
        {
            "positions": "Total Institutional Shares",
            "holders": "4,418",
            "shares": "9,408,142,418"
        }
    ], 
    "newSoldOutPositions": [
        {
            "positions": "New Positions",
            "holders": "122",
            "shares": "55,880,226"
        },
        {
            "positions": "Sold Out Positions",
            "holders": "74",
            "shares": "8,818,741"
        }
    ]
}

html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="draftfortesting.css">
</head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<body>

  <div >
    <canvas id="institutional_activepositions_piechart"></canvas>
  </div>
</body>
  <script src="AAPLpiechart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>

What's weird to me is that the data that shows is the third piece inside the JSON, so I'm not sure why that's happened.

CodePudding user response：

The issue seems to be related to the value of holders field of data points.

The are not numbers having the "comma" (for instance "holders": "1,799",)

You could try to remove the comma and parsing as float:

    var labels1 = datapoints.activePositions.map(function(e) {
        return e.positions;
    });
    var data1 = datapoints.activePositions.map(function(e) {
        return parseFloat(e.holders.replace(',','')); // remove comma
    });

EDIT: to remove the "total" item:

    const activePositions = datapoints.activePositions.filter(e => !e.positions.startsWith('Total')); 
    var labels1 = activePositions.map(function(e) {
        return e.positions;
    });
    var data1 = activePositions.map(function(e) {
        return parseFloat(e.holders.replace(',',''));
    });