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

Bibliothèques & Frameworks Discussion :

[AnyChart] Créer une barre d'objectif


Sujet :

Bibliothèques & Frameworks

  1. #1
    Nouveau membre du Club Avatar de theocbr
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2019
    Messages
    60
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 19
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juin 2019
    Messages : 60
    Points : 39
    Points
    39
    Par défaut [AnyChart] Créer une barre d'objectif
    Bonjour , actuellement en stage , j'ai besoin d'aide concernant le js , j'aimerais insérer une barre modulable (soit avec la souris , ou sois en rentrant des valeurs , le plus simple me suffit) qui servirait d'objectif à atteindre dans un graphique , exemple :



    Nom : IMG_3031.JPG
Affichages : 69
Taille : 1,64 Mo
    “L’homme est la mesure de toute chose” Protagoras

    Pensez à mettre !

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 839
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 839
    Points : 33 660
    Points
    33 660
    Par défaut
    Bonjour et bienvenue sur DVP.
    Il serait intéressant que tu nous dises comment ou avec quelle librairie tu réalises ton graphe.

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 403
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 403
    Points : 65 822
    Points
    65 822
    Billets dans le blog
    1
    Par défaut
    Il faudrait aussi apprendre la rotation des images, j'ai mal au cou

    Sinon y'a alt+impr écran ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 839
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 839
    Points : 33 660
    Points
    33 660
    Par défaut
    Citation Envoyé par SpaceFrog
    Il faudrait aussi apprendre la rotation des images, j'ai mal au cou
    comment tu fais, moi je tourne l'écran !

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 403
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 403
    Points : 65 822
    Points
    65 822
    Billets dans le blog
    1
    Par défaut
    Mince, j'ai tenté de tilter le bureau, mais tout est tombé ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  6. #6
    Nouveau membre du Club Avatar de theocbr
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2019
    Messages
    60
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 19
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juin 2019
    Messages : 60
    Points : 39
    Points
    39
    Par défaut
    question de flemme pour l'image ^^'

    j'utilise la blibliotheque GoogleCharts , oui c'est pas la meilleur , mais j'ai cherché dans highcharts et j'ai pas trouvé mon bonheur.

    Voici mon code si besoin :


    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
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    <body>
      <div id="container"></div>
      <script>
    anychart.onDocumentReady(function () {
        // créer un ensemble de données sur nos données
        var dataSet = anychart.data.set([
            
            ['Lundi',resulttotalL3, resulttotalL1, resulttotalL2],
            ['Mardi',resulttotalL3 ,resulttotalL1 , resulttotalL2 ],
            ['Mercredi',resulttotalL3 ,resulttotalL1 , resulttotalL2],
            ['Jeudi',resulttotalL3 ,resulttotalL1,resulttotalL2 ],
            ['Vendredi', resulttotalL3 , resulttotalL1,resulttotalL2 ],
            ['Samedi',resulttotalL3 ,resulttotalL1 ,resulttotalL2],
            
        ]);
     
        // mapper les données pour la première série, prendre x dans la colonne zéro et la valeur dans la première colonne du jeu de données
        var seriesData_1 = dataSet.mapAs({'x': 0, 'value': 1});
     
        // map data for the second series, take x from the zero column and value from the second column of data set
        var seriesData_2 = dataSet.mapAs({'x': 0, 'value': 2});
     
        // map data for the second series, take x from the zero column and value from the third column of data set
        var seriesData_3 = dataSet.mapAs({'x': 0, 'value': 3});
     
        // map data for the fourth series, take x from the zero column and value from the fourth column of data set
        var seriesData_4 = dataSet.mapAs({'x': 0, 'value': 4});
     
        // créer un graphique à barres
        var chart = anychart.column();
     
        // activer l'animation graphique
     
        chart.animation(true);
     
        // force graphique pour empiler les valeurs par l’échelle Y.
        chart.yScale().stackMode('value');
     
        // définir les paramètres de texte du titre du graphique
         chart.title('Conditionnement');
        chart.title().padding([0, 0, 5, 0]);
     
        // fonction d'assistance pour configurer les paramètres d'étiquette pour toutes les séries
        var setupSeriesLabels = function (series, name) {
            series.name(name)
                    .stroke('3 #fff 1');
            series.hovered().stroke('3 #fff 1');
        };
     
        // variable temporaire pour stocker l'instance de la série
        var series;
     
        // créer la première série avec des données mappées
        series = chart.column(seriesData_1);
        setupSeriesLabels(series, 'FP');
     
        // créer une deuxième série avec des données mappées
        series = chart.column(seriesData_2);
        setupSeriesLabels(series, 'BPA');
     
        // créer une troisième série avec des données mappées
        series = chart.column(seriesData_3);
        setupSeriesLabels(series, 'PAAL');
     
     
        // turn on legend
        chart.legend().enabled(true).fontSize(13).padding([0, 0, 20, 0]);
        // set yAxis labels formatter
        chart.yAxis().labels().format('{%Value}{groupsSeparator: }');
     
        // définir les titres des axes
        chart.xAxis().title('Jour de la semaine');
        chart.yAxis().title('Pochons');
     
        // définir le survol interactif
        chart.interactivity().hoverMode('by-x');
     
        chart.tooltip()
                .valuePrefix('$')
                .displayMode('union');
        // définir l'identifiant du conteneur pour le graphique
        chart.container('container');
     
        // initier le dessin graphique
        chart.draw();
    });
    </script>
    </body>
    “L’homme est la mesure de toute chose” Protagoras

    Pensez à mettre !

  7. #7
    Nouveau membre du Club Avatar de theocbr
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2019
    Messages
    60
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 19
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juin 2019
    Messages : 60
    Points : 39
    Points
    39
    Par défaut
    j'ai cherché un peur par moi même et j'ai trouvé qlq chose , le problème c'est que je n'arrive pas a empilée la barre de seuil sur les données du graph et si possible j'aimerais changer "series 3" par "objectif"

    Nom : Captureergr.PNG
Affichages : 37
Taille : 18,6 Ko


    Code : 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
    78
    79
    80
    81
    82
    83
    84
    85
    86
     
     
      <script>
    anychart.onDocumentReady(function () {
        // créer un ensemble de données sur nos données
        var dataSet = anychart.data.set([
     
            ['Lundi',resultcondiLundiFP, resultcondiLundiBPA, resultcondiLundiPaal],
            ['Mardi',resultcondiMardiFP ,resultcondiMardiBPA , resultcondiMardiPaal ],
            ['Mercredi',resultcondiMercrediFP ,resultcondiMercrediBPA , resultcondiMercrediPaal],
            ['Jeudi',resultcondiJeudiFP ,resultcondiJeudiBPA,resultcondiJeudiPaal ],
            ['Vendredi', resultcondiVendrediFP , resultcondiVendrediBPA,resultcondiVendrediPaal ],]);
    		var data3 = [700000, 700000, 700000, 700000, 700000];
     
        // mapper les données pour la première série, prendre x dans la colonne zéro et la valeur dans la première colonne du jeu de données
        var seriesData_1 = dataSet.mapAs({'x': 0, 'value': 1});
     
        // map data for the second series, take x from the zero column and value from the second column of data set
        var seriesData_2 = dataSet.mapAs({'x': 0, 'value': 2});
     
        // map data for the second series, take x from the zero column and value from the third column of data set
        var seriesData_3 = dataSet.mapAs({'x': 0, 'value': 3});
     
        // map data for the fourth series, take x from the zero column and value from the fourth column of data set
        var seriesData_4 = dataSet.mapAs({'x': 0, 'value': 4});
     
        // créer un graphique à barres
        var chart = anychart.column();
     
        // activer l'animation graphique
     
        chart.animation(true);
     
        // force graphique pour empiler les valeurs par l’échelle Y.
        chart.yScale().stackMode('value');
     
        // définir les paramètres de texte du titre du graphique
         chart.title('Conditionnement');
        chart.title().padding([0, 0, 5, 0]);
     
        // fonction d'assistance pour configurer les paramètres d'étiquette pour toutes les séries
        var setupSeriesLabels = function (series, name) {
            series.name(name)
                    .stroke('3 #fff 1');
            series.hovered().stroke('3 #fff 1');
        };
     
        // variable temporaire pour stocker l'instance de la série
        var series;
     
        // créer la première série avec des données mappées
        series = chart.column(seriesData_1);
        setupSeriesLabels(series, 'FP');
     
        // créer une deuxième série avec des données mappées
        series = chart.column(seriesData_2);
        setupSeriesLabels(series, 'BPA');
     
        // créer une troisième série avec des données mappées
        series = chart.column(seriesData_3);
        setupSeriesLabels(series, 'PAAL');
     
    	chart.line(data3); // barre de seuil
     
        // turn on legend
        chart.legend().enabled(true).fontSize(13).padding([0, 0, 20, 0]);
        // set yAxis labels formatter
        chart.yAxis().labels().format('{%Value}{groupsSeparator: }');
     
        // définir les titres des axes
        chart.xAxis().title('Jour de la semaine');
        chart.yAxis().title('Pochons');
     
        // définir le survol interactif
        chart.interactivity().hoverMode('by-x');
     
        chart.tooltip()
                .valuePrefix('')
                .displayMode('union');
        // définir l'identifiant du conteneur pour le graphique
        chart.container('container');
     
        // initier le dessin graphique
        chart.draw();
    });
    </script>
    “L’homme est la mesure de toute chose” Protagoras

    Pensez à mettre !

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 839
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 839
    Points : 33 660
    Points
    33 660
    Par défaut
    Tu dis utiliser la bibliothèque GoogleCharts, mais le code que tu montres utilise la bibliothèque anychart (payante) !

    La dernière image que tu proposes n'a rien à voir avec la première postée (forme du graphique) !!

    Pourrais tu clarifier tout cela et nous dire ce que tu souhaites obtenir réellement !!!

  9. #9
    Nouveau membre du Club Avatar de theocbr
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2019
    Messages
    60
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 19
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juin 2019
    Messages : 60
    Points : 39
    Points
    39
    Par défaut
    J'utilisais pour une autre page un graph de googlecharts sorry je me suis embrouillée, effectivement j'utilise anychart , la forme du graphique on s'en fiche j'ai voulu montrer la barre d'objectif pas le graph c:

    Et je souhaiterais en utilisant le code ci dessus , placer cette barre de seuil au dessus de mes données , comme sur la photo.
    Je vois pas comment tu peux ne pas comprendre...
    “L’homme est la mesure de toute chose” Protagoras

    Pensez à mettre !

  10. #10
    Nouveau membre du Club Avatar de theocbr
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2019
    Messages
    60
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 19
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juin 2019
    Messages : 60
    Points : 39
    Points
    39
    Par défaut
    C'est bon en cherchant moi même j'ai trouvé une solution en bidouillant un peu dans anycharts , j'ai trouvé une ligne déjà faite , je l'ai intégrée et je l'ai adaptée a mon graph.



    Nom : dfxfdx.PNG
Affichages : 32
Taille : 50,6 Ko

    Je laisse le code , si nécéssaire :

    Code : 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
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
      <script>
    anychart.onDocumentReady(function () {
        // créer un ensemble de données sur nos données
        var dataSet = anychart.data.set([
    	
            ['Lundi',resultcondiLundiFP, resultcondiLundiBPA, resultcondiLundiPaal,],
            ['Mardi',resultcondiMardiFP ,resultcondiMardiBPA , resultcondiMardiPaal ],
            ['Mercredi',resultcondiMercrediFP ,resultcondiMercrediBPA , resultcondiMercrediPaal],
            ['Jeudi',resultcondiJeudiFP ,resultcondiJeudiBPA,resultcondiJeudiPaal ],
            ['Vendredi', resultcondiVendrediFP , resultcondiVendrediBPA,resultcondiVendrediPaal ],]);
    		
    		
        // mapper les données pour la première série, prendre x dans la colonne zéro et la valeur dans la première colonne du jeu de données
        var seriesData_1 = dataSet.mapAs({'x': 0, 'value': 1});
    
        // map data for the second series, take x from the zero column and value from the second column of data set
        var seriesData_2 = dataSet.mapAs({'x': 0, 'value': 2});
    
        // map data for the second series, take x from the zero column and value from the third column of data set
        var seriesData_3 = dataSet.mapAs({'x': 0, 'value': 3});
    
    
    
        // créer un graphique à barres
        var chart = anychart.column();
    
        // activer l'animation graphique
    
        chart.animation(true);
    
        // force graphique pour empiler les valeurs par l’échelle Y.
        chart.yScale().stackMode('value');
    
        // définir les paramètres de texte du titre du graphique
         chart.title('Conditionnement');
        chart.title().padding([0, 0, 5, 0]);
    
        // fonction d'assistance pour configurer les paramètres d'étiquette pour toutes les séries
        var setupSeriesLabels = function (series, name) {
            series.name(name)
                    .stroke('3 #fff 1');
            series.hovered().stroke('3 #fff 1');
        };
    
        // variable temporaire pour stocker l'instance de la série
        var series;
    
        // créer la première série avec des données mappées
        series = chart.column(seriesData_1);
        setupSeriesLabels(series, 'FP');
    
        // créer une deuxième série avec des données mappées
        series = chart.column(seriesData_2);
        setupSeriesLabels(series, 'BPA');
    
        // créer une troisième série avec des données mappées
        series = chart.column(seriesData_3);
        setupSeriesLabels(series, 'PAAL');
    	
    	
    	//BARRE DE SEUIL
    	   var yAxis = chart.yAxis();
    var marker = chart.lineMarker();
    marker.axis(yAxis);
    marker.value(700000);
    marker.stroke('red 1', 3);
    marker.zIndex(100);
      var textMarker = chart.textMarker();
    textMarker.axis(chart.yAxis());
    textMarker.value(70000);
    textMarker.align("right");
    textMarker.anchor("right-bottom");
    textMarker.fontSize(24);
    textMarker.fontColor("red");
    textMarker.offsetX(5);
    textMarker.offsetY(255)
    textMarker.text("Objectif");
       
    
    	 
        // turn on legend
        chart.legend().enabled(true).fontSize(13).padding([0, 0, 20, 0]);
        // set yAxis labels formatter
        chart.yAxis().labels().format('{%Value}{groupsSeparator: }');
    
        // définir les titres des axes
        chart.xAxis().title('Jour de la semaine');
        chart.yAxis().title('Pochons');
    
        // définir le survol interactif
        chart.interactivity().hoverMode('by-x');
    
        chart.tooltip()
                .valuePrefix('')
                .displayMode('union');
        // définir l'identifiant du conteneur pour le graphique
        chart.container('container');
    
        // initier le dessin graphique
        chart.draw();
    });
    </script>
    “L’homme est la mesure de toute chose” Protagoras

    Pensez à mettre !

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 839
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 839
    Points : 33 660
    Points
    33 660
    Par défaut
    Je vois pas comment tu peux ne pas comprendre...
    en l’absence de précision et n'étant pas dans ta tête pour savoir ce que précisément tu veux réalisé et d'autant que ...

    je me suis embrouillée, (..)
    alors j'ai peur que nous l'étions également

  12. #12
    Nouveau membre du Club Avatar de theocbr
    Homme Profil pro
    Étudiant
    Inscrit en
    juin 2019
    Messages
    60
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 19
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juin 2019
    Messages : 60
    Points : 39
    Points
    39
    Par défaut
    Effectivement , je n'ai pas l'habitude de poster sur un forum , maintenant je sais qu'il faut bien tout expliquer car vous êtes "heureusement" pas dans ma tête.

    Merci pour ton écoute
    “L’homme est la mesure de toute chose” Protagoras

    Pensez à mettre !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Créer une barre d'outil
    Par Trebor dans le forum Général Conception Web
    Réponses: 6
    Dernier message: 03/07/2006, 12h25
  2. Créer une barre de défilement
    Par damleg dans le forum Windows
    Réponses: 4
    Dernier message: 10/05/2006, 15h16
  3. Quel classe pour créer une barre en bas d'une JFrame
    Par daninho dans le forum Agents de placement/Fenêtres
    Réponses: 4
    Dernier message: 01/02/2006, 09h30
  4. créer une barre de navigation déroulante aide
    Par max45 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 28/11/2005, 20h57
  5. Créer une barre de progression sous Vba ??
    Par Deejoh dans le forum Général VBA
    Réponses: 7
    Dernier message: 17/10/2005, 15h05

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