Upload JSON data to chartJS from JSON server

by

0👍

✅

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/chart.js@3.9.1/dist/chart.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

Leave a comment