Json file data to Chart.JS

I’m trying to add multiple datasets from a json file to a linechart in chart.JS. Here’s my JS code:

const toCharts = () => {
    const jsonfiledata = { 
        jsonfileshort: {
            "0": 6516, "1": 5525, "2": 3351, "3": 3998, "4": 4228, "5": 4591, "6": 3482, "7": 3109, "8": 3205, "9": 3346
        },
        jsonfilelong: {
            "0": 42261,"1": 58953,"2": 59250,"3": 62787,"4": 74008,"5": 74976,"6": 66892,"7": 63223, "8": 71459, "9": 57387
        }
    }
    const AUDlinecharttop = document.getElementById('fxlinecharttopAUD').getContext('2d');
    const AUDlinechart1 = new Chart(AUDlinecharttop, {
        type: 'line',
        data: {
            labels: Object.keys(jsonfiledata),
            datasets: [{
                label: "Short",
                data: Object.values(jsonfileshort),
                backgroundColor: ['rgba(255, 99, 132, 0.2)'],
                borderColor: ['rgba(255, 99, 132, 1)'],
                borderWidth: 4,
            },
            { label: "Long" ,
                data: Object.values(jsonfilelong),
                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
                    }
                }
            }
        }
    });
}

Here’s my HTML:

<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/chart.js@3.9.1/dist/chart.min.js"></script>
<canvas id="fxlinecharttopAUD"></canvas>

All other neccessary HTML code is added to make the file valid. There is something wrong with this code i just can’t figure out, I’m able to use the charts to input manual data but when it comes to importing Json data I’m stuck. I’ve read through far too many other Q&As here but nothing is working. Thanks in advance

Answer

You can tell by the error message that jsonfileshort is not defined.

const toCharts = () => {
  const jsonfiledata = {
    jsonfileshort: {
      "0": 6516,
      "1": 5525,
      "2": 3351,
      "3": 3998,
      "4": 4228,
      "5": 4591,
      "6": 3482,
      "7": 3109,
      "8": 3205,
      "9": 3346
    },
    jsonfilelong: {
      "0": 42261,
      "1": 58953,
      "2": 59250,
      "3": 62787,
      "4": 74008,
      "5": 74976,
      "6": 66892,
      "7": 63223,
      "8": 71459,
      "9": 57387
    }
  }
  const AUDlinecharttop = document.getElementById('fxlinecharttopAUD').getContext('2d');
  const AUDlinechart1 = new Chart(AUDlinecharttop, {
    type: 'line',
    data: {
      labels: Object.keys(jsonfiledata),
      datasets: [{
          label: "Short",
          data: Object.values(jsonfiledata.jsonfileshort),
          backgroundColor: ['rgba(255, 99, 132, 0.2)'],
          borderColor: ['rgba(255, 99, 132, 1)'],
          borderWidth: 4,
        },
        {
          label: "Long",
          data: Object.values(jsonfiledata.jsonfilelong),
          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
          }
        }
      }
    }
  });
}

toCharts();

<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/chart.js@3.9.1/dist/chart.min.js"></script>
<canvas id="fxlinecharttopAUD"></canvas>