Thiết kế website giá rẻ

Question

I’m trying to draw several lines on the same graph.

The different datasets have different labels (the X axis comes from a TIMESTAMP salt).
Here, the different datasets are concatenated, but they should overlap.

<!doctype html>
<html lang="fr">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   </head>

<canvas id="evolution"></canvas>


<script>
    new Chart(document.getElementById("evolution"), {
        type : 'line',
        data: {
            datasets: [
            
            {
                data:
                    [{x:'2024-07-11 21:34:52',y:2.0 },{x:'2024-07-11 21:56:03',y:2.5 },{x:'2024-07-11 21:56:08',y:2.590909090909091 },{x:'2024-07-11 21:56:10',y:2.6526408742472913 },{x:'2024-07-11 22:23:17',y:2.699817891112814 },{x:'2024-07-11 22:23:19',y:2.7381352863116124 },{x:'2024-07-11 22:23:36',y:2.7704545546847075 },{x:'2024-07-11 22:23:38',y:2.798429443881428 },{x:'2024-07-11 22:23:39',y:2.823106289650891 },{x:'2024-07-11 22:23:56',y:2.845190848296859 },{x:'2024-07-11 22:25:24',y:2.865182473015637 },{x:'2024-07-11 22:29:56',y:2.883447871528621 },{x:'2024-07-11 22:29:57',y:2.9002644943754285 },{x:'2024-07-11 22:29:59',y:2.9158474606624587 },{x:'2024-07-11 22:32:58',y:2.930367008527791 },{x:'2024-07-11 22:33:22',y:1.9439602188279055 },{x:'2024-07-11 22:33:23',y:1.508122685970799 },],
                label:"test math A"
            },
            
            {
                data:
                    [{x:'2024-07-11 22:23:31',y:2.0 },{x:'2024-07-11 22:25:22',y:2.5 },{x:'2024-07-11 22:25:23',y:2.590909090909091 },{x:'2024-07-11 22:30:00',y:2.6526408742472913 },{x:'2024-07-11 22:30:01',y:2.699817891112814 },{x:'2024-07-11 22:30:02',y:2.7381352863116124 },{x:'2024-07-11 22:31:14',y:2.7704545546847075 },{x:'2024-07-11 22:31:15',y:2.798429443881428 },{x:'2024-07-11 22:31:19',y:2.823106289650891 },{x:'2024-07-11 22:32:32',y:2.845190848296859 },{x:'2024-07-11 22:32:34',y:2.865182473015637 },{x:'2024-07-11 22:32:35',y:2.883447871528621 },{x:'2024-07-11 22:33:00',y:2.9002644943754285 },{x:'2024-07-11 22:33:01',y:2.9158474606624587 },{x:'2024-07-11 22:33:02',y:2.930367008527791 },],
                label:"test math B"
            },
            
            {
                data:
                    [{x:'2024-07-12 09:03:38',y:2.0 },{x:'2024-07-12 12:29:13',y:2.5 },{x:'2024-07-12 12:33:40',y:2.590909090909091 },{x:'2024-07-12 12:33:55',y:2.6526408742472913 },{x:'2024-07-12 12:34:20',y:2.699817891112814 },{x:'2024-07-12 12:34:31',y:2.7381352863116124 },{x:'2024-07-12 12:34:38',y:2.7704545546847075 },{x:'2024-07-12 12:34:53',y:2.798429443881428 },{x:'2024-07-12 12:36:44',y:2.823106289650891 },{x:'2024-07-12 12:37:50',y:2.845190848296859 },{x:'2024-07-12 12:37:55',y:1.8651824730156372 },{x:'2024-07-12 12:40:24',y:1.515596056875553 },{x:'2024-07-12 12:40:40',y:1.418574246449834 },{x:'2024-07-12 12:41:07',y:1.354263973301821 },{x:'2024-07-12 12:41:33',y:1.3056368357173131 },{x:'2024-07-12 12:42:59',y:1.266382980016693 },{x:'2024-07-12 12:43:38',y:1.2334065953851294 },{x:'2024-07-12 12:44:40',y:1.2049441134952772 },{x:'2024-07-12 12:57:59',y:1.1798905794299812 },{x:'2024-07-12 13:00:01',y:1.1575059867417947 },{x:'2024-07-12 13:00:22',y:1.1372695858821262 },{x:'2024-07-12 13:00:29',y:1.118800593767888 },{x:'2024-07-12 13:00:48',y:1.1018119110549083 },{x:'2024-07-12 13:00:51',y:1.0860815778051514 },{x:'2024-07-12 13:01:12',y:1.0714343678697171 },{x:'2024-07-12 13:01:15',y:1.0577294759536757 },{x:'2024-07-12 13:03:24',y:1.0448520214832884 },],
                label:"test compe FR A"
            },
            
            ]
        },
        options : {
            scales: {
                xAxes: [{
                    type: 'time'
                }]
            },
            title : {
                display : true,
                text : 'Evolution'
            }
        }
    });
</script>
   </body>
</html>

Thiết kế website giá rẻ

Danh mục

Chart.js line plot with multiple overlapping datasets