'Why is Chart.JS replacing my x-values with 0?

I'm new to JavaScript and chart.JS so I apologize if this is an ignorant question. I'm trying to generate a graph from a text file formatted like this:

### 2016-12-25 2016-12-30 awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe

### 2018-09-09 2018-09-30 awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe


### 2019-09-09 2019-09-30 awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposn bo09gewhfe bo09gewhfebo09gewhfe bo09gewhfe


### 2019-11-02 2019-12-30 awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe awewoihgknbsinevnsobie wehbsn0ew hb0ejnwoigjha0[ghnoibg gv[w90ejnbposnbo09gewhfe

Each paragraph is two points: the index of the start of the paragraph, linked to the first date, and the index of the end of the paragraph, linked to the second date. The graph should display 8 points where the y value is the date and the x value is the index (e.g. (0, 2016-12-25) and (1247, 2016-12-30). But when I graph it, this is what happens: the y-axis shows up properly, but all of the x-values have been replaced with 0.

Here's a screenshot showing that the dataset is being passed correctly, but it's parsing all the x's to zero: _dataset array has correct values, but _parsed array doesn't.

This is my code:

<!DOCTYPE html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
<title>Plotter</title>
</head>
<body>
 <h1>Plotter</h1>
 <input id="txtFile" type="file" accept="txt">
 <canvas id="graph" width="75%" height="50%"></canvas>
 
 <script>
        document.getElementById('txtFile')
        .addEventListener('change', function() {
            var sceneData = [];  
        var reader=new FileReader();
        reader.onload=function(){
            let fullText = reader.result;
            let i=0;
            
            while(i != -1){
                let start = fullText.indexOf('###',i);
                let end = fullText.indexOf('###', start + 3);
                i=end;
                if (start != -1){
                    if(end == -1) end = fullText.length;
                    sceneData.push({x: start, y: moment(fullText.substr(start + 4, 10))});
                    sceneData.push({x: end, y: moment(fullText.substr(start + 15, 10))});
                }
            }

            const ctx = document.getElementById('graph').getContext('2d');
            const myChart = new Chart(ctx, {
                type: 'line',
                data: {
                datasets: [{
                    data: sceneData
                }]
                },
                options: {
                    scales: {
                        y: 
                        {
                            ticks: {
                                callback: function(value, index, ticks) {
                                    let date = moment(value);
                                    return date.format('MMM D YYYY');
                                }
                            }
                        }
                    }
                } 
            });
        }
          
        reader.readAsText(this.files[0]);

    })
    
    </script>
</body>

I'm not familiar enough with chart.JS to figure out what's going on, so I'd appreciate any help I can get. Thanks!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Why is Chart.JS replacing my x-values with 0?

Sources

Related Questions