Discussion :

[Bruno13]

Bonjour à tous,

J'ai un problème avec un chart Line multiséries.
Tout d'abord voici les données que j'ai dans un Array:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
                    0: {r: "BURTON CORP", c: "2016", f: 1}
                    1: {r: "BURTON CORP", c: "2015", f: 2}
                    2: {r: "BURTON CORP", c: "2010", f: 1}
                    3: {r: "BURTON CORP", c: "2008", f: 1}
                    4: {r: "SAM SPORT AND MARKETING AG", c: "2010", f: 2}
                    5: {r: "SAM SPORT AND MARKETING AG", c: "2008", f: 4}
                    6: {r: "ROSSIGNOL SA", c: "2009", f: 1}
                    7: {r: "ROSSIGNOL SA", c: "2010", f: 1}
                    8: {r: "MARKER DEUTSCHLAND GMBH", c: "2014", f: 1}
                    9: {r: "K 2 CORP", c: "2012", f: 1}
                    10: {r: "K 2 CORP", c: "2009", f: 1}
                    11: {r: "GOODWELL INT LTD", c: "2009", f: 1}

Ici je voudrais donc avoir 6 séries (Burton, Sam, Rossignol, Marker, K2, Goodwell)
Avec en X les Dates (c), et en Y les Fréquences (f)
Note très importante, ce tableau se rempli suite à des cases à cocher qu'un utilisateur choisi

Comme j'ai programmé de manière à charger une config, je me retrouve à charger dans un premier temps ma config de base:
J'ajoute/enlève ensuite les séries qui correspondent aux items cochées/décochées dans le onSelectionChange de ma Grid.

Ma Base du chart sans les séries:

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
....
....
        biglines: {
                xtype   : 'chart',
                id      : 'bigchart',
                itemId  : 'bigchart',
                style   : {
                    'background'    : '#fff',
                    border          : '0px solid silver;-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;'
                },
                animate : true,
                shadow  : true,
                store   : '.............SlavesEMPTY',
                insetPadding    : 40,
                items   : [
                    {
                        type    : 'text',
                        id      : 'bigcharttitle',
                        font    : '16px Helvetica',
                        width   : 80,
                        height  : 20,
                        x       : 12, //the sprite x position
                        y       : 18  //the sprite y position
                    }
                ],
                axes    : [
                    {
                        type    : 'numeric',
                        fields  : 'f',
                        position: 'left',
                        grid    : true,
                        minimum : 0                  
                    }, 
                    {
                        type    : 'category',
                        fields  : 'c',
                        position: 'bottom',
                        grid    : false,
                        label   : {
                            renderer: function(name, label, storeItem) {
                                        var trimmedName = Ext.String.ellipsis(name, 24, false);
                                        this.name       = name;
                                        return trimmedName;
                            },
                            listeners: {
                                mouseover: function(obj) {
                                    var toolTip = Ext.create('Ext.tip.ToolTip', {
                                        target      : obj.id,
                                        trackMouse  : true,
                                        html        : obj.name
                                    });
                                    toolTip.on('show', function() {
                                        Ext.get(obj.id).on('mouseout', function() {
                                            toolTip.hide();
                                        });
                                    });
                                    toolTip.show();
                                }
                            }        
                        }
                    }
                ]
        }
....
....

Mon bout de code dans le onSelectionChange de ma grid qui crée les séries:

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
....
....
                    if (bigchart) {
                        bigchart.series.clear();
                        var aDone = [];
 
                        Ext.each(arr_data, function(rec) {
                            if (aDone.indexOf(rec.r)<0) {
 
                                bigchart.series.add({
                                    type    : 'line',
                                    xField  : 'c',
                                    yField  : 'f',
                                    title   : rec.r
                                });
 
                                aDone.push(rec.r);
                            }
 
                        });
                        pivotstore.loadData(arr_data);
                        bigchart.bindStore(pivotstore, true);
                        bigchart.redraw();
                    }                    
...
...

MAIS voilà le problème:
* les séries s'ajoutent sur le chart en créant des doublons sur l'axe X,

Une image est sûrement plus parlante !

Je crois que je m'embrouille sur les Axes, les xFields, les yFields, etc...

Auriez vous une idée de ce qui provoque cela ? (oui je sais mon code )
Il y a bien toutes les series je pense car on voit différentes couleurs, toutes les valeurs en X, en Y.

PS: j'ai déjà créer des charts multiséries, mais j'avais à chaque fois un champ xField différents, genre [val1, val2, val3]
mais là, le champ xField est toujours "f", du coup je ne sais pas si c'est cela pas cela qui fait perdre les pédales au chart.



Merci pour vos conseils, si il vous faut plus d'information, n'hésitez pas.

Cdlt,
Bruno

[Bruno13]

Re-Bonjour tout.t le monde,

J'ai ajouté la légende et on voit bien que mes 6 séries existent bien. Donc cela vient sûrement du fait que mes séries ont le même champ "f" et cela doit poser problème au Chart.

A noter que si je clique sur les items de la légende et que je ne laisse qu'une seule ligne, cette même ligne possède toutes les valeurs en X, alors qu'elle ne devrait en avoir que certaines.
Ce qui prouve bien que le Chart affecte toutes les valeurs "f" qu'il a à toutes les séries.

Je suppose que je vais devoir créer des tableaux avec des noms de champ pour Y différents....et les définir dans les Axes dynamiquement (un autre problème auquel je n'ai pas encore réfléchi)

[plus tard]
Pour ajouter un champ à l'axe
bigchart.axes.get('left').fields = [xxxxx];
[/plus tard]

Si vous avez une autre solution, je suis preneur.

[Bruno13]

Bien, alors après un W.E et un Lundi matin très studieux, je suis enfin arrivé à fabriquer mon graphique Multi-Serie.

Alors le principal problème était bien la déclaration des champs "f" mais aussi pas mal d'autres choses.

Tout d'abord les données devaient avoir ce format :

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
                    Principe : partir du premier tableau ci-dessous
                    arr_data = r c f
                    0: {r: "BURTON CORP", c: "2016", f: 1}
                    1: {r: "BURTON CORP", c: "2015", f: 2}
                    2: {r: "BURTON CORP", c: "2010", f: 1}
                    3: {r: "BURTON CORP", c: "2008", f: 1}
                    4: {r: "SAM SPORT AND MARKETING AG", c: "2010", f: 2}
                    5: {r: "SAM SPORT AND MARKETING AG", c: "2008", f: 4}
                    6: {r: "ROSSIGNOL SA", c: "2009", f: 1}
                    7: {r: "ROSSIGNOL SA", c: "2010", f: 1}
                    8: {r: "MARKER DEUTSCHLAND GMBH", c: "2014", f: 1}
                    9: {r: "K 2 CORP", c: "2012", f: 1}
                    10: {r: "K 2 CORP", c: "2009", f: 1}
                    11: {r: "GOODWELL INT LTD", c: "2009", f: 1}
 
                    Pour arriver à un JsonStore avec ce format et ses valeurs.
                    aData    
                    {c: "2016", f0: 1, f1: 0, f2: 0, f3: 0, f4: 0, f5: 0},
                    {c: "2015", f0: 2, f1: 0, f2: 0, f3: 0, f4: 0, f5: 0},
                    {c: "2014", f0: 0, f1: 0, f2: 0, f3: 1, f4: 0, f5: 0},
                    {c: "2012", f0: 0, f1: 0, f2: 0, f3: 0, f4: 1, f5: 0},
                    {c: "2010", f0: 1, f1: 2, f2: 1, f3: 0, f4: 0, f5: 0},
                    {c: "2009", f0: 0, f1: 0, f2: 1, f3: 0, f4: 1, f5: 1},
                    {c: "2008", f0: 1, f1: 4, f2: 0, f3: 0, f4: 0, f5: 0}

PS: pour effacer le Chart bien comme il faut, j'ai fait:

Code :

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

1
2
                        bigchart.series.clear(); // efface les series
                        bigchart.surface && bigchart.surface.removeAll(); // Efface le graphique

Je vous passe toutes procédures de conversion, mais sachez que:
- le champ "c" doit être unique
- les valeurs pour chaque valeur de "c" doivent se trouver toutes dans l'objet (les valeurs 0 me permettent de faire une ligne continue)

Sachez aussi qu'une première pass de mon tableau d'origine a été nécessaire pour trouver toutes les valeurs différentes de "c" et pour créer des champs f0, f1, f2, f3, f4, f5
(donc 6 qui correspondent aux 6 items que j'ai coché (Burton, Rossignol, etc...)
Les séries ont été créées avec le "fx" qui lui correspond:

Code :

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

1
2
3
4
5
6
7
                                bigchart.series.add({
                                    type    : 'line',
                                    axis    : 'left',
                                    xField  : 'c',
                                    yField  : aRefs[rec.r],
                                    title   : rec.r
                                });

Ensuite je passe par un JsonStore pour stocker mon tableau au nouveau format.

Code :

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

1
2
3
4
                        var myDataStore = Ext.create('Ext.data.JsonStore', {
                                fields  : aFields,
                                data    : aData
                        });

Et enfin j'associe les données au chart

Code :

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

1
2
                        bigchart.bindStore(myDataStore, true);
                        bigchart.redraw();

Voilà c'est résolu !