Chartjs-Json file data to Chart.JS

by

1👍

✅

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>

Leave a comment