[AnyChart] Créer une barre d'objectif

Version imprimable

04/06/2019, 09h12
theocbr

1 pièce(s) jointe(s)

[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 :

Pièce jointe 480518
05/06/2019, 09h48
NoSmoking

Bonjour et bienvenue sur DVP.
Il serait intéressant que tu nous dises comment ou avec quelle librairie tu réalises ton graphe.
05/06/2019, 10h00
SpaceFrog

Il faudrait aussi apprendre la rotation des images, j'ai mal au cou ;)

Sinon y'a alt+impr écran ...
05/06/2019, 10h07
NoSmoking

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 !
:dehors:
05/06/2019, 10h32
SpaceFrog

Mince, j'ai tenté de tilter le bureau, mais tout est tombé ...

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:

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>

1 pièce(s) jointe(s)

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"

Pièce jointe 482761

Code:

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>

12/06/2019, 18h43
NoSmoking

• 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 !!!
13/06/2019, 08h16
theocbr

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...

1 pièce(s) jointe(s)

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.

Pièce jointe 483031

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

Code:

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>

13/06/2019, 16h35
NoSmoking

Citation:

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 ...

Citation:

je me suis embrouillée, (..)

alors j'ai peur que nous l'étions également :aie:
14/06/2019, 15h33
theocbr

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 ;)