I'm trying to import data from a localhost JSON server to chartJS but nothing shows up. Below is my JS code:

jQuery.getJSON("http://localhost:3000/AUDcotdata", function(data) {
    var dataAUDS = data.SHORTDEALERINTERMEDIARY[0].map(function(e) {
        return e
    });
    var dataAUDL = data.LONGDEALERINTERMEDIARY[0].map(function(e) {
        return e
    });
        
    const AUDlinecharttop = document.getElementById('fxlinecharttopAUD').getContext('2d');
    const AUDlinechart1 = new Chart(AUDlinecharttop, {
        type: 'line',
        data: {
            labels: ['1', '2', '3', '4', '5', '6','7','8','9','10'] ,
            datasets: [{
                label: "Short",
                data: dataAUDS,
                backgroundColor: ['rgba(255, 99, 132, 0.2)'],
                borderColor: ['rgba(255, 99, 132, 1)'],
                borderWidth: 4,
            },
            { label: "Long" ,
                data: dataAUDL,
                backgroundColor: ['rgba(75, 192, 192, 0.2)'],
                borderColor: ['rgba(75, 192, 192, 1)'],
                borderWidth: 4
            }],
        },
        options: {
            responsive: "true",
            plugins: {
                title: {
                    color: "white",
                    display: true,
                    text: 'Positions (AUD)',
                },
                legend: {
                    display: true,
                    color: "white"
                }
            },
            maintainAspectRatio: false,
            elements: {
                line: {
                    fill: true,
                    tension: 0.2
                }
            },
            scales: {
                y: {
                    ticks: {
                        color: "white"
                    },
                    beginAtZero: true,
                },
                x: {
                    ticks: {
                        color: "white"
                    },
                    grid: {
                        display: false
                    }
                }
            }
        }
    });
})

The labels are fine manually, it's just the Y axis values needed. All HTML and cdn links are valid as it works when I either hardcode the JSON file or input manual data (using a different method to the getJSON etc etc). Below is the JSON format:

[
  {
    "LONGDEALERINTERMEDIARY": [
      {
        "0": 57387,
        "1": 71459,
        "2": 63223,
        "3": 66892,
        "4": 74976,
        "5": 74008,
        "6": 62787,
        "7": 59250,
        "8": 58953,
        "9": 42261
      }
    ],
    "SHORTDEALERINTERMEDIARY": [
      {
        "0": 3346,
        "1": 3205,
        "2": 3109,
        "3": 3482,
        "4": 4591,
        "5": 4228,
        "6": 3998,
        "7": 3351,
        "8": 5525,
        "9": 6516
      }
    ],
  }
]

Can someone explain what's wrong with my code and if I need to add or replace anything?

Thanks in advance

CodePudding user response：

The data you are providing to dataset are not supported in CHART.JS. See CHART.JS documentation: https://www.chartjs.org/docs/latest/general/data-structures.html#data-structures

Below the sample, using your code, adding a data normalization and removing labels because already provided by the data.

const data = [
  {
    "LONGDEALERINTERMEDIARY": [
      {
        "0": 57387,
        "1": 71459,
        "2": 63223,
        "3": 66892,
        "4": 74976,
        "5": 74008,
        "6": 62787,
        "7": 59250,
        "8": 58953,
        "9": 42261
      }
    ],
    "SHORTDEALERINTERMEDIARY": [
      {
        "0": 3346,
        "1": 3205,
        "2": 3109,
        "3": 3482,
        "4": 4591,
        "5": 4228,
        "6": 3998,
        "7": 3351,
        "8": 5525,
        "9": 6516
      }
    ],
  }
];
// NORMALIZE
function normalize(data) {
  const result = [];
  Object.keys(data).forEach(function(k) {
    result.push({x: k, y: data[k]});
  });
  return result;
}
//
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                label: "Short",
                data: normalize(data[0].SHORTDEALERINTERMEDIARY[0]),
                backgroundColor: ['rgba(255, 99, 132, 0.2)'],
                borderColor: ['rgba(255, 99, 132, 1)'],
                borderWidth: 4,
            },
            { label: "Long" ,
                data: normalize(data[0].LONGDEALERINTERMEDIARY[0]),
                backgroundColor: ['rgba(75, 192, 192, 0.2)'],
                borderColor: ['rgba(75, 192, 192, 1)'],
                borderWidth: 4
            }],
        },
        options: {
            responsive: "true",
            plugins: {
                title: {
                    color: "black",
                    display: true,
                    text: 'Positions (AUD)',
                },
                legend: {
                    display: true,
                    color: "white"
                }
            },
            maintainAspectRatio: false,
            elements: {
                line: {
                    fill: true,
                    tension: 0.2
                }
            },
            scales: {
                y: {
                    ticks: {
                        color: "black"
                    },
                    beginAtZero: true,
                },
                x: {
                    type: 'category',
                    ticks: {
                        color: "black"
                    },
                    grid: {
                        display: false
                    }
                }
            }
        }
    });

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<html>
  <body>
    <div >
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>