English versionCSS - Graphiques : Barres horizontales et verticales
L'une des plus fortes demandes de mes utilisateurs est la représentation sous forme de graphiques des valeurs stockées dans Lotus Notes. Hors, Lotus n'offre aucune fonction. On peut passer par une applet Java, une servlet ou une API mais ces méthodes restent lourdes à implémenter pour des représentations basiques.
Heureusement, en lisant un article sur la création de graphiques sous forme de barres horizontales en CSS du blog Standards-shmandards j'ai enfin trouvé une solution simple à mettre en place. L'idée est basique, il suffit de jouer sur la hauteur (ou la largeur) d'une image qui va représenter la barre.
Définition d'une vue pour l'exemple
Dans cet exemple je partirai d'une vue mais on aurait aussi pu se baser sur des champs multivalués d'une document. Le graphique à barre est très simple, il suffit d'un libellé de colonne (ou de ligne) et d'une valeur associée. La vue utilisée va donc comporté deux colonnes :
Définition de la page de représentation du graphique
Là aussi je vais passer par une page mais on peut aussi envisager d'autres solutions.
Pour une représentation sous forme de barres horizontales la structure générale du code HTML devra ressembler à :
avec ratio = largeur_max/Max(valeurs)
On peut alors ajouter en entête de la page la feuille de style proposée, soit :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Statistiques Domino</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
td.value {
background-image: url(gridline58.gif);
background-repeat: repeat-x;
background-position: left top;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
padding:0;
border-bottom: none;
background-color:transparent;
}
td.value img {
vertical-align: middle;
margin: 5px 5px 5px 0;
}
td.last {
border-bottom:1px solid #e5e5e5;
}
td.first {
border-top:1px solid #e5e5e5;
padding: 4px 6px;
border-bottom:1px solid #e5e5e5;
border-left:1px solid #e5e5e5;
}
</style>
</head>
Ne pas oublié d'intégrer les images du fond de grille et de la barre dans les ressources de base.
De façon similaire on peut aussi représenter les valeurs sous forme de graphiques à barres verticales.
Dans ce cas, le code du champ calculé sera :
et le style associé pourra être
Voir un exemple de graphique barre
Heureusement, en lisant un article sur la création de graphiques sous forme de barres horizontales en CSS du blog Standards-shmandards j'ai enfin trouvé une solution simple à mettre en place. L'idée est basique, il suffit de jouer sur la hauteur (ou la largeur) d'une image qui va représenter la barre.
Définition d'une vue pour l'exemple
Dans cet exemple je partirai d'une vue mais on aurait aussi pu se baser sur des champs multivalués d'une document. Le graphique à barre est très simple, il suffit d'un libellé de colonne (ou de ligne) et d'une valeur associée. La vue utilisée va donc comporté deux colonnes :
- colonne 1 : Libellé de la valeur. Cette colonne doit être triée
- colonne 2 : valeur à représenter sous forme de nombre
Définition de la page de représentation du graphique
Là aussi je vais passer par une page mais on peut aussi envisager d'autres solutions.
Pour une représentation sous forme de barres horizontales la structure générale du code HTML devra ressembler à :<table>
<tr>
<td>Libellé de la ligne</td>
<td><img src="image_barre" height="16"
width="valeur * ratio" /></td>
</tr>
</table>
avec ratio = largeur_max/Max(valeurs)
- Création d'une nouvelle page
- Définir comme option "type de contenu : HTML"
- Insérer le code : <body><table cellspacing="0" cellpadding="0" summary="Statistiques Domino" style="background-image:url(bg_fade.png); background-repeat:repeat-x; background-position:left top; width: 550px;">
- Insérer un texte calculé
- Insérer le code : </table></body>
label := @DbColumn("":"";"";"ma_vue_statistique"; 1);
valeur := @DbColumn("":"";"";"ma_vue_statistique"; 2);
largeur_max := 450;
max := @Max(valeur);
ratio := largeur_max/max;
@Implode("<tr><td class=\"first\" style=\"background : #ffffff;\">" + label + "</td><td class=\"value first\"><img src=\"bar.png\" alt=\"\" width=\"" + @Text(valeur * ratio) +"\" height=\"16\" />" + @Text(valeur) + "</td></tr>")
valeur := @DbColumn("":"";"";"ma_vue_statistique"; 2);
largeur_max := 450;
max := @Max(valeur);
ratio := largeur_max/max;
@Implode("<tr><td class=\"first\" style=\"background : #ffffff;\">" + label + "</td><td class=\"value first\"><img src=\"bar.png\" alt=\"\" width=\"" + @Text(valeur * ratio) +"\" height=\"16\" />" + @Text(valeur) + "</td></tr>")
On peut alors ajouter en entête de la page la feuille de style proposée, soit :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Statistiques Domino</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
td.value {
background-image: url(gridline58.gif);
background-repeat: repeat-x;
background-position: left top;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
padding:0;
border-bottom: none;
background-color:transparent;
}
td.value img {
vertical-align: middle;
margin: 5px 5px 5px 0;
}
td.last {
border-bottom:1px solid #e5e5e5;
}
td.first {
border-top:1px solid #e5e5e5;
padding: 4px 6px;
border-bottom:1px solid #e5e5e5;
border-left:1px solid #e5e5e5;
}
</style>
</head>
Ne pas oublié d'intégrer les images du fond de grille et de la barre dans les ressources de base.
De façon similaire on peut aussi représenter les valeurs sous forme de graphiques à barres verticales.
Dans ce cas, le code du champ calculé sera :label := @DbColumn("":"";"";"statistiques"; 1);
valeur := @DbColumn("":"";"";"statistiques"; 2);
max := @Max(valeur);
img := "brun.gif";
@Implode("<td class=graph_data><img class=graph src=\"" + img +"\" height=\"" + @Text((valeur/max) * 100) + "\" alt =\""+@Text(valeur)+"\" title =\""+@Text(valeur)+"\"></td>") +
"</tr><tr class=graph_label>"+
@Implode("<td class=graph_label>" + label+"</td>")
valeur := @DbColumn("":"";"";"statistiques"; 2);
max := @Max(valeur);
img := "brun.gif";
@Implode("<td class=graph_data><img class=graph src=\"" + img +"\" height=\"" + @Text((valeur/max) * 100) + "\" alt =\""+@Text(valeur)+"\" title =\""+@Text(valeur)+"\"></td>") +
"</tr><tr class=graph_label>"+
@Implode("<td class=graph_label>" + label+"</td>")
et le style associé pourra être
table.graph {
margin-top : -5px;
border-collapse: collapse;
border:2px solid #C6B396;
}
td.graph_data {
padding-top : 10px;
text-align : center;
vertical-align : bottom;
border-bottom:1px solid #C6B396;
border-left:1px dotted #C6B396;
border-right:1px dotted #C6B396;
}
td.graph_label {
font-family : tahoma, arial, helvetica, sans-serif;
font-size : 10px;
width : 25px;
text-align : center;
vertical-align : top;
background : #EBE2D5;
}
img.graph {
width : 15px;
}
margin-top : -5px;
border-collapse: collapse;
border:2px solid #C6B396;
}
td.graph_data {
padding-top : 10px;
text-align : center;
vertical-align : bottom;
border-bottom:1px solid #C6B396;
border-left:1px dotted #C6B396;
border-right:1px dotted #C6B396;
}
td.graph_label {
font-family : tahoma, arial, helvetica, sans-serif;
font-size : 10px;
width : 25px;
text-align : center;
vertical-align : top;
background : #EBE2D5;
}
img.graph {
width : 15px;
}
Voir un exemple de graphique barre
posté par Philippe GAUVIN le lundi, juin 19, 2006
0 Commentaires:
Enregistrer un commentaire
Lien vers ce message:
Créer un lien
<< Home