Le langage de programmation Javascript est très populaire et est utilisé pour créer des applications web interactives. Une des fonctionnalités les plus intéressantes de Javascript est la possibilité de créer des graphiques dynamiques. L’un des outils les plus populaires pour créer des graphiques dynamiques est Dygraphs. Dygraphs est un outil open source qui permet aux développeurs de créer des graphiques interactifs à partir de données. Une des fonctionnalités intéressantes de Dygraphs est la possibilité d’afficher des dates à partir d’un timestamp Unix. Dans cet article, nous allons examiner comment utiliser Dygraphs pour afficher des dates à partir d’un timestamp Unix.
Javascript : Graphique Dygraphs : afficher date à partir unixtime
Ce que l’on va faire ici
- Dans ce code Javascript intégré dans une page HTML, je montre comment afficher la date en abscisse à partir de la valeur unixtime dans un graphique de données à l’aide de la librairie Javascript Dygraphs installée sur un serveur http, soit distant, soit local.
- La librairie Dygraphs est à installer en local sur un miniPC par exemple. Voir la procédure ici : Installer des librairies Javascript locales
Liens utiles :
- La documentation des options Dygraphs : http://dygraphs.com/options.html
- Exemples Dygaphs : http://dygraphs.com/gallery/
Le code HTML + Javascript
<html>
<head>
<meta http-equiv=« content-type » content=« text/html; charset=UTF-8 » /> <!– Encodage de la page –>
<script language=« javascript » type=« text/javascript »>
<!–
// code javascript par X. HINAULT – www.mon-club-elec.fr – tous droits reserves – 2013 – GPL v3
function path(jsFileNameIn) { // fonction pour fixer chemin absolu
var js = document.createElement(« script »);
js.type = « text/javascript »;
js.src = » https://www.mon-club-elec.fr/mes_javascripts/dygraphs/ »+jsFileNameIn; // <=== serveur externe – modifier chemin ++ si besoin
//js.src = « http://127.0.0.1/javascript/dygraphs/ »+jsFileNameIn; // serveur local
//js.src = « http://web.archive.org/web/20210804223007/https://www.mon-club-elec.fr/pmwiki_mon_club_elec/javascript/rgraph/ »+jsFileNameIn; // chemin local – fichier doit etre a la racine serveur
//js.src = « http:// »+window.location.hostname+ »:80″+ »/dygraphs/ »+jsFileNameIn; // si utilisation server http local port 80
document.head.appendChild(js);
//alert(js.src); // debug
} // fin fonctin path
//—- fichiers a charger —
path(‘dygraph-combined.js’); // fichier simplifiant acces a tous les fichiers de la librairie dygraph
window.onload = function () { // au chargement de la page
graph = new Dygraph( // cree l’objet du graphique
// div conteneur
document.getElementById(« graphdiv »), // objet div utilise appele par son nom
//— definition des donnees par une fonction
« Date,Series1,Series2\n« +
« 1247382000,100,200\n« +
« 1247382000,100,200\n« +
« 1247383000,100,200\n« +
« 1247384000,100,200\n« +
« 1247385000,100,200\n« +
« 1247386000,100,200\n« +
« 1247387000,100,200\n« +
« 1247388000,100,200\n« ,
//– parametres a utiliser pour le graphique
{
xValueFormatter: Dygraph.dateString_,
xValueParser: function(x) { return 1000*parseInt(x); },
xTicker: Dygraph.dateTicker
} // fin parametres
); // fin déclaration graphique
} // fin onload
</script>
<title>Test Dygraphs</title>
</head>
<body>
<div id=« graphdiv »></div>
<br />
Test de graphique Dygraphs : affichage simple de données
</body>
</html>
