Discussion :

[meutifa]

Bonjour tout le monde,

J'ai reussi a construire un graph (histogramme) en utilisant la librairie jQuery flot.
Maintenant, en dessous de ce graph, je dois afficher un message qui apparait a chaque fois qu'on passe la souris au dessus des bars du graph (grace a la fonction hover).
Ce message donne la valeur que represente la barre de l'histogramme par rapport au total (X/total) et son pourcentage{X/total (Y%)}.
Mais j'ai un souci pour calculer ce pourcentage:
-j'utilise

Code :

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

sMessage = obj.series.data[obj.dataIndex][1] + "/237 (" + parseFloat(obj.series.percent).toFixed(1) + " %)";

qui me donne (NaN %)
-et j'ai essaye

Code :

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

1
2
3
4
5
6
//creer une var contenant la valeur des donnees
theone = obj.series.data[obj.dataIndex][1]; 
//calculer le pourcentage
percent =parseFloat(theone).percent;
//mettre le tout dans ma variable message qui sera affiche
sMessage = theone + "/237 (" + percent + " %)";

qui lui m'affiche UNDEFINED.
J'ai deja fait des recherches sur differents forum mais je tourne un peu en rond.
Si quelqu'un a une idee je suis preneuse.
Merci d'avance.

[SylvainPV]

Bonjour,

Le NaN vient très probablement de parseFloat. Qu'est-ce que c'est exactement ta variable obj.series.percent ? tu peux la logger ?

[meutifa]

Bonjour Sylvain,

Voila le code, ce sera peut etre plus clair.
Si tu veux tu peux le tester sur http://jsfiddle.net/ avec dans HTML:

Code html :

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

1
2
<div id="Chromosome_all"></div>
  <div id="Chromosome_all_hover"></div>

et dans CSS:

Code css :

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

1
2
3
4
5
#Chromosome_all{
    width: 500px;
    height: 300px;
}#Chromosome_all_hover{    width: 100px;
    height: 50px;}

, dans la partie javascript:

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
var data = [[22,25],[23,1],[0,24],[1,16],[2,8],[3,11],[4,11],[5,9],[6,5],[7,8],[8,16],[9,6],[10,22],[11,9],[12,6],[13,4],[14,11],[15,13],[16,10],[17,6],[18,8],[19,4],[20,1],[21,3]];
var dataset = [{data: data,color: '#409628',label:'Chromosomes',bars: {show: true, align:'center', barWidth:0.6}}   ];      
var ticks = [[22,"X"],[23,"Y"],[0,"1"],[1,"2"],[2,"3"],[3,"4"],[4,"5"],[5,"6"],[6,"7"],[7,"8"],[8,"9"],[9,"10"],[10,"11"],[11,"12"],[12,"13"],[13,"14"],[14,"15"],[15,"16"],[16,"17"],[17,"18"],[18,"19"],[19,"20"],[20,"21"],[21,"22"]];
var options = {xaxis: { ticks:ticks},            
	grid: {hoverable: true}
};
$.plot($("#Chromosome_all"), dataset, options);
$("#Chromosome_all").bind("plothover", Chromosome_all_hover);
$("#Chromosome_all").parent().children(":first").append(" (237)");
function Chromosome_all_hover (event, pos, obj){
        // Handles the hover label generation and fade.
        if (!obj) {
                // Although obj seems to be NULL also half of the time while hovering the pie, this if() is only activated when you're moving outside of the pie.
                $("#Chromosome_all_hover").fadeOut(1000);
                return;
        }
//creer une var contenant la valeur des donnees
theone = obj.series.data[obj.dataIndex][1]; 
//calculer le pourcentage
percent =parseFloat(theone).percent;
//mettre le tout dans ma variable message qui sera affiche
sMessage = theone + "/237 (" + percent + " %)";
            $("#Chromosome_all_hover").stop(true, true); // Completes possible fading animation immediately and empties queue.
            $("#Chromosome_all_hover").show(); // Shows the div, that may have been hidden.
            $("#Chromosome_all_hover").html("<B>" +  obj.series.xaxis.ticks[obj.dataIndex].label +": " + sMessage + "</B>");
        };

Si tu remplace le code directement dans ce lien, http://jsfiddle.net/ryleyb/nULPV/1/, tu auras toutes les options necessaires pour generer le graph.
J'espere que ca t'aidera a y voir plus clair.

[SylvainPV]

parseFloat renvoie un nombre, et un nombre n'a pas de propriété percent.

[meutifa]

d'accord. merci beaucoup pour l'info. je vais trouver un autre moyen d'obtenir le pourcentage.

[Kaamo]

Code javascript :

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

1
2
3
4
//creer une var contenant la valeur des donnees
theone = obj.series.data[obj.dataIndex][1]; 
//calculer le pourcentage
percent = parseFloat(theone).percent;

Que contient theone ? Il suffit de faire percent = parseFloat(theone). theone doit être une string.
Si la conversion de la string en float échoue, ça renvoie NaN. C'est ce qui a dû se passer dans ton cas.