Diagramme simple avec deux courbes

**Vincent_000** · Aujourd'hui, 03h32

Bonjour,

Je suis salarié dans une entreprise de nettoyage et je collecte/ramasse tous les jours sur le sol des objets (vis,clous,pointes et autres).

Voulant partager mes trouvailles avec la société qui m'emploi j'ai pensé à un diagramme simple avec simplement 2 courbes maximum de deux couleurs différentes sur une période de 7 mois avec une "échelle" de 1 à 10 avec 3 "annotations".

J'ai tenté de dialoguer avec l'IA ChatGPT les résultats donnés sont plus que corrects mais toujours à côté du résultat attendu...Que ce soit pour la création d'un fichier format PNG ou autres ou pour toute création...

J'ai cherché du côté de Google Sheets mais un peu compliqué ou un peu long pour créer un simple diagramme avec deux courbes.

J'ai tenté de chercher du côté de générateurs de diagrammes avec la recherche Google mais toujours un peu compliqué.

J'ai très certainement stopper mes demandes à l'IA du fait de la gratuité du service et forcément par ses restrictions et j'ai plus que certainement mal cherché que ce soit vers des sites en anglais comme Stackoverflow ou d'autres ou bien encore du côté la recherche Google ou mal cherché tout court tout simplement mais plutôt rapide et satisfait du côté de CSS et HTML ... ! Exemple de diagramme trouvé sur la recherche Google et copié-collé sur Codepen !

Avez-vous des informations ou des étapes à me donner ou bien tout simplement un lien vers un blog ou une page web qui utilise cette technique/balise CSS <polyline> ? Modifier la couleur, rajouter une deuxième courbe d'une deuxième couleur... Etc.

Le lien : https://codepen.io/Vincent-Parzy/pen/NWZEPqg

Un exemple sinon sur cette page : https://books.google.com/ngrams/grap...content=doodle

Merci.

**mathieu** · Aujourd'hui, 12h40

pour des graphiques, j'utilise souvent chartjs, c'est une bibliothèque javascript :
cet exemple là a l'air d'être proche de ce que vous voulez comme résultat ?
https://www.chartjs.org/docs/latest/...ulti-axis.html

**mathieu** · Aujourd'hui, 13h38

j'ai repris l'exemple de cette page, et ça donne ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" integrity="sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
 
<script>
"use strict";
 
const donnees = {
        "juin 2024" : {"clous" : 45, "vis" : 48, "autres" : 4},
        "juillet 2024" : {"clous" : 45, "vis" : 3, "autres" : 0},
        "aout 2024" : {"clous" : 37, "vis" : 42, "autres" : 6},
};
 
 
const data = {
  labels: Object.keys(donnees),
  datasets: [],
};
 
const premier_element = Object.entries(donnees)[0][1];
Object.keys(premier_element).forEach(type => {
        
        data["datasets"].push({
                "label" : type,
                "data" : Object.entries(donnees).map(ligne => ligne[1][type]),
        });
        
});
 
 
const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    interaction: {
      mode: 'index',
      intersect: false,
    },
    stacked: false,
    plugins: {
      title: {
        display: true,
        text: 'Titre du graphique'
      }
    },
    scales: {
      y: {
        type: 'linear',
        display: true,
        position: 'left',
      },
    },
  },
};
 
 
document.addEventListener("DOMContentLoaded", e => {
        
        new Chart(document.getElementById('graphique'), config);
        
});
 
</script>
 
 
<div style="width : 800px;"><canvas id="graphique"></canvas></div>
 
 
</body>
 
</html>

Diagramme simple avec deux courbes

CSS

Discussions similaires

Partager

Partager