Discussion :

[incent_bzh]

Hello,

Je teste actuellement l'API Google Analytics pour récupérer mes stats.
J'arrive bien à récupérer les données, voici le JSON que j'ai

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
 
[ [ "20150621",
    "1435"
  ],
  [ "20150622",
    "1808"
  ],
  [ "20150623",
    "1640"
  ],
  [ "20150624",
    "1469"
  ],
  [ "20150625",
    "2433"
  ],
  [ "20150626",
    "1989"
  ],
  [ "20150627",
    "1592"
  ],
  [ "20150628",
    "1498"
  ],
  [ "20150629",
    "1730"
  ],
  [ "20150630",
    "1453"
  ],
  [ "20150701",
    "1858"
  ],
  [ "20150702",
    "1372"
  ],
  [ "20150703",
    "1289"
  ],
  [ "20150704",
    "1140"
  ],
  [ "20150705",
    "1526"
  ],
  [ "20150706",
    "1355"
  ],
  [ "20150707",
    "1306"
  ],
  [ "20150708",
    "1725"
  ],
  [ "20150709",
    "1550"
  ],
  [ "20150710",
    "1317"
  ],
  [ "20150711",
    "1439"
  ],
  [ "20150712",
    "1548"
  ],
  [ "20150713",
    "1744"
  ],
  [ "20150714",
    "1691"
  ],
  [ "20150715",
    "1676"
  ],
  [ "20150716",
    "1576"
  ],
  [ "20150717",
    "1437"
  ],
  [ "20150718",
    "1500"
  ],
  [ "20150719",
    "1845"
  ],
  [ "20150720",
    "1772"
  ],
  [ "20150721",
    "818"
  ]
]

Maintenant, je souhaiterai mettre ces datas dans un graph, j'ai commencé à utiliser Morris Area Charts mais je suis un peu pommé sur comment intégrer mon json.
Voila la manière dont mes données doivent être envoyées (exemple fournit avec le script):

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
 
 data: [{
            period: '2010 Q1',
            iphone: 2666,
            ipad: null,
            itouch: 2647
        }, {
            period: '2010 Q2',
            iphone: 2778,
            ipad: 2294,
            itouch: 2441
        }, {
            period: '2010 Q3',
            iphone: 4912,
            ipad: 1969,
            itouch: 2501
        }]

Merci de m'éclairer

[NoSmoking]

Bonjour,

voici le JSON que j'ai

ce que tu nous montres est un tableau de tableaux, il t'appartient donc de créer ton propre objet JSON en parcourant le tableau et en créant des objets auquels tu affectes une "key" attendu que tu as les "value" dans le tableau initial.

Par exemple à partir de ce que tu nous montres tu pourrais faire un simple

Code :

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

1
2
3
4
5
6
7
8
var tabObj = [],
    i, nb = data.length; // en supposant que data soit ton tableau de départ
for( i=0; i < nb; i++){
  tabObj.push({
    'date'   : data[i][0],
    'valeur' : data[i][1]
  });
}

au final tu devrais te retrouver avec un objet de ce type

Code :

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

1
2
3
4
5
6
7
8
tabObj = [
  {date:"20150621", valeur:"1435"},
  {date:"20150624", valeur:"1469"},
  // ... la suite
  {date:"20150719", valeur:"1845"},
  {date:"20150720", valeur:"1772"},
  {date:"20150721", valeur:"818"}
];

[incent_bzh]

Merci pour l'éclaircissement, je vais tester ça.

[incent_bzh]

Il reste un problème à priori.
Voila ce que ça me donne dans un navigateur, le tableau n'arrive pas à lire les données.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var data = [["20150703","1289"],["20150704","1140"],["20150705","1526"],["20150706","1355"],["20150707","1306"],["20150708","1725"],["20150709","1550"],["20150710","1317"],["20150711","1439"],["20150712","1548"],["20150713","1744"],["20150714","1691"],["20150715","1676"],["20150716","1576"],["20150717","1437"],["20150718","1500"],["20150719","1845"],["20150720","1772"],["20150721","1722"],["20150722","1828"],["20150723","1919"],["20150724","1700"],["20150725","1927"],["20150726","2308"],["20150727","2052"],["20150728","1826"],["20150729","1837"],["20150730","1606"],["20150731","1256"],["20150801","1307"],["20150802","1185"],["20150803","624"]];
	  var tabObj = [],
	    i, nb = data.length; // en supposant que data soit ton tableau de départ
	for( i=0; i < nb; i++){
	  tabObj.push({
	    'date'   : data[i][0],
	    'valeur' : data[i][1]
	  });
	}

[NoSmoking]

pas compris le soucis !

[incent_bzh]

Dans mon navigateur je devrais obtenir les données dans tabObj non?

Code :

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

1
2
3
4
5
6
7
8
 
for( i=0; i < nb; i++){
	  tabObj.push({
	    'date'   : 20150621,
	    'valeur' : 1435,
           //..........
	  });
	}

[NoSmoking]

Oui mais avec le code que tu montres.
A partir de ton code, soit

Code :

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

1
2
3
4
5
6
7
8
9
var data = [["20150703","1289"],["20150704","1140"],["20150705","1526"],["20150706","1355"],["20150707","1306"],["20150708","1725"],["20150709","1550"],["20150710","1317"],["20150711","1439"],["20150712","1548"],["20150713","1744"],["20150714","1691"],["20150715","1676"],["20150716","1576"],["20150717","1437"],["20150718","1500"],["20150719","1845"],["20150720","1772"],["20150721","1722"],["20150722","1828"],["20150723","1919"],["20150724","1700"],["20150725","1927"],["20150726","2308"],["20150727","2052"],["20150728","1826"],["20150729","1837"],["20150730","1606"],["20150731","1256"],["20150801","1307"],["20150802","1185"],["20150803","624"]];
var tabObj = [],
    i, nb = data.length; // en supposant que data soit ton tableau de départ
for( i=0; i < nb; i++){
  tabObj.push({
    'date'   : data[i][0],
    'valeur' : data[i][1]
  });
}

ajoute un console.log( tabObj) et tu verras si le résultat convient à ton attente.

[incent_bzh]

Exact, merci.
Dernier point après j'arrête (normallement ), pour passer mon json au script, voila ce que j'ai fait:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(function() {
 
    Morris.Area({
        element: 'morris-area-chart2',
        data: tabObj,
        xkey: 'date',
        ykeys: ['valeur'],
        labels: ['visite'],
        pointSize: 2,
        hideHover: 'auto',
        resize: true
	    });  
	});

sauf que les données (data: tabObj) ne sont pas envoyés quand j'affiche la source

[NoSmoking]

Les données, tabObj, n'appartiennent pas à la source mais sont en mémoire donc tu peux les "voir" en utilisant la console, mais je ne suis pas sûr que c'est de cela que tu parles .

En regardant la documentation j'ai vu que les "date" ne sont pas au bon format, tu devrais avoir par exemple "2015-07-14" et non "20150714", il te faut donc également transformer ces valeurs.

Une façon simple de faire

Code :

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

1
2
3
4
5
6
7
8
9
/**
* convertie une chaine exemple "20150714" en une chaine au format "2015-07-14"
**/
function formatDate( chaine){
  chaine = chaine.split('');
  chaine.splice(6,0,'-');
  chaine.splice(4,0,'-');
  return chaine.join('');
}

de la sorte il te suffit d'appeler cette fonction sur l'initialisation de ton objet

Code :

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

1
2
3
4
5
6
7
8
9
  var data = [["20150703","1289"],["20150704","1140"],["20150705","1526"],["20150706","1355"],["20150707","1306"],["20150708","1725"],["20150709","1550"],["20150710","1317"],["20150711","1439"],["20150712","1548"],["20150713","1744"],["20150714","1691"],["20150715","1676"],["20150716","1576"],["20150717","1437"],["20150718","1500"],["20150719","1845"],["20150720","1772"],["20150721","1722"],["20150722","1828"],["20150723","1919"],["20150724","1700"],["20150725","1927"],["20150726","2308"],["20150727","2052"],["20150728","1826"],["20150729","1837"],["20150730","1606"],["20150731","1256"],["20150801","1307"],["20150802","1185"],["20150803","624"]];
  var tabObj = [],
      i, nb = data.length;
  for( i=0; i < nb; i++){
    tabObj.push({
      'date'   : formatDate(data[i][0]),  // met au bon format
      'valeur' : data[i][1]
    });
  }

maintenant tu es paré pour l'affichage te ta courbe ce qui au final peut ressembler à cela avec tes données :

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[Morris.js] Area Chart</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script>
/**
* convertie une chaine exemple "20150714" en une chaine au format "2015-07-14"
**/
function strDate( chaine){
  chaine = chaine.split('');
  chaine.splice(6,0,'-');
  chaine.splice(4,0,'-');
  return chaine.join('');
}
$(function() {
  var data = [["20150703","1289"],["20150704","1140"],["20150705","1526"],["20150706","1355"],["20150707","1306"],["20150708","1725"],["20150709","1550"],["20150710","1317"],["20150711","1439"],["20150712","1548"],["20150713","1744"],["20150714","1691"],["20150715","1676"],["20150716","1576"],["20150717","1437"],["20150718","1500"],["20150719","1845"],["20150720","1772"],["20150721","1722"],["20150722","1828"],["20150723","1919"],["20150724","1700"],["20150725","1927"],["20150726","2308"],["20150727","2052"],["20150728","1826"],["20150729","1837"],["20150730","1606"],["20150731","1256"],["20150801","1307"],["20150802","1185"],["20150803","624"]];
  var tabObj = [],
      i, nb = data.length;
  for( i=0; i < nb; i++){
    tabObj.push({
      'date'   : strDate(data[i][0]),
      'valeur' : data[i][1]
    });
  }
  Morris.Area({
      element: 'div_area',
      data: tabObj,
      xkey: 'date',
      ykeys: ['valeur'],
      labels: ['visite'],
      yLabelFormat: function (x) { return x.toString();}, // juste pour ne pas avoir la virgule dans le nombre
      pointSize: 2,
      fillOpacity:0.3,
      hideHover: 'auto',
      resize: true
    });
});
</script>
</head>
<body>
  <div id="div_area"></div>
</body>
</html>

à toi de jouer

[incent_bzh]

Parfait, ça fonctionne.
Merci beaucoup d'avoir passé du temps sur mes problèmes.