alcatel/static/treemap/treemap.js
author Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
Fri, 18 Apr 2014 14:31:58 +0200
changeset 51 79833eaa394a
parent 27 8ca7f2cea729
permissions -rw-r--r--
set up second level for navigation

function filterTreeMapData()
{
	var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    request.onreadystatechange = ajaxOnResult;
    request.open("POST", "/treemapfilter");
    var data="begin=10-10-2010&end=1-12-2012"
    request.send(data);
            
}

function mesdossiersDoc()
{
	var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    request.open("POST", "/mesdossiersDoc");
    request.send();
            
}


function ajaxOnResult(evt) {
	if ((evt.currentTarget.readyState == 4) && (evt.currentTarget.status == 200 || evt.currentTarget.status == 0)) {
 
 		$("#treemap").empty();
 		$("#streamgraphTimeline").empty();
 		var $newdiv1 = $('<div id="streamgraphTemplate"><img class="streamgraph_img" src="" alt=""/><p class="title"></p></div>');
 		$('body').append($newdiv1)
 		
        var json = JSON.parse(evt.currentTarget.responseText);
        
        var r = new Relations();

		var couleurs = new Couleurs(20);
		
		var parametresStreamgraphTimeline = {
			name: "streamgraphTimeline",
			selector: "#streamgraphTimeline",
			activerSelection : true,
			activerTimeline: true,
			activerCurseur: true,
			hauteur: 50,
			largeur: 800,
			relations: r,
			couleurs: couleurs
		};
		
		var streamgraphTimeline = new Streamgraph(json.clusters, parametresStreamgraphTimeline);

		var parametresTreemap = {
			name: "treemap",
			selector: "#treemap",
			hauteur: 400,
			largeur: 800,
			relations: r,
			template: {
				selector: "#streamgraphTemplate",
				directives: {
					"img@src": "urlImage",
					"img@title": "titreArticle",
					"img@alt": "titreArticle",
					"img@width": "widthImage",
					"img@height": "heightImage",
					"img@style+": "cssOffsetImage",
					"p.title": "titreArticle",
					"p.title@style+": "cssWidthArticle"
				}
			},
			couleurs: couleurs
		};
		var treemap = new Treemap(json, parametresTreemap);

		r.get("streamgraphTimeline").bind("selectionResize", "treemap", 
				function(objet, params) { objet.transition(params[0], params[1]); });
		
		function placerCurseur(cluster) {
			streamgraphTimeline.placerCurseur(parseInt(cluster.attr("datetime")), 'index');
			streamgraphTimeline.showCursor();
		}
		
		function cacherCurseur() {
			streamgraphTimeline.hideCursor();
		}
		
		for (var i = 0; i<10; ++i) {
			var cluster = r.get("treemap.cluster." + i);
			cluster.mouseover(treemap.focus)
				.mouseout(treemap.blur)
				.mouseover(placerCurseur)
				.mouseout(cacherCurseur);
		}
		
	}
}