IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Diagramme simple avec deux courbes


Sujet :

CSS

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Salarié
    Inscrit en
    Septembre 2024
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Salarié

    Informations forums :
    Inscription : Septembre 2024
    Messages : 3
    Points : 1
    Points
    1
    Par défaut Diagramme simple avec deux courbes
    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.

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 411
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 411
    Points : 15 780
    Points
    15 780
    Par défaut
    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

  3. #3
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 411
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 411
    Points : 15 780
    Points
    15 780
    Par défaut
    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>

  4. #4
    Nouveau Candidat au Club
    Homme Profil pro
    Salarié
    Inscrit en
    Septembre 2024
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Salarié

    Informations forums :
    Inscription : Septembre 2024
    Messages : 3
    Points : 1
    Points
    1
    Par défaut Diagramme
    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.

  5. #5
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 411
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 411
    Points : 15 780
    Points
    15 780
    Par défaut
    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.

  6. #6
    Nouveau Candidat au Club
    Homme Profil pro
    Salarié
    Inscrit en
    Septembre 2024
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Salarié

    Informations forums :
    Inscription : Septembre 2024
    Messages : 3
    Points : 1
    Points
    1
    Par défaut
    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.

Discussions similaires

  1. Ecrire un solveur de Sudoku simple avec deux méthodes
    Par master MI dans le forum Langage
    Réponses: 9
    Dernier message: 11/11/2020, 17h31
  2. Diagramme simple avec la fonction barplot
    Par aaristayeta dans le forum R
    Réponses: 0
    Dernier message: 14/10/2012, 23h19
  3. Réponses: 8
    Dernier message: 02/06/2011, 17h13
  4. Réponses: 0
    Dernier message: 18/05/2011, 11h35
  5. Réponses: 1
    Dernier message: 17/08/2008, 13h20

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo