Morris Area Chart

Version imprimable

Morris Area Chart

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:

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:

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

Bonjour,

Citation:

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:

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:

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"} ];

03/08/2015, 14h52
incent_bzh

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

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:

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

03/08/2015, 17h46
NoSmoking

:koi: pas compris le soucis !

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

Code:

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

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

Code:

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.

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

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

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

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:

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:

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:

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

04/08/2015, 17h33
incent_bzh

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