Graphique dynamique sur le cours du bitcoin
Niiko'
Messages postés
301
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
Je développe actuellement un site sur la monnaie virtuelle Bitcoin. Je dois créer un graphique dynamique sur le cours du bitcoin (valeur du bitcoin en $USD). Pour cela je compte utiliser Highcharts, avec un template présent dans les fichiers de HighStock.
Ce template montre actuellement le cours en bourse d'Apple. Je voudrais changer ceci par la valeur du Bitcoin, et le rendre dynamique (actualisation toutes les Secondes).
Auriez vous une idée de comment faire ? Je cherche depuis ce matin en vain...
Merci !
Je développe actuellement un site sur la monnaie virtuelle Bitcoin. Je dois créer un graphique dynamique sur le cours du bitcoin (valeur du bitcoin en $USD). Pour cela je compte utiliser Highcharts, avec un template présent dans les fichiers de HighStock.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL Stock Price',
data : data,
type : 'area',
threshold : null,
tooltip : {
valueDecimals : 2
},
fillColor : {
linearGradient : {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}]
});
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
</body>
</html>
Ce template montre actuellement le cours en bourse d'Apple. Je voudrais changer ceci par la valeur du Bitcoin, et le rendre dynamique (actualisation toutes les Secondes).
Auriez vous une idée de comment faire ? Je cherche depuis ce matin en vain...
Merci !
A voir également:
- Javascript graphique dynamique
- Tableau croisé dynamique - Guide
- Changer carte graphique - Guide
- Exemple tableau croisé dynamique télécharger - Télécharger - Tableur
- Graphique sparkline - Guide
- Liste déroulante dynamique excel - Guide
2 réponses
Bonjour,
Javascript => setInterval()
Pour cela tu dois soit trouver les informations désirées (retournées au format JSON de préférence....) soit te créer toi même un script qui récupère ces informations ( à faire en PHP )
Puis modifier l'url présente dans la ligne de code :
de façon à pointer dessus.
actualisation toutes les Secondes
Javascript => setInterval()
Je voudrais changer ceci par la valeur du Bitcoin,
Pour cela tu dois soit trouver les informations désirées (retournées au format JSON de préférence....) soit te créer toi même un script qui récupère ces informations ( à faire en PHP )
Puis modifier l'url présente dans la ligne de code :
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
de façon à pointer dessus.
Merci beaucoup pour ton aide, j'ai bien avancé avec ça ! Cependant je suis confronté à un problème, lorsque je change le lien du JSON, je me retrouve face à une page blanche... Quelque chose ne va t'il pas dans mon code ?
Merci beaucoup !
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$.getJSON('http://api.coindesk.com/v1/bpi/historical/close.json', function (data) {
// Create the chart
$('#container').highcharts('StockChart', {
chart : {
events : {
load : function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
rangeSelector : {
selected : 1
},
title : {
text : 'BTC'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
</body>
</html>
Merci beaucoup !
Pour le savoir il te faut regarder dans la console de debugage de ton navigateur (je te conseille pour ça d'utiliser le plugin FIREBUG pour FireFox ( de l'activer, d'afficher ta page... et de voir ce qui s'affiche dans la console.....)
Je t'invite aussi à mettre un console.log dans ta fonction pour voir si ce qu'elle retourne est valide
ici par exemple :
là aussi ça s'affichera dans la console de ton navigateur...
Je t'invite aussi à mettre un console.log dans ta fonction pour voir si ce qu'elle retourne est valide
ici par exemple :
function (data) {
console.log(" Valeurs de retour :");
console.log(data);
// Create the chart
// le reste de ton code....
là aussi ça s'affichera dans la console de ton navigateur...