Asp/vml, tracer un histogramme à partir d'une bd sql server ou autre

Soyez le premier à donner votre avis sur cette source.

Snippet vu 18 052 fois - Téléchargée 28 fois

Contenu du snippet

Jamais, tracer des graphes n'a jamais été aussi facile.
En plus cette fois ci la page web de tracé des graphes est directement connecté à notre base de données. Les mises à jour effectuées sur la base se répercutent automatique sur la page du graphe.
ASP+VML, c'est donc une autre manières de réprésenter ses statistiques, de tracer des graphes sur des sondages, de modéliser des objets etc...
Costumiser le code à votre guise et vous serez surpris.

Source / Exemple :


<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<%
Dim MM_Cnn_STRING
MM_Cnn_STRING = "dsn=DsnSondageIntranet;uid=sa;"
%>
<%
'==================================================================================
									'DECLARATION DES VARIABLES
'==================================================================================

Dim RsGraphe
Dim RsCouleurs
Dim RsCouleurs_numRows
Dim RsGraphe_numRows
DIM CodeCouleur
DIM CodeLettre
DIM LETTRE
'==================================================================================
								'CONNEXION A LA BASE DE DONNEES
'==================================================================================

Set RsGraphe = Server.CreateObject("ADODB.Recordset")
RsGraphe.ActiveConnection = MM_Cnn_STRING
RsGraphe.Source = "SELECT COUNT(nomchoisi) AS Nombre, nomchoisi  FROM VotreChoix  GROUP BY nomchoisi"
RsGraphe.CursorType = 0
RsGraphe.CursorLocation = 2
RsGraphe.LockType = 1
RsGraphe.Open()

RsGraphe_numRows = 0
%>
<%
'==================================================================================
'Dans la balise HTML, xmlns:v="urn:schemas-microsoft-com:vml", permet d'informer
'le navigateur que la page peut contenir du code VML(Vector Markup Language)
'==================================================================================
%>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Résultats du Sondage Intranet</title>
<style>
  v\:* {behavior:url(#default#VML);}
</style>
</head>
<body>
<FONT COLOR="blue" size="+3">Résultats du Sondage Intranet</FONT>
<br>
<!--
Ici, le rect est un exemple, pour la suite des exemples,
veuillez copier le code directement dans le BODY de ce document
-->

<%'for i=1 to RsGraphe.RecordCount%>

<%While Not (RsGraphe.EOF or RsGraphe.BOF)%>
<%
'==================================================================================
					'Les couleurs son définies dans la base de données
				'Ceci pour éviter que les barres de l'histogramme aient la même couleur
		'Vous pouvez aussi créer un script de génération automatique de couleur aléatoire
'==================================================================================

Set RsCouleurs= Server.CreateObject("ADODB.Recordset")
RsCouleurs.ActiveConnection = MM_Cnn_STRING
RsCouleurs.Source = "SELECT Couleurs FROM SondageDesignationIntranet Where nomchoisi='" & RsGraphe.Fields.Item("nomchoisi").Value & "'"
RsCouleurs.CursorType = 0
RsCouleurs.CursorLocation = 2
RsCouleurs.LockType = 1
RsCouleurs.Open()

RsGraphe_numRows = 0
%>

<%'RANDOMIZE%>
<%'CodeCouleur=Int((9 * Rnd) + 1)%>
<%'CodeLettre=Int((8 * Rnd) + 3)%>
<%'LETTRE=CHR(69-Int((5 * Rnd) + 1))%>
<%'=69-Int((4 * Rnd) + 1)%>
<%'=LETTRE%>
<v:rect
<!--Commande VML qui permet de tracer un rectangle
Devant Width, mettre la longueur du rectangle et devant height, la largeur
La couleur est définit par fillcolor et on lui affecte le champ de base de données contenant le code de la couleur
->
  fillcolor="<%=(RsCouleurs.Fields.Item("Couleurs").Value)%>"
 <!--
 Dans Height, mettez, la valeur correspondant à la hauteur
 ->

  style="position:relative;top:1;left:1;width:40;height:<%=(RsGraphe.Fields.Item("Nombre").Value)*20%>;">
<b><div align="center"><%=(RsGraphe.Fields.Item("nombre").Value)%></div></b>
<%
RsCouleurs.Close()
Set RsCouleurs = Nothing
%>
</v:rect>
<%RsGraphe.MoveNext%>
<%WEND%>
<br>
<br>
<br>
<FONT COLOR="blue" size="+1">Légende</FONT>
<br>
<%
Set RsCouleurs= Server.CreateObject("ADODB.Recordset")
RsCouleurs.ActiveConnection = MM_Cnn_STRING
RsCouleurs.Source = "SELECT distinct NomChoisi,Couleurs FROM SondageDesignationIntranet order by nomchoisi"
RsCouleurs.CursorType = 0
RsCouleurs.CursorLocation = 2
RsCouleurs.LockType = 1
RsCouleurs.Open()

RsCouleurs_numRows = 0
%>
<%While Not (RsCouleurs.EOF or RsCouleurs.BOF)%>

<FONT COLOR="brown"><%=(RsCouleurs.Fields.Item("NomChoisi").Value)%></FONT>
<v:rect
  fillcolor="<%=(RsCouleurs.Fields.Item("Couleurs").Value)%>"
  style="position:relative;top:1;left:1;width:40;height:10;">
</v:rect>
<br>
<%RsCouleurs.MoveNext%>
<%Wend%>
<%
RsCouleurs.Close()
Set RsCouleurs = Nothing
%>
<p>
</p>
</body>
</html>
<%
RsGraphe.Close()
Set RsGraphe = Nothing
%>

A voir également

Ajouter un commentaire

Commentaires

cs_fabrice69
Messages postés
1766
Date d'inscription
jeudi 12 octobre 2000
Statut
Modérateur
Dernière intervention
11 décembre 2013
4 -
intéressante comme source, Pour ceux que VML interessent, il y a un ensemble d'article permettant d'appréhender une partie des possibilité de celui-ci à l'adresse suivante :
- http://www.asp-php.net/tutorial/vml/index.php

F___
laspirant
Messages postés
12
Date d'inscription
dimanche 13 octobre 2002
Statut
Membre
Dernière intervention
27 août 2004
-
j'ai utilisé VML pour faire des courbes, mais là je crois que je vais faire un plaisir immense au cadres de ma boites en leur montrant de beaux graph sur l'intranet.
merci pour cette source.super
tontonpolak
Messages postés
13
Date d'inscription
jeudi 22 juillet 2004
Statut
Membre
Dernière intervention
12 mai 2007
-
Merci rahou, le VML est Magique
je me permets de mettre un code un peu plus généraliste pour en faire profiter tout le
monde meme les novices
Je sais c'est facile de mettre un code derrière un autre, mais c'est pour montrer plus de
fonctionalité entre autre la 3D.

Une petite Image : http://img353.imageshack.us/img353/8491/test0bc.jpg

Voilà le code (copier / coller dans notepad et enregistrer sous test.htm) :

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Résultats du Sondage Intranet</title>
<style>
v\:* {behavior:url(#default#VML);}
</style>
</head>

<SCRIPT language="VBScript">
Function RazRotate()
txtX.value = 0
txtY.value = 0
txtZ.value = 0
rx = 0
ry = 0
rz = 0
For i = 1 To 10
document.getelementbyid("Rect"&cstr(i)).rotation = rz
document.getelementbyid("Ext"&cstr(i)).rotationangle = rx & " " & ry
Next
End Function
Function ChangeRotate()
x = txtX.value
y = txtY.value
z = txtZ.value
If Not IsNumeric(x) Then
alert("X : n'est pas Valide !!!")
txtX.focus()
return
End If
If Not IsNumeric(y) Then
alert("Y : n'est pas Valide !!!")
txtY.focus()
return
End If
If Not IsNumeric(z) Then
alert("Z : n'est pas Valide !!!")
txtZ.focus()
return
End If
rx = x
ry = y
rz = z
For i = 1 To 10
document.getelementbyid("Rect"&cstr(i)).rotation = rz
document.getelementbyid("Ext"&cstr(i)).rotationangle = rx & " " & ry
Next
End Function
Function Change3D()
Select Case Sel3D.value
Case "2D"
For i = 1 To 10
document.getelementbyid("Ext"&cstr(i)).backdepth = 0
Next
Case "3D"
For i = 1 To 10
document.getelementbyid("Ext"&cstr(i)).backdepth = 75
Next
End Select
End Function
Function ChangeDegrade()
Select Case SelDegrade.value
Case "Sans"
For i = 1 To 10
document.getelementbyid("Deg"&cstr(i)).type = none
Next
Case Else
For i = 1 To 10
document.getelementbyid("Deg"&cstr(i)).on = True
document.getelementbyid("Deg"&cstr(i)).type = SelDegrade.value
Next
End Select
End Function
</SCRIPT>
<center>
<v:line from="0, 0" to="70, 0" style="width:100;height:100">
<v:fill on="True" color="#FFFFFF" color2="#fe845a" type="gradient" angle="180" />
<v:shadow on="true" color="#808080" offset="5pt, 5pt" opacity="50%" />
<v:path textpathok="True" />
<v:textpath on="True" string="Résultats du Sondage Intranet" style="font:normal normal normal 40pt Arial" />
</v:line>
</center>
<hr>
Dégradé :
<select name="SelDegrade" onchange = "ChangeDegrade()">
<option value="Sans"> Sans</option>
<option value="gradient" selected> Gradient</option>
<option value="gradientradial"> Gradient Radial</option>
</select>

Vue 3D :
<select name="Sel3D" onchange = "Change3D()">
<option value="2D">2D</option>
<option value="3D" selected> 3D </option>
</select>

Rotation :
x y
z =


<hr>



<script language="VBScript">
Dim R
Dim V
DIM B
DIM WAleat
DIM Couleur
For i=1 to 10
R hex(Int((255 - 0 + 1)*Rnd() + 0)) 'Couleur Aléatoire Rouge (0> 255)
V hex(Int((255 - 0 + 1)*Rnd() + 0)) 'Couleur Aléatoire Vert (0> 255)
B hex(Int((255 - 0 + 1)*Rnd() + 0)) 'Couleur Aléatoire Bleu (0> 255)
WAleat Int((255 - 0 + 1)*Rnd() + 0) 'Longeur de l'Histogramme Aléatoire (0> 255)
CouleurR&V&B 'La Couleur en Hexadecimal est à Rouge + Vert + Bleu
randomize ' un petit Random pour qu'à chaque rafraichissement ça bouge un peu
'La partie Dégradé => <v:fill
'La partie 3D de votre Rect avec une autre forme de terminaison de balise VML "" comme le XHTML => <v:extrusion
document.write "<v:rect id='Rect"&i&"'"&_
" fillcolor='#"&Couleur&"'"&_
" style='position:relative;top:1;left:1;width:"&WAleat&";height:20'>"&_
"<v:fill id='Deg"&i&"' on='True' type='gradient' color='#"&Couleur&"' />"&_
"<v:extrusion id='Ext"&i&"' on = 't' type = 'perspective' backdepth = '75pt' />"

if WAleat > 55 Then 'Comme je donne la largeur de l'Histogramme au libellé interne, je suis obligé d'adapter pour éviter le retour chariot à cause de la Largeur
document.write "
test : "&i&"
"
Else
document.write "
test : "&i&"
"
End If
document.write "
"&WAleat&"
"&_
"</v:rect>"&_
"
"
Next

</script>

</html>

Bye et continue le VML
cs_rahou
Messages postés
12
Date d'inscription
mercredi 10 décembre 2003
Statut
Membre
Dernière intervention
28 octobre 2006
-
Ton script donne plus de fun au design.
Merci quand même.
Il faut cependant noter que le VML est quand même à ses balbutiements étant donné que des navigateurs comme firefox ne l'ont pas encore adopté.
tontonpolak
Messages postés
13
Date d'inscription
jeudi 22 juillet 2004
Statut
Membre
Dernière intervention
12 mai 2007
-
Ah ouaih, je savais pour la limite Supérieure à IE5 mais pour Firefox
as tu plus de news à propos des Navigateurs compatibles ???
genre Nescape, opéra, mozilla

Ils devraient bientot le faire etant recommander (ou normaliser) par le W3C

en tout cas, à choisir entre la daube Flash et le VML j'ai choisi :-)

bye

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.