Chart.JS Time Axis Not Parsing

user_3405502 0
Viewed 1093

Kia ora! I am trying to implement a Chart.JS time cartesian axis. I've read the docs and found out I need to add a datetime library and adapter as of v3.x.x, so I've done that.

For some reason all my data points are on time=0 from what I can tell. It's like the time value is not being parsed properly, I think.

Chart.js uses timestamps defined as milliseconds since the epoch (midnight January 1, 1970, UTC) internally. However, Chart.js also supports all of the formats that your chosen date adapter accepts. You should use timestamps if you'd like to set parsing: false for better performance.

So, I have configured my API to return millisecond timestamps and defined parsing:false in the x axis options.

Here is a broken Codepen: https://codepen.io/Finnito/pen/KKqgXez, but the code is also attached below.

document.addEventListener("DOMContentLoaded", function() {
  var weeklyHistoryChartEl = document.getElementById('weeklyHistory').getContext('2d');
  var weeklyHistoryChart = new Chart(weeklyHistoryChartEl, { 
      type: 'line',
      scales: {
        x: {
          type: 'time',
          parsing: false
        }
      }
  });
  weeklyHistoryChart.data = JSON.parse('{"datasets":[{"data":[{"x":1625443200,"y":11.74},{"x":1626048000,"y":12.43},{"x":1626652800,"y":34.18}],"label":"Hike","hidden":true},{"data":[{"x":1624233600,"y":5.27},{"x":1630281600,"y":7.32}],"label":"Kayaking","hidden":true},{"data":[{"x":1626652800,"y":17.99}],"label":"NordicSki","hidden":true},{"data":[{"x":1623024000,"y":9.98},{"x":1623628800,"y":15.97},{"x":1624233600,"y":29.07},{"x":1624838400,"y":57.26},{"x":1625443200,"y":15.87},{"x":1627257600,"y":40.73},{"x":1627862400,"y":29.87},{"x":1628467200,"y":58.87},{"x":1629072000,"y":7.62},{"x":1629676800,"y":21.52},{"x":1630281600,"y":6.03}],"label":"Ride","hidden":true},{"data":[{"x":1628467200,"y":0}],"label":"RockClimbing","hidden":true},{"data":[{"x":1623628800,"y":92.45},{"x":1624233600,"y":31.24},{"x":1624838400,"y":23.81},{"x":1625443200,"y":9.39},{"x":1626048000,"y":40.94},{"x":1626652800,"y":12.84},{"x":1627257600,"y":33.59},{"x":1627862400,"y":30.97},{"x":1628467200,"y":31.88},{"x":1629072000,"y":27.88},{"x":1629676800,"y":47.23},{"x":1630281600,"y":48.1}],"label":"Run","hidden":false},{"data":[{"x":1627862400,"y":30.2},{"x":1628467200,"y":36.24},{"x":1629676800,"y":85.58},{"x":1630281600,"y":52.81}],"label":"VirtualRide","hidden":true},{"data":[{"x":1623024000,"y":6.78},{"x":1626048000,"y":5.92}],"label":"Walk","hidden":true},{"data":[{"x":1623628800,"y":0},{"x":1628467200,"y":0}],"label":"Yoga","hidden":true}]}');
  weeklyHistoryChart.update();
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script>

<canvas id="weeklyHistory"></canvas>

chart.js javascript
1 Answers

The scales are part of the options object, if you place it in the options it works just fine:

document.addEventListener("DOMContentLoaded", function() {
  var weeklyHistoryChartEl = document.getElementById('weeklyHistory').getContext('2d');
  var weeklyHistoryChart = new Chart(weeklyHistoryChartEl, {
    type: 'line',
    options: {
      scales: {
        x: {
          type: 'time',
          parsing: false
        }
      }
    }
  });
  weeklyHistoryChart.data = JSON.parse('{"datasets":[{"data":[{"x":1625443200,"y":11.74},{"x":1626048000,"y":12.43},{"x":1626652800,"y":34.18}],"label":"Hike","hidden":true},{"data":[{"x":1624233600,"y":5.27},{"x":1630281600,"y":7.32}],"label":"Kayaking","hidden":true},{"data":[{"x":1626652800,"y":17.99}],"label":"NordicSki","hidden":true},{"data":[{"x":1623024000,"y":9.98},{"x":1623628800,"y":15.97},{"x":1624233600,"y":29.07},{"x":1624838400,"y":57.26},{"x":1625443200,"y":15.87},{"x":1627257600,"y":40.73},{"x":1627862400,"y":29.87},{"x":1628467200,"y":58.87},{"x":1629072000,"y":7.62},{"x":1629676800,"y":21.52},{"x":1630281600,"y":6.03}],"label":"Ride","hidden":true},{"data":[{"x":1628467200,"y":0}],"label":"RockClimbing","hidden":true},{"data":[{"x":1623628800,"y":92.45},{"x":1624233600,"y":31.24},{"x":1624838400,"y":23.81},{"x":1625443200,"y":9.39},{"x":1626048000,"y":40.94},{"x":1626652800,"y":12.84},{"x":1627257600,"y":33.59},{"x":1627862400,"y":30.97},{"x":1628467200,"y":31.88},{"x":1629072000,"y":27.88},{"x":1629676800,"y":47.23},{"x":1630281600,"y":48.1}],"label":"Run","hidden":false},{"data":[{"x":1627862400,"y":30.2},{"x":1628467200,"y":36.24},{"x":1629676800,"y":85.58},{"x":1630281600,"y":52.81}],"label":"VirtualRide","hidden":true},{"data":[{"x":1623024000,"y":6.78},{"x":1626048000,"y":5.92}],"label":"Walk","hidden":true},{"data":[{"x":1623628800,"y":0},{"x":1628467200,"y":0}],"label":"Yoga","hidden":true}]}');
  weeklyHistoryChart.update();
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script>

<canvas id="weeklyHistory"></canvas>

https://codepen.io/leelenaleee/pen/MWojOwv

user_86829830
Related