Adapter suivant la taille du tableau

Version imprimable

15/10/2013, 15h05
InfoGeo

Adapter suivant la taille du tableau
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:

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 :

Citation:

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

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

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:

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 ! :calim2:
15/10/2013, 15h42
Kaamo

Citation:

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
15/10/2013, 18h44
InfoGeo
Merci de ta réponse !

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

Citation:

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

avec exemple:
Code:

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

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

Citation:

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

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:

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

15/10/2013, 23h29
InfoGeo

encore ce vilain SQL ! :cry:

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

Et pis je ne comprend pas comment on obtient la forme

Citation:

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

Donc par exemple

Citation:

["AMERICAS", 45521]

Avec un tableau comme tu as fait :aie:

Faudrait faire un espece de

Code:

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

Citation:

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

Citation:

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:

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:

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

16/10/2013, 11h39
InfoGeo
Merci pour ta réponse, mais n y a t il pas un moyen plus simple ? du genre:
Code:

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

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 à

Citation:

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

au lieu de

Citation:

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

8O 8O 8O :cry:

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 ?

Citation:

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

C'est plus simple selon toi ? 8O
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 ?

Citation:

je hais ces guillemets.

Tu crées une chaîne (String) et tu t'étonnes d'avoir des guillemets ? :roll:
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:

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:

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

16/10/2013, 13h39
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 8O trop bien :P

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

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

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

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

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:

data: tab_areas_conc

Y a t il une différence entre:

Citation:

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

et

Citation:

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

???? :)
16/10/2013, 13h52
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:

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

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)

Citation:

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

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

16/10/2013, 15h22
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 ? :roll:

Citation:

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.

Cool j'ai réussi ! :P

Code:

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:

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

j'ai donc fait ca aussi:

Code:

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

:cry:

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

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
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() ! :D, taille tableau qu'une seule fois, tableau Array ou d objet :mrgreen:

Je met donc ce sujet en résolu !

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:

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:

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:

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

16/10/2013, 17h58
InfoGeo
Hummmm d'accord, et vu que je récupere les années avec le tableau tab_years, je fais:
Code:

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)