code JS demo pour présentation de données. utilisant https://www.chartjs.org/

weekly.js

      // convert from date string to date object
      function convert_to_date(date_str) {
        var timestamp = Date.parse(date_str);
        var date_obj = new Date(timestamp);
        return date_obj;
      }
      // Create a label string of two dates for each week starting with the beginning date.
      function make_labels(date_start) {
        var date_obj = date_start.timestamp;
        date_str_start = date_obj.toLocaleDateString("en-US", date_options);
        date_obj.setDate(date_obj.getDate() + 6);
        date_str_end = date_obj.toLocaleDateString("en-US", date_options);
        return [date_str_start + " - " + date_str_end];
      }
      // Convert data_structure
      function data_with_date_obj(val) {
        return {
          count: val.count,
          timestamp: convert_to_date(val.timestamp),
        };
      }
      // raw data
      const raw_data = [
        { count: 284, timestamp: "2021-02-01T00:00:00Z" },
        { count: 321, timestamp: "2021-02-08T00:00:00Z" },
        { count: 275, timestamp: "2021-02-15T00:00:00Z" },
        { count: 266, timestamp: "2021-02-22T00:00:00Z" },
        { count: 321, timestamp: "2021-03-01T00:00:00Z" },
        { count: 288, timestamp: "2021-03-08T00:00:00Z" },
        { count: 262, timestamp: "2021-03-15T00:00:00Z" },
        { count: 469, timestamp: "2021-03-22T00:00:00Z" },
        { count: 700, timestamp: "2021-03-29T00:00:00Z" },
      ];

      // convert the data set to have timestamps as date objects
      var normalized_data = raw_data.map(data_with_date_obj);

      // formatting options for dates
      const date_options = { year: "numeric", month: "long", day: "numeric" };
      // Create the list of date labels for the graphs.
      var date_labels = normalized_data.map(make_labels);

      // Create the context of the canvas graph
      var ctx = document.getElementById("weekly_chart").getContext("2d");

      // Data configuration
      const data = {
        datasets: [
          {
            label: "weekly distribution",
            data: normalized_data,
            backgroundColor: 'rgba(255, 205, 86, 0.2)',
            borderColor: 'rgb(255, 159, 64)',
            borderWidth: 1
          },
        ],
        labels: date_labels,
      };
      // Graph options
      const options = {
        parsing: {
          xAxisKey: "timestamp",
          yAxisKey: "count",
        },
        layout: {
          padding: {
            left: 20,
            right: 20,
            top: 20,
          },
        },
        scales: {
            x: {
            grid: {
              display: false
            }
        }
        }
      };
      // Define the bar chart
      var myChart = new Chart(ctx, {
        type: "bar",
        data: data,
        options: options,
      });