I am trying to map out a series of data points on a given day by the hour. Not every hour is included in the data set, however I still want to show the time from 0:00 - 23:00 and plot the data points that is available.

My error is

This method is not implemented: either no adapter can be found or an inplete integration was provided.

However, Looking at the documentation and this tutorial, I still get the error.

In my hourlyData set, x is the hour and y is the amount.

Can anyone see what I am doing wrong?

$(document).ready(function() {
  var ctx = document.getElementById('chart_hourlycalls').getContext('2d');
  var hourlyData = [{
    "x": "1",
    "y": "1"
  }, {
    "x": "3",
    "y": "2"
  }, {
    "x": "5",
    "y": "1"
  }, {
    "x": "6",
    "y": "13"
  }, {
    "x": "7",
    "y": "13"
  }, {
    "x": "8",
    "y": "5"
  }, {
    "x": "9",
    "y": "9"
  }, {
    "x": "10",
    "y": "14"
  }, {
    "x": "11",
    "y": "24"
  }, {
    "x": "12",
    "y": "5"
  }];

  var labels = hourlyData.map(e => moment(e.x, 'HH'));
  var data = hourlyData.map(e => e.y);

  var options = {
    scales: {
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Calls'
        },
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          unit: 'hour',
          displayFormats: {
            hour: 'HH a'
          }
        },
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Hour'
        }
      }]
    },
    tooltips: {
      enabled: true
    },
  };

  new Chart(ctx, {
    type: 'line',
    data: {
      labels: labels,
      data: data
    },
    options: options
  });
});

<script src=".3.1/jquery.min.js"></script>
<link rel="stylesheet" href=".js/2.8.0/Chart.min.css">
<script src=".js/2.8.0/Chart.min.js"></script>
<script src=".js/2.24.0/moment.min.js"></script>
<canvas id="chart_hourlycalls"></canvas>

I am trying to map out a series of data points on a given day by the hour. Not every hour is included in the data set, however I still want to show the time from 0:00 - 23:00 and plot the data points that is available.

My error is

This method is not implemented: either no adapter can be found or an inplete integration was provided.

However, Looking at the documentation and this tutorial, I still get the error.

In my hourlyData set, x is the hour and y is the amount.

Can anyone see what I am doing wrong?

$(document).ready(function() {
  var ctx = document.getElementById('chart_hourlycalls').getContext('2d');
  var hourlyData = [{
    "x": "1",
    "y": "1"
  }, {
    "x": "3",
    "y": "2"
  }, {
    "x": "5",
    "y": "1"
  }, {
    "x": "6",
    "y": "13"
  }, {
    "x": "7",
    "y": "13"
  }, {
    "x": "8",
    "y": "5"
  }, {
    "x": "9",
    "y": "9"
  }, {
    "x": "10",
    "y": "14"
  }, {
    "x": "11",
    "y": "24"
  }, {
    "x": "12",
    "y": "5"
  }];

  var labels = hourlyData.map(e => moment(e.x, 'HH'));
  var data = hourlyData.map(e => e.y);

  var options = {
    scales: {
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Calls'
        },
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          unit: 'hour',
          displayFormats: {
            hour: 'HH a'
          }
        },
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Hour'
        }
      }]
    },
    tooltips: {
      enabled: true
    },
  };

  new Chart(ctx, {
    type: 'line',
    data: {
      labels: labels,
      data: data
    },
    options: options
  });
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.8.0/Chart.min.css">
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<canvas id="chart_hourlycalls"></canvas>

• javascript
• chart.js

3 Answers 3

I solved it by adding:

import { Chart } from 'chart.js';
import 'chartjs-adapter-moment';

as pointed out by the doc

You need to include Moment.js before Chart.js.

The Chart.js documentation could do a better job of highlighting this, but it is explained on the installation page:

The stand-alone build includes Chart.js as well as the color parsing library. If this version is used, you are required to include Moment.js before Chart.js for the functionality of the time axis.

You could try to put the moment.js script above the chart.js. However here is an example of using moment.js that may help you.

https://stackoverflow./a/58555196/12176979