Time chart base

by Jesper02

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@2.0.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon"></script>
<canvas id="myChart" width="100%" height="50%"></canvas>

JavaScript

function generateTestSeries () { // create test data
    let series = [];
    var val = 0;

    let start = new Date(2021, 10, 15, 15);
    let end = new Date(2021, 10, 15, 16);

    while (start < end) {
        val += Math.floor(Math.random() * 11) - 5;

        series.push({
            "x": start, 
            "y": val, 
        });

        start = new Date(start.getTime() + 60000);
    }
    
    return series;
}

var labels = [
  new Date(2021, 10, 15, 15, 0),
  new Date(2021, 10, 15, 15, 5),
  new Date(2021, 10, 15, 15, 10),
  new Date(2021, 10, 15, 15, 15),
  new Date(2021, 10, 15, 15, 20),
  new Date(2021, 10, 15, 15, 25),
  new Date(2021, 10, 15, 15, 30),
  new Date(2021, 10, 15, 15, 35),
  new Date(2021, 10, 15, 15, 40),
  new Date(2021, 10, 15, 15, 45),
  new Date(2021, 10, 15, 15, 50),
  new Date(2021, 10, 15, 15, 55),
  new Date(2021, 10, 15, 16, 0),
];


var data = {
  labels: labels,
  datasets: [{
    label: 'My First Dataset',
    data: generateTestSeries(),
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};


const config = {
  type: 'line',
  data: data,
  options: { 
  	  animation: false,
      parsing: true,
      scales: {
          xAxis: {
                type: 'time',
                
                ticks: {
                    source: 'labels', // get ticks from given labels
                },

                time: {
                    minUnit: 'minute', // smallest time format

                    displayFormats: {
                        minute: "HH:mm",
                        hour: "dd/MM HH:mm",
                        day: "dd/MM",
                        week: "dd/MM",
                        month: "MMMM yyyy",
                        quarter: 'MMMM yyyy',
                        year: "yyyy",
                    }
                }
            },
        },
    }
};


var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, config);