Bonjour,
Je débute en Javascript et je souhaite utiliser raphael.js pour créer des graphiques.
J'ai utilisé le tuto suivant :
http://joedesigns.com/labs/Beautiful-Analytics-Chart/
Je veux intégrer mon graphique dans le bloc 2 d'une page HTML qui en comporte 4.
La table de données est identifiée par son id (d1).
Malheureusement, rien de s'affiche.
Ma page HTML :
Mon fichier script_raphael.js :
Merci de votre aide !
Je débute en Javascript et je souhaite utiliser raphael.js pour créer des graphiques.
J'ai utilisé le tuto suivant :
http://joedesigns.com/labs/Beautiful-Analytics-Chart/
Je veux intégrer mon graphique dans le bloc 2 d'une page HTML qui en comporte 4.
La table de données est identifiée par son id (d1).
Malheureusement, rien de s'affiche.
Ma page HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<!--<link rel="stylesheet" href="styles_tableau_bord.php" type="text/css">-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="style_ie.css" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!insertion de raphael.js et du script-->
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="analytics.js"></script>
<script type="text/javascript" src="script_raphael.js"></script>
<title>Tableau de bord</title>
</head>
<div id="conteneur">
<body>
<div id="header">
<!-- Ceci est mon haut de page -->
<h1>Tableau de bord</h1>
</div>
<div id="sidebar">
<!-- Ceci est ma colonne latérale -->
<ul>
<li><a href="#">Global SCD</a></li>
<li><a href="#">BU Sciences STAPS</a></li>
<li><a href="#">BU Droit Economie Gestion</a></li>
<li><a href="#">BU Sciences STAPS</a></li>
<li><a href="#">BU Droit Economie Gestion</a></li>
<li><a href="#">BU Sciences STAPS</a></li>
<li><a href="#">BU Droit Economie Gestion</a></li>
<li><a href="#">BU Sciences STAPS</a></li>
<li><a href="#">BU Droit Economie Gestion</a></li>
</ul>
</div>
<div id="contenu">
<!-- Ceci est mon contenu principal -->
<div id="blocs1">
<h2>Prêts par mois</h2>
<?php include("afficheDonneesGlobal.php"); ?>
</div>
<div id="blocs2">
<!-- Essai de raphael.js dans le bloc 2 -->
<table id="d1" style='display: none;'>
<tfoot>
<tr>
<th>3/02</th>
<th>3/03</th>
<th>3/09</th>
<th>3/16</th>
</tr>
</tfoot>
<tbody class='data'>
<tr>
<td>70</td>
<td>70</td>
<td>210</td>
<td>490</td>
</tr>
</tbody>
<tbody class='line1'>
<tr>
<td>70 Views</td>
<td>70 Views</td>
<td>210 Views</td>
<td>490 Views</td>
</tr>
</tbody>
<tbody class='line2'>
<tr>
<td>Mar 2nd 2011</td>
<td>Mar 3rd 2011</td>
<td>Mar 9th 2011</td>
<td>Mar 16th 2011</td>
</tr>
</tbody>
</table>
<!-- Fin essai de raphael.js dans le bloc 2 -->
</div>
<div id="blocs3">
<h2>Inscriptions</h2>
<p>Bla bla bla bla (texte de l'article)</p></div>
<div id="blocs4">
<h2>% inscriptions / public potentiel</h2>
<p>Bla bla bla bla (texte de l'article)</p></div>
</div>
</body>
<div id="footer">
<!-- Ceci est mon pied de page -->
</div>
</div>
</html>Mon fichier script_raphael.js :
<script type='text/javascript'>
Element.observe(window,'load', function(){
var w = 280; // you can make this dynamic so it fits as you would like
var linechart = Raphael('line-chart', w, 250); // init the raphael obj and give it a width plus height
drawLine({ // call the drawLine function
holder: linechart, // pass through the raphael obj
data_holder: 'd1', // find the table data source by id
mastercolor: '#01A8F0', // set the line color
spewidth: w, // pass in the same width
showarea: true, // show the area
mousecoords: 'rect' // rect (uses blanket mode) | circle (pinpoints the points)
});
});
</script>Merci de votre aide !
