V1 affichage sociogramme, peu ergonomique, réfléchir a un système de positionnement relatif

manager/module/chart/networkChart.php

@@ -47,7 +47,6 @@
 				    array( 4342, "Latasha",    21  ),
 				    array( 2957, "Coleen",     1   ),
 				    array( 2493, "Contreras",  100 ),
-				    array( 1895, "Roxanne",    27  ),
 				    array( 4776, "Holmes",     97  ),
 				    array( 3623, "Hallie",     88  ),
 				    array( 3660, "Ginger",     26  ),

view/js/charts.js

@@ -3,69 +3,76 @@
 /* (0) On recupere les elements importants */
 var SOCIOGRAM = {
 	container: document.getElementById('sociogram'),
-	sigma: null
+	sigma: null,
+
+	request: { path: 'charts/network_data' },
+	response: null,
+	nodes: null,
+	edges: null
 };
 // Initialisation de SIGMA
 SOCIOGRAM.sigma = new sigma(SOCIOGRAM.container);
 
 /* (1) On recupere les informations via l'API */
+api.send(SOCIOGRAM.request, function(response){
+	// Si erreur, on quitte
+	if( response.ModuleError != 0 ) return;
+
+	// Sinon on enregistre
+	SOCIOGRAM.response = response;
 
 
-/* (2) Parametrage de SIGMA */
-SOCIOGRAM.sigma.settings({
+	/* (2) Parametrage de SIGMA */
+	SOCIOGRAM.sigma.settings({
 			defaultNodeColor: '#ec5148'
 		});
 
-/* (3) On recupere la liste des noeuds */
-var nodes = [
-	{
-		"id": "n0",
-		"label": "A node",
-		"x": 0,
-		"y": 0,
-		"size": 3
-	}, {
-		"id": "n1",
-		"label": "Another node",
-		"x": 3,
-		"y": 1,
-		"size": 2
-	}, {
-		"id": "n2",
-		"label": "And a last one",
-		"x": 1,
-		"y": 3,
-		"size": 1
-	}];
+
+	/* (3) On recupere la liste des noeuds */
+	SOCIOGRAM.nodes = [];
+
+	// On calcule l'angle min
+	var ang = 2*Math.PI / SOCIOGRAM.response.data.alter.length;
+
+	// Pour chaque alter
+	for( var i = 0 ; i < SOCIOGRAM.response.data.alter.length ; i++ ){
+		SOCIOGRAM.nodes.push({
+				'id':    'n-'+SOCIOGRAM.response.data.alter[i][0],
+				'label': SOCIOGRAM.response.data.alter[i][1],
+				'x':     500+ 100*Math.cos(ang*i),
+				'y':     500+ 100*Math.sin(ang*i),
+				'size':  SOCIOGRAM.response.data.alter[i][2]/10
+			});
+	}
 
 
-/* (4) On recupere la liste des liens */
-var edges = [{
-		"id": "e0",
-		"source": "n0",
-		"target": "n1"
-	}, {
-		"id": "e1",
-		"source": "n1",
-		"target": "n2"
-	}, {
-		"id": "e2",
-		"source": "n2",
-		"target": "n0"
-	}];
+
+	/* (4) On recupere la liste des liens */
+	SOCIOGRAM.edges = [];
+
+	for( var i = 0 ; i < SOCIOGRAM.response.data.inter.length ; i++ ){
+		SOCIOGRAM.edges.push({
+				'id':     'e-'+SOCIOGRAM.response.data.inter[i][0]+'-'+SOCIOGRAM.response.data.inter[i][1],
+				'source': 'n-'+SOCIOGRAM.response.data.inter[i][0],
+				'target': 'n-'+SOCIOGRAM.response.data.inter[i][1]
+			});
+	}
 
 
-/* (5) On ajoute nos noeuds */
-for( var i = 0 ; i < nodes.length ; i++)
-	SOCIOGRAM.sigma.graph.addNode(nodes[i]);
 
-/* (6) On ajoute nos liens */
-for( var i = 0 ; i < edges.length ; i++)
-	SOCIOGRAM.sigma.graph.addEdge(edges[i]);
+	/* (5) On ajoute nos noeuds */
+	for( var i = 0 ; i < SOCIOGRAM.nodes.length ; i++)
+		SOCIOGRAM.sigma.graph.addNode(SOCIOGRAM.nodes[i]);
 
-/* (7) Gestion des interactions */
+	/* (6) On ajoute nos liens */
+	for( var i = 0 ; i < SOCIOGRAM.edges.length ; i++)
+		SOCIOGRAM.sigma.graph.addEdge(SOCIOGRAM.edges[i]);
+
+	/* (7) Gestion des interactions */
 
 
-/* (8) On affiche le graphique */
-SOCIOGRAM.sigma.camera.ratio = 2;
-SOCIOGRAM.sigma.refresh();
+	/* (8) On affiche le graphique */
+	SOCIOGRAM.sigma.camera.ratio = 2;
+	SOCIOGRAM.sigma.refresh();
+
+});