chart.js automatic x axis distributed in time milliseconds

Question

I'm building a local html file that will generate some graphs using chartjs when offline. I'm just testing some example data I have.

See fiddle below.

http://jsfiddle.net/joshmoto/0odcemL7/

The issue is, i've set 8 points of data for each dataset, but the graph is only outputting 2 points for each dataset.

I need my x axis to display a automatic time grid distributed in seconds. My time data consists millisecond data, but my x axis grid needs to show steps in seconds. But my points must remain accurately positioned on the graph within the steps as the data is milliseconds. .

var ctx = document.getElementById('log_chart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'Engine Speed',
      backgroundColor: '#ff0000',
      borderColor: '#ff0000',
      fill: false,
      data: [{
        t: new Date(0.37),
        y: 2640
      }, {
        t: new Date(0.85),
        y: 2560
      }, {
        t: new Date(1.33),
        y: 2560
      }, {
        t: new Date(1.78),
        y: 2560
      }, {
        t: new Date(2.23),
        y: 2680
      }, {
        t: new Date(2.7),
        y: 2920
      }, {
        t: new Date(3.16),
        y: 3200
      }, {
        t: new Date(3.63),
        y: 3520
      }]
    }, {
      label: 'Mass Air Flow - Sensor',
      backgroundColor: '#00FFFF',
      borderColor: '#00FFFF',
      fill: false,
      data: [{
        t: new Date(0.02),
        y: 19.58
      }, {
        t: new Date(0.45),
        y: 16.28
      }, {
        t: new Date(0.92),
        y: 8.56
      }, {
        t: new Date(1.39),
        y: 8.47
      }, {
        t: new Date(1.86),
        y: 23.36
      }, {
        t: new Date(2.33),
        y: 45.78
      }, {
        t: new Date(2.78),
        y: 56.03
      }, {
        t: new Date(3.23),
        y: 62.36
      }]
    }],

  },
  options: {
    scales: {
      // xAxes: [{
      //     type: 'time',
      //     displayFormats: {
      //         quarter: 'ss.SSS'
      //     },
      //     time: {
      //         unit: 'second'
      //     }
      // }]
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>

<div class="container">
  <div class="col-12 mt-3 mb-3">

    <canvas id="log_chart" width="600" height="200"></canvas>

  </div>
</div>

Basically the data works like this...

t is the x axis but in time format seconds.

y is the value ranging from 0 - 5000

I'm trying my hardest to follow the docs but struggling to work this one out, I can't see anything obvious. If anyone can help out that would be awesome.

Answer 1

I figured out using x axis type: linear; and removed the date functionality and just used the raw millisecond data in x rather than t.

See working example below.

var ctx = document.getElementById('log_chart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'Engine Speed',
      backgroundColor: '#ff0000',
      borderColor: '#ff0000',
      fill: false,
      data: [{
        x: 0.37,
        y: 2640
      }, {
        x: 0.85,
        y: 2560
      }, {
        x: 1.33,
        y: 2560
      }, {
        x: 1.78,
        y: 2560
      }, {
        x: 2.23,
        y: 2680
      }, {
        x: 2.7,
        y: 2920
      }, {
        x: 3.16,
        y: 3200
      }, {
        x: 3.63,
        y: 3520
      }]
    }, {
      label: 'Mass Air Flow - Sensor',
      backgroundColor: '#00FFFF',
      borderColor: '#00FFFF',
      fill: false,
      data: [{
        x: 0.02,
        y: 19.58
      }, {
        x: 0.45,
        y: 16.28
      }, {
        x: 0.92,
        y: 8.56
      }, {
        x: 1.39,
        y: 8.47
      }, {
        x: 1.86,
        y: 23.36
      }, {
        x: 2.33,
        y: 45.78
      }, {
        x: 2.78,
        y: 56.03
      }, {
        x: 3.23,
        y: 62.36
      }]
    }],

  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: "Chart.js Time Scale"
    },
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom'
      }]
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>

<div class="container">
  <div class="col-12 mt-3 mb-3">

    <canvas id="log_chart" width="600" height="200"></canvas>

  </div>
</div>

Answer 2

I think you need to provide more information to Chart.js so that it knows what to do with the X-Axis. On previous projects, I've given a labels property within the data.

Example -

// document ready
(function ($) {

    var ctx = document.getElementById('log_chart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [1, 2, 3, 4, 5, 6, 7, 8],
            datasets: [
              {
                  label: 'Engine Speed',
                  backgroundColor: '#ff0000',
                  borderColor: '#ff0000',
                  fill: false,
                  data: [2640,2560,2560,2560, 2680, 2920, 3200, 3520]
              },
              {
                label: 'Mass Air Flow - Sensor',
                backgroundColor: '#00FFFF',
                borderColor: '#00FFFF',
                fill: false,
                data: [19.58, 16.28, 8.56, 8.47, 23.36, 45.78, 56.03, 62.36]
              }
            ],
        },
        options: {
            scales: {
                yAxes: [{
                    stacked: false
                }],
            }
        }
    });



})(jQuery);

So the labels property can then fill your X axis, and your data sets just plot the raw data onto the graph. The problem you'll run into with this kind of dataset is that the sensors readings are significantly lower than the engine speed, so not well represented on the chart. You'll have to work out some kind of way of normalising this data so it can be properly represented, e.g. adding a multiply to the mass airflow sensor readings.