Json file data to Chart.JS

Question

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/[email protected]/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

IT goldman · Accepted Answer · 2022-10-12 21:34:04Z

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/[email protected]/dist/chart.min.js"></script>
<canvas id="fxlinecharttopAUD"></canvas>

Thank you! I manually inputted the "labels:" to the numbers ("0" to "9") so it could show each point rather than the start value and end value

Collectives™ on Stack Overflow

Json file data to Chart.JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related