Diagramme simple avec deux courbes

**Vincent_000** · 08/09/2024, 04h32

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** · 08/09/2024, 13h40

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** · 08/09/2024, 14h38

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>

**Vincent_000** · 08/09/2024, 22h31

Bonjour Matthieu et merci.

Ça se rapproche même plutôt bien je vais utiliser cette bibliothèque merci encore.

Le copié-collé du premier diagramme dans Codepen celui que j'ai envoyé dans le premier message est tiré d'un article tiré lui aussi d'un autre article... Je n'ai pas de grandes idées en fait sur cette "création de diagramme"... Et sans grandes précisions sur cette balise html <polyline> ni sur une quelconque façon en css.

Je vais regarder sur la documentation de cette bibliothèque parfois ils expliquent comment laisser un simple lien à leur projet.

Je profite avez-vous des informations vous sur pourquoi utiliser une bibliothèque plutôt que deux langages ? Qu'est ce qu'il y a à savoir ?

Est-ce qu'il existe par exemple une façon de créer ces courbes dans un seul langage ? La feuille de style simplement ? C'est un langage basique simple et intéressant...

Merci beaucoup.

**mathieu** · 08/09/2024, 23h24

l'avantage d'un langage de programmation est qu'il permet de séparer les données et la présentation de ces données.
par exemple dans le code du message précédent, il suffit de modifier le tableau pour que le graphique se mette à jour, vous n'avez pas besoin de modifier directement le code du graphique.
et à l'inverse, si vous trouvez une autre présentation qui vous convient mieux, vous pouvez partir de même données. et une évolution serait par exemple de faire une page de saisie des données, de les stocker dans une base de données et ensuite de les utiliser pour faire le graphique.

**Vincent_000** · 09/09/2024, 19h36

Le plus important pour l'instant selon moi est trouver aussi une solution dans un seul langage comme cascading styles sheets.

Faire une page de données, enregistrer, sauvegarder etc... C'est très bien mais par exemple je n'ai fait aucune recherche sur internet sur un site un blog ou un article sur une quelconque façon de sauvegarder ou de créer une page de données. Dans ce langage seul c'est une évidence... impossible.

Je n'ai aucunes réponses par exemple pour une page de "variables" ou d'"attributs" à créer ou bien par exemple une article un blog qui explique une façon très poussée de sauvegarder des données...

J'insiste et après je pense que ça me suffira en espérant que d'autres propositions arrivent. Avez-vous vous une piste à me donner en plus de cette bibliothèque¨que qui me convient parfaitement pour créer ce diagramme simplement en CSS pur sans passer par un autre langage comme le HTML ?

De ce que je sais dans ce langage impossible car il est obligatoire de passer par quelque chose de modifiable comme une "div" et impossible de modifier un contenu ajouté par une propriété.

Je n'en sais pas plus en tout cas merci.

Diagramme simple avec deux courbes

CSS

Discussions similaires

Partager

Partager