Discussion :

[InfoGeo]

Salut !

Voila j'ai un petit probleme, je souhaite avoir un graphique (un camembert) qui affiche le rapport entre les différentes aires géographiques.
Pour l'instant j'en ai 3, mais il se peut que plus tard, il y en ai 5 par exemple et du coup mon code ne marcherait plus.

Voici mon code:

Code :

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

1
2
3
4
5
data: [
	[tab_areas[0], return_areas[0]],
	[tab_areas[1], return_areas[1]],
	[tab_areas[2], return_areas[2]]
]

Les données du graphique sont donc implémenté sous cette forme, il faut donc impérativement :

["nom_donnée", "valeur_donnée"]

ce que je voudrai c qu'on ait quelque chose comme ca:

Code :

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

1
2
3
for(var j=0;j<tab_areas.length;j++){
[tab_areas[j], return_areas[j]];
}

sauf que ca ne va pas, je ne peux pas mettre de for, il comprend pas...

Donc faut il passer par le php absolument ? (barbar :O)

et faire quelque chose comme ça ?

Code :

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

1
2
3
4
5
6
<?php $i =0;
        foreach (?>tab_areas<?php as $areas) {
                echo "[ '$areas'," ;?> return_areas[<?php echo $i; ?>]],	
		<?php
                $i = $i +1;
} ?>

(qui ne marche pas, il me dit unexpected '?>')


Si vous avez une idée je suis preneur !

[Kaamo]

je souhaite avoir un graphique (un camembert)

Tu te bases sur une librairie j'imagine ? Elle doit attendre un data structuré d'une certaine façon, non ?
J'ai l'impression que tu confonds "tableau indexé" et "tableau associatif".
C'est une notion importante en JavaScript, souvent mal comprise :

Qu'est-ce qu'un tableau et Comment déclarer et initialiser un tableau indexé
Tableau associatif, explication de Watilin

[InfoGeo]

Merci de ta réponse !

Oui comme je l ai indiqué, le data doit etre sous cette forme

["nom_donnée", "valeur_donnée"]

avec exemple:

Code :

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

1
2
3
4
5
data: [
	[tab_areas[0], return_areas[0]],
	[tab_areas[1], return_areas[1]],
	[tab_areas[2], return_areas[2]]
]

Je comprend la différence entre les deux, cependant je ne comprend pas en quoi cela résoud mon probleme ici, dans tous les cas, comment faire sans une boucle ? Il faut impérativement mettre une boucle or si je met une boucle dans data:[] il va pas etre content

Je me suis donc dit de mettre une boucle dans data mais en php qui sera donc en gros invisible pour lui, il verra que

[tab_areas[0], return_areas[0]],
[tab_areas[1], return_areas[1]],
[tab_areas[2], return_areas[2]]

Mais le php que j ai tenté ne marche pas, je suis donc venu ici, ne sachant plus quoi faire

[Kaamo]

data doit être construit à partir de données contenues dans une base de données je présume ? Donc c'est au serveur de construire ce tableau data.

Et souviens toi, c'est la requête qui filtre

Pour reprendre ton environnement serveur de ton post précédent : (bien sûr, à adapter au nom de tes colonnes et de tes tables)

Code php :

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

1
2
3
4
5
$return_arr  =  array();
$stmt = $BdD->prepare("SELECT nom_donnee, valeur_donnee FROM table");
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
  $return_arr[] =  array($row["nom_donnee"], $row["valeur_donnee"]);
}

[InfoGeo]

encore ce vilain SQL !

Mais moi ce que je veux c par exemple, le nombre total de produits vendu (chaque ligne de la base de données est un produit), pour la région AMERICAS, la région EMEA et la région APAC

Et mon camembert montre donc ce rapport entre ces trois régions ...


Ici, je ne pense pas qu'on obtient ca

Et pis je ne comprend pas comment on obtient la forme

["nom_donnée", "valeur_donnée"]

Donc par exemple

["AMERICAS", 45521]

Avec un tableau comme tu as fait

Faudrait faire un espece de

Code sql :

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

SELECT count(*) FROM table_actis WHERE Regions =:area;

???

Y n empeche que je ne comprend toujours pas comment le mettre dans mon data[] ensuite, pour que ca s adapte suivant le nombre de régions et tout

[Kaamo]

Mais moi ce que je veux c par exemple, le nombre total de produits vendu (chaque ligne de la base de données est un produit), pour la région AMERICAS, la région EMEA et la région APAC

Encore et toujours du SQL ! Il faut que tu traduises cette phrase en requête SQL. Rien d'insurmontable si tu as des cours de SQL

Et pis je ne comprend pas comment on obtient la forme

["nom_donnée", "valeur_donnée"]

Comme je l'ai dit dans mon post précédent, un résultat de requête SQL avec l'option PDO::FETCH_ASSOC = un tableau associatif PHP. Pour obtenir la forme que tu souhaites, il faut ruser :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
$return_arr  =  array();
$stmt = $BdD->prepare("SELECT nom_donnee, valeur_donnee FROM ta_requete_de_ouf");
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
  $return_arr[] =  array($row["nom_donnee"], $row["valeur_donnee"]);
}
// Donnera ce genre de tableau PHP :
array(
  array("AMERICAS", 45521),
  array("EMEA", 151541),
  array("APAC", 5952982)
)

Comme précédemment, tu appelleras cette requête via $.ajax non ? Donc dans ton JavaScript, tu pourras gérer ton retour JSON, qui aura cette forme :

Code javascript :

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

1
2
3
4
5
6
7
8
9
 
success: function(json) {
  callback(json);
  // json a cette forme (en se basant sur le PHP ci-dessus)
  [
    ["AMERICAS", 45521],
    ["EMEA", 151541],
    ["APAC", 5952982]
  ]

[InfoGeo]

Merci pour ta réponse, mais n y a t il pas un moyen plus simple ? du genre:

Code :

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

1
2
3
4
 
for(var j=0;j<tab_areas.length;j++){
	chaine = chaine + "['" + tab_areas[j] + "'," + return_areas[j]+ "],";
}

Code :

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

1
2
3
4
 
data[
window[chaine]
]

Car, en fait, j applique un certain nombre de filtres, enfin l'utilisateur choisi de filtrer les données suivant par exemple, une taille, une année, une release etc etc ....

Ma fonction est déja faite .... et je n aime pas trop faire de requete ajax car trop de requete vers la base de données, ralenti mon site, de ce que j ai remarqué :O
Et non j ai justement jamais eu de cours en SQL ^^ en fait j ai jamais eu de cours en programmation web.

Je recupere correctement mes données, il faut juste que j arrive a les caser dans mon graphique maintenant ...


Avec la méthode que j ai essayé au dessus, ca ne marche malheureusement pas, car pour lui chaine est égale à

"['AMERICAS',4479],['APAC',4068],['EMEA',28492],"

au lieu de

['AMERICAS',4479],['APAC',4068],['EMEA',28492],

je hais ces guillemets.


C'est peut etre pas la méthode que t aurais choisi ... et c peut etre pas la meilleure méthode c'est vrai. Mais pour l'instant ca m'aiderait énormément si tu me guidais dans ce sens stp ...

J'ai besoin d'un premier prototype assez rapidement ... J'améliorerai par la suite ce que j'ai fait mais la c'est une premiere approche.
Donc saurais tu comment enlever ces guillemets stp ?

[Kaamo]

mais n y a t il pas un moyen plus simple ?

C'est plus simple selon toi ?
Y'a quelque chose que je ne pige pas ... En gros tu récupères deux tableaux JS tab_areas et return_areas. Mais comment ? Via JavaScript ? Via PHP ?

je hais ces guillemets.

Tu crées une chaîne (String) et tu t'étonnes d'avoir des guillemets ?
Si tu veux un tableau, il faut créer un tableau (Array) ! De plus, data s'attend à avoir un Array. Tu ne peux pas lui passer un type String.

Si je comprends bien, tu as deux tableaux JavaScript

Code javascript :

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

1
2
var tab_areas = ['AMERICAS', 'APAC', 'EMEA'];
var return_areas = [4479, 4068, 28492];

Et tu veux obtenir un nouveau tableau, à deux dimensions, qui concatène les éléments de chaque tableau dans un nouveau tableau en fonction de leur position.

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
var tab_areas = ['AMERICAS', 'APAC', 'EMEA'];
var return_areas = [4479, 4068, 28492];
var new_tab = []; // nouveau tableau qui contiendra le résultat
 
for (var i = 0, l = tab_areas.length; i < l; i++) {
  // ajouter à new_tab un tableau contenant l'élément i de tab_areas et l'élément i de return_areas
  new_tab.push([tab_areas[i], return_areas[i]]);
}
 
console.log(new_tab); // [["AMERICAS", 4479], ["APAC", 4068]], ["EMEA", 28492]]

[InfoGeo]

WOOOOOOOOOW

D'accord ! J'avais pas du tout compris en fait mdr, ok, et donc la j'ai juste a faire:
data: le_tableau trop bien


Je vais modifier mes autres graphiques comme ca du coup, c beaucoup plus propre

bah encore merci beaucoup, tu m as encore aidé à comprendre comment ca marche vraiment XD


Sinon, ouai c'est plus simple pour moi, les bouclest ^^ les requêtes ajax avec du SQL et tout ca c'est flou :O

En fait ce que j ai fait, c'est que je recupere mes différentes colonnes (Regions, Bp_name, Year, Month etc etc etc), ces colonnes sont stockées dans un tableau et ensuite quand je cherche par exemple le nombre de produits vendus en EMEA, en 2011 au mois de Juillet, je fais des boucles for et if afin de récupérer cette valeur


Sinon non ca m étonnait pas les guillemets mais ca m'embetait haha


une petite question de curieux, j'ai donc fait ca:

Code :

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

1
2
3
4
var tab_areas_conc = [];
		for(var i=0;i<tab_areas.length;i++){
			tab_areas_conc.push([tab_areas[i], return_areas[i]]);
		}

Code :

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

data: tab_areas_conc

Y a t il une différence entre:

for (var i = 0, l = tab_areas.length; i < l; i++) {

et

for(var i=0;i<tab_areas.length;i++){

????

[Kaamo]

C'est pour un soucis de performance, rien de plus
Dans la tienne, tu calcules tab_areas.length à chaque tour de boucle. A quoi ça sert puisque length ne change pas ?
Dans la mienne, je calcule tab_areas.length une seule fois, à l'initialisation de la boucle.

Je ne voudrais pas t'embrouiller, mais à noter qu'il est préférable de déclarer les variables en début de contexte (scope). En dehors de la boucle, en somme.

Code javascript :

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

1
2
3
4
var i = 0, len = tab_areas.length;
for (; i < len ; i++) {
  // faire quelquechose
}

[InfoGeo]

Ha d'accord, je vais changer mes boucles for avec ta méthode, c'est vrai que du coup ca permet d'etre mieux optimiser.

Sinon je voudrais faire des graphiques sur plusieurs années, j'en avais un mais c'est pareil c'etait avec ma méthode d avant ... donc il faudrait que je change pour que ca soit mieux que ma méthode php avec obtention de données par fichier texte et tout O_O

Le mieux serait que j'utilise quelque chose comme ca mais bon c'est chaud je trouve, je comprend rien oO


Dans la méthode que j'ai actuellement, il faut que je recupère les valeurs comme ca (relou)

{date: new Date(*donnée_année*, *donnée_mois*, 30, 0, 0, 0, 0), val1: *donnée1*, val2: *donnée2*},

j'utilise aussi une concataination ? parce que la y a du texte et tout oO




Le code du graphique

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
$(document).ready(function() {
	var chart = new AmCharts.AmStockChart();
	chart.pathToImages = "amcharts/javascript/images/";
 
	var dataSet = new AmCharts.DataSet();
	dataSet.dataProvider = chartData;
	dataSet.fieldMappings = [{fromField:"val1", toField:"value"}, {fromField:"val2", toField:"value2"}];   
	dataSet.categoryField = "date";          
	chart.dataSets = [dataSet];
 
	var stockPanel = new AmCharts.StockPanel();
	chart.panels = [stockPanel];
 
	var legend = new AmCharts.StockLegend();
	stockPanel.stockLegend = legend;                
 
	var panelsSettings = new AmCharts.PanelsSettings();
	panelsSettings.startDuration = 1;
	chart.panelsSettings = panelsSettings;   
 
	var graph = new AmCharts.StockGraph();
	graph.useDataSetColors = false;
	graph.valueField = "value";
	graph.type = "column";
	graph.title = "New";
	graph.fillAlphas = 1;
	graph.lineColor = "#2A5ED6";
	graph.fillColors = "#2A5ED6";
	stockPanel.addStockGraph(graph);
 
	var graph = new AmCharts.StockGraph();
	graph.useDataSetColors = false;
	graph.valueField = "value2";
	graph.type = "column";
	graph.title = "Addon";
	graph.fillAlphas = 2;
	graph.lineColor = "#FF3C3C";
	graph.fillColors = "#FF3C3C";
	stockPanel.addStockGraph(graph);
 
	var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
	categoryAxesSettings.dashLength = 5;
	chart.categoryAxesSettings = categoryAxesSettings;
 
	var valueAxesSettings = new AmCharts.ValueAxesSettings();
	valueAxesSettings.dashLength = 5;
	chart.valueAxesSettings  = valueAxesSettings;
 
	var chartScrollbarSettings = new AmCharts.ChartScrollbarSettings();
	chartScrollbarSettings.graph = graph;
	chartScrollbarSettings.graphType = "line";
	chart.chartScrollbarSettings = chartScrollbarSettings;
 
	var chartCursorSettings = new AmCharts.ChartCursorSettings();
	chartCursorSettings.valueBalloonsEnabled = true;
	chart.chartCursorSettings = chartCursorSettings;
 
	var periodSelector = new AmCharts.PeriodSelector();
	periodSelector.periods = [{period:"YYYY", count:1, label:"1 year"},
							  {period:"YYYY", count:2, label:"2 years"},                                          
							  {period:"MAX", label:"MAX"}];                
	chart.periodSelector = periodSelector;
 
	chart.write("multiyear_new_addon");
});
}

c complexe aussi mais au moins la je sais quelle forme je dois donner aux datas :/

[Kaamo]

C'est le même principe qu'avant. Sauf qu'au lieu d'ajouter un tableau indicé (Array) dans le tableau tab_areas_conc, tu ajoutes un tableau associatif (Object).
Mais vu que tu as dit avoir compris le principe, ça devrait rouler tout seul non ?

je comprend rien oO

Prend un café, lis la documentation à tête reposée. Tu as toutes les billes pour comprendre.

Surtout que dans leur doc, il y a plein d'exemples.

[InfoGeo]

Cool j'ai réussi !

Code :

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

1
2
3
4
5
6
7
8
9
10
for (var y = 0, ly = tab_years.length; y < ly; y++) {
			for (var m = 0, lm = tab_month.length; m < lm; m++) {
				tab_newaddon_conc.push(
				{
					date: new Date (tab_years[y],m, 30, 0, 0, 0, 0),
					val1: window["tab_new"+tab_years[y].toString()][m], 
					val2: window["tab_addon"+tab_years[y].toString()][m]
				});
			}
		}

avec pour la premiere Date (il arrive a voir que c'est un dimanche ! :O (j ai vérifié XD)):

Code :

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

Date {Sun Jan 30 2011 00:00:00 GMT+0100}

j'ai donc fait ca aussi:

Code :

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

1
2
3
 
dataSet.fieldMappings = [{fromField:"val1", toField:"value"}, {fromField:"val2", toField:"value2"}];  
dataSet.dataProvider = tab_newaddon_conc;

Code complet si jamais qqun passe par ici et que ca l'interesse:

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
if (selected_year == "allyear" &&  document.forms.checkbox_show_graph.showgraph.checked == true) { 
 
for (var y = 0, ly = tab_years.length; y < ly; y++) {
for (var m = 0, lm = tab_month.length; m < lm; m++) {
	tab_newaddon_conc.push(
	{
		date: new Date (tab_years[y],m, 30, 0, 0, 0, 0),
		val1: window["tab_new"+tab_years[y].toString()][m], 
		val2: window["tab_addon"+tab_years[y].toString()][m]
	});
}
}
 
$(document).ready(function() {
	var chart = new AmCharts.AmStockChart();
	chart.pathToImages = "amcharts/javascript/images/";
 
	var dataSet = new AmCharts.DataSet();
	dataSet.dataProvider = tab_newaddon_conc;
	dataSet.fieldMappings = [{fromField:"val1", toField:"value"}, {fromField:"val2", toField:"value2"}];   
	dataSet.categoryField = "date";          
	chart.dataSets = [dataSet];
 
	var stockPanel = new AmCharts.StockPanel();
	chart.panels = [stockPanel];
 
	var legend = new AmCharts.StockLegend();
	stockPanel.stockLegend = legend;                
 
	var panelsSettings = new AmCharts.PanelsSettings();
	panelsSettings.startDuration = 1;
	chart.panelsSettings = panelsSettings;   
 
	// ligne
	var graph = new AmCharts.StockGraph();
	graph.useDataSetColors = false;
	graph.valueField = "value";
	graph.bullet = "round";
	graph.bulletBorderColor = "#FFFFFF";
	graph.bulletBorderThickness = 2;
	graph.bulletBorderAlpha = 1;
	graph.title = "New";
	graph.lineThickness = 2;
	graph.lineColor = "#2A5ED6";
	graph.fillColors = "#2A5ED6";
	graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
	stockPanel.addStockGraph(graph);
 
	// colonne
	var graph = new AmCharts.StockGraph();
	graph.useDataSetColors = false;
	graph.valueField = "value2";
	graph.type = "column";
	graph.title = "Addon";
	graph.fillAlphas = 2;
	graph.lineColor = "#FF3C3C";
	graph.fillColors = "#FF3C3C";
	stockPanel.addStockGraph(graph);
 
	var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
	categoryAxesSettings.dashLength = 5;
	chart.categoryAxesSettings = categoryAxesSettings;
 
	var valueAxesSettings = new AmCharts.ValueAxesSettings();
	valueAxesSettings.dashLength = 5;
	chart.valueAxesSettings  = valueAxesSettings;
 
	var chartScrollbarSettings = new AmCharts.ChartScrollbarSettings();
	chartScrollbarSettings.graph = graph;
	chartScrollbarSettings.graphType = "line";
	chart.chartScrollbarSettings = chartScrollbarSettings;
 
	var chartCursorSettings = new AmCharts.ChartCursorSettings();
	chartCursorSettings.valueBalloonsEnabled = true;
	chart.chartCursorSettings = chartCursorSettings;
 
	var periodSelector = new AmCharts.PeriodSelector();
	periodSelector.periods = [{period:"YYYY", count:1, label:"1 year"},
							  {period:"YYYY", count:2, label:"2 years"},                                          
							  {period:"MAX", label:"MAX"}];                
	chart.periodSelector = periodSelector;
 
	chart.write("multiyear_new_addon");
});
}

Merci beaucoup a toi encore une fois ! tu m' as bien débloqué et je vais pouvoir bien mettre a jour mon site avec ce que j'ai appris ! (push() ! , taille tableau qu'une seule fois, tableau Array ou d objet


Je met donc ce sujet en résolu !

[Kaamo]

Pas de problèmes
Dernier petit conseil. Je vois que tu as des variables nommées, par exemple, tab_newX, où X est une année. (tab_new2010, tabnew2011, etc) ... Puis, tu y accèdes ainsi :

Code :

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

window["tab_new"+tab_years[y].toString()]

- le toString() est superflu je pense
- C'est bien d'avoir vu que les variables globales se mettent dans window par défaut, mais il serait mieux de tout mettre dans un tableau

Code javascript :

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

1
2
3
4
5
6
var tab_new = { 
  "2011": [ /* tes données ici, équivalent de ton tab_new2011 */ ],
  "2012": [ /* tes données ici, équivalent de ton tab_new2012 */ ]
  // etc ...
}
// même chose pour tab_addon

Ainsi, ta boucle serait simplifiée :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
for (var y = 0, ly = tab_years.length; y < ly; y++) {
  for (var m = 0, lm = tab_month.length; m < lm; m++) {
    tab_newaddon_conc.push(
      {
        date: new Date (tab_years[y],m, 30, 0, 0, 0, 0),
        val1: tab_new[tab_years[y]][m], 
        val2: tab_addon[tab_years[y]][m]
      });
  }
}

Ainsi tu regroupes tout dans une seule variable

[InfoGeo]

Hummmm d'accord, et vu que je récupere les années avec le tableau tab_years, je fais:

Code :

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

1
2
3
4
5
6
for (var y = 0, ly = tab_years.length; y < ly; y++) {
for (var t = 0, lt = tab_temp.length; t < lt; y++) {
var tab_new = { 
  tab_years[k]: [tab_temp[t]],
}
}

right ?

(en fait la valeur de new qui correspond a l année en question, je la récupere avec des boucles)