How to use Chart.js for a large dataset? (JSON-file)

[abineshkumarathasan]

I am trying to make graph with a large JSON-file consisting of over 50 000 elements. Whenever I put the data into the chart, nothing will show up. Is it because there are to many elements? Does anyone know how to fix it?

Thanks.

[LeeLenaleee]

No, I once tested it with 100.000 datapoints and that rendered so its unlikely that is the problem. But without any more context, code on how you do things its hard to help

[LeeLenaleee]

Just copy paste all the relevant code related to your chart or a link to your git repo

[abineshkumarathasan]

HTML:

        <!-- https://www.chartjs.org/docs/latest/ -->
        <script id="graph1" type="text/JavaScript" src="js/Main.js"></script>     

JavaScript:
var url = "../test.json"

var arrayTheta = [];
var arrayRange = [];

async function getData(arrayRange, arrayTheta) {
const response = await fetch(url);
const productData = await response.json();

for (let index = 0; index < productData.length; index++) {
arrayTheta.push(productData[index].val1);

}

for (let index = 0; index < productData.length; index++) {
arrayRange.push(productData[index].val9);

}

}

getData(arrayRange, arrayTheta);

const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx,{
type: 'line',
data: {
labels: arrayTheta,
datasets: [{
label: 'testing',
data: arrayRange,
backgroundColor: 'rgba(255, 99, 132, 0.2)',

        borderColor: 'rgba(255, 99, 132, 1)',
        pointRadius: 0,
        tension: 0.4
    }]
},
options: {
    scales: {
        y: {
            beginAtZero: true
        }
        ,x: {
          display: true,
          type: 'linear'
        }
    }
}

});

JSON (little snippet):
[{"val0":"Boresight-Boresight","val1":-90,"val2":21.0304,"val3":19.0936,"val4":-16.2515,"val5":99.84367,"val6":-76,"val7":1,"val8":0,"val9":38},
{"val0":"Boresight-Boresight","val1":-89,"val2":21.0304,"val3":19.0936,"val4":-15.7732,"val5":100.3145,"val6":-76,"val7":1,"val8":0,"val9":40},
{"val0":"Boresight-Boresight","val1":-88,"val2":21.0304,"val3":19.0936,"val4":-15.2906,"val5":100.7637,"val6":-76,"val7":1,"val8":0,"val9":42},
{"val0":"Boresight-Boresight","val1":-87,"val2":21.0304,"val3":19.0936,"val4":-14.8034,"val5":101.2976,"val6":-76,"val7":1,"val8":0,"val9":44.5},
{"val0":"Boresight-Boresight","val1":-86,"val2":21.0304,"val3":19.0936,"val4":-14.3116,"val5":101.804,"val6":-76,"val7":1,"val8":0,"val9":47},
{"val0":"Boresight-Boresight","val1":-85,"val2":21.0304,"val3":19.0936,"val4":-13.8151,"val5":102.2859,"val6":-76,"val7":1,"val8":0,"val9":49.5},
{"val0":"Boresight-Boresight","val1":-84,"val2":21.0304,"val3":19.0936,"val4":-13.314,"val5":102.7455,"val6":-76,"val7":1,"val8":0,"val9":52},
{"val0":"Boresight-Boresight","val1":-83,"val2":21.0304,"val3":19.0936,"val4":-12.8087,"val5":103.2707,"val6":-76,"val7":1,"val8":0,"val9":55},
{"val0":"Boresight-Boresight","val1":-82,"val2":21.0304,"val3":19.0936,"val4":-12.2995,"val5":103.7701,"val6":-76,"val7":1,"val8":0,"val9":58},
{"val0":"Boresight-Boresight","val1":-81,"val2":21.0304,"val3":19.0936,"val4":-11.7871,"val5":104.3234,"val6":-76,"val7":1,"val8":0,"val9":61.5},

[abineshkumarathasan]

For some reason, when i copy paste, the preview gets a little funky, but i hope it is still understandable

[LeeLenaleee]

you make the chart before the data has arrived, you either need to make the chart in the end of the getData function or make it before and update the data in the getData function

[abineshkumarathasan]

Thank you very much for your assistance LeeLenaLeee. It works :)