Sujet Précédent Sujet Suivant

Graphique dynamique sur le cours du bitcoin

Fermé
Niiko' Messages postés 299 Date d'inscription samedi 30 avril 2011 Statut Membre Dernière intervention 4 novembre 2018 - 16 sept. 2016 à 17:29
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 - 17 sept. 2016 à 21:20
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. 

<!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:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
16 sept. 2016 à 23:08
Bonjour,


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.


1
Réponse 2 / 2
Niiko' Messages postés 299 Date d'inscription samedi 30 avril 2011 Statut Membre Dernière intervention 4 novembre 2018 12
17 sept. 2016 à 18:34
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 ? 

<!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 !
0
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
17 sept. 2016 à 21:20
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 : 
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...
0

Discussions similaires

Nom de champs du tableau croisé dynamique non valide
Kazooie123 -
SajDri -

6 réponses
Que veut dire Carte Graphique OC??
Benallou.Mohamed -
Bob -

6 réponses
Nuages de point avec abscisses différentes
LCFloor -
LCFLoor -

6 réponses
ventilateur carte graphique ne tourne pas
striker -
striker -

5 réponses