I am wanting to display the temperature readings from a database on a graph. However, at the moment the x-axis is displaying incorrect values that do not correspond with my test dataset.

The x-axis is meant to be in the time domain using timestamps, instead, the graph uses each character from the label 'Reddd' as a value for the x-axis.

The y-axis is correct and corresponds to the test data points.

The function below includes the javascript code for constructing the graph.

function makeGraph() {
    const ctx = document.getElementById('canvas').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: 'Reddd',
            datasets: [{
                label: 'Temperature',
                data: [{"x": 1647281788963, "y": 22.9}, {"x": 1647281994496, "y": 26.9}, {"x": 1647282200029, "y": 21.9}, {"x": 1647282405562, "y": 24.9}, {"x": 1647282611094, "y": 28.9}],
                backgroundColor: 'transparent',
                borderColor: 'red',
                borderWidth: 2
            }]
        },
        options: {
            scales: {
                x: {
                    type: 'time',
                    time: {
                        // Luxon format string
                        tooltipFormat: 'DD T'

                    },
                    title: {
                        display: true,
                        text: 'Date'
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'value'
                    }
                }
            }
        }
    });


}

This is the output of the graph:

If I dont include a string after the labels: statment, the graph will look this:

I am wanting to display the temperature readings from a database on a graph. However, at the moment the x-axis is displaying incorrect values that do not correspond with my test dataset.

The x-axis is meant to be in the time domain using timestamps, instead, the graph uses each character from the label 'Reddd' as a value for the x-axis.

The y-axis is correct and corresponds to the test data points.

The function below includes the javascript code for constructing the graph.

function makeGraph() {
    const ctx = document.getElementById('canvas').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: 'Reddd',
            datasets: [{
                label: 'Temperature',
                data: [{"x": 1647281788963, "y": 22.9}, {"x": 1647281994496, "y": 26.9}, {"x": 1647282200029, "y": 21.9}, {"x": 1647282405562, "y": 24.9}, {"x": 1647282611094, "y": 28.9}],
                backgroundColor: 'transparent',
                borderColor: 'red',
                borderWidth: 2
            }]
        },
        options: {
            scales: {
                x: {
                    type: 'time',
                    time: {
                        // Luxon format string
                        tooltipFormat: 'DD T'

                    },
                    title: {
                        display: true,
                        text: 'Date'
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'value'
                    }
                }
            }
        }
    });


}

This is the output of the graph:

If I dont include a string after the labels: statment, the graph will look this:

• javascript
• html
• css
• json
• chart.js

1 Answer 1

First, you must not define data.labels.

Further, the x-axis could be defined as follows:

x: {
  type: 'time',
  time: {
    unit: 'minute',
    displayFormats: {
      minute: 'DD T'
    },
    tooltipFormat: 'DD T'
  },
  ...

Please take a look at your amended and runnable code below and see how it works.

new Chart('canvas', {
  type: 'line',
  data: {
    datasets: [{
      label: 'Temperature',
      data: [
        {"x": 1647281788963, "y": 22.9}, 
        {"x": 1647281994496, "y": 26.9}, 
        {"x": 1647282200029, "y": 21.9}, 
        {"x": 1647282405562, "y": 24.9}, 
        {"x": 1647282611094, "y": 28.9}
      ],               
      backgroundColor: 'transparent',
      borderColor: 'red',
      borderWidth: 2,
      tension: 0.5
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'minute',
          displayFormats: {
              minute: 'DD T'
          },
          tooltipFormat: 'DD T'
        },
        title: {
          display: true,
          text: 'Date'
        }
      },
      y: {
        title: {
          display: true,
          text: 'value'
        }
      }
    }
  }
});

<script src="https://cdn.jsdelivr/npm/chart.js@^3"></script>
<script src="https://cdn.jsdelivr/npm/luxon@^2"></script>
<script src="https://cdn.jsdelivr/npm/chartjs-adapter-luxon@^1"></script>
<canvas id="canvas" height="120"></canvas>