Premier test de Highcharts

Rédigé par Yacine - 17 janvier 2013

J'ai récemment écrit un article sur le rebalancement d'un portefeuille afin d'améliorer la performance de ce dernier. J'avais alors utilisé des images pour représenter les graphiques.

Or il existe des outils puissant en Javascript pour insérer des graphes au sein de ses pages HTML, comme par exemple des séries financières.

Highcharts est une bibliothèque Javascript vraiment puissante qui permet de faire une panoplie de graphique.

Je vais donc dans ce billet vous montrer mes premiers tests de Highcharts.

Tout d'abord voici un exemple :

 

Exemple-1 : Action Apple en temps réel

 

Alors pour ne rien vous cacher, j'ai repris un exemple fourni par la documentation officielle du site de Highcharts. La procédure à suivre est de normalement télécharger la libraire et d'utiliser les scripts qui s'y trouvent.

Dans cet article, je tape directement sur les scripts qui sont conservés sur les serveurs de Highcharts. Donc pour l'instant j'ai juste intégrer le code ci-dessus à ma page HTML pour avoir ce rendu :

 

<script type="text/javascript">
$(function() {

	$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
		// Create the chart
		window.chart = new Highcharts.StockChart({
			chart : {
				renderTo : 'container'
			},

			rangeSelector : {
				selected : 1
			},

			title : {
				text : 'AAPL Stock Price'
			},
			
			series : [{
				name : 'AAPL',
				data : data,
				tooltip: {
					valueDecimals: 2
				}
			}]
		});
	});

});
</script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>

 

 

Pas sorcier pour l'instant n'est ce pas! N'est-ce pas ? Bon, expliquons sommairement ce code.

 

Nous construisons l'ensemble du graphe avec une seule et unique fonction. La première ligne récupère les données du graphe au format JSON. Celles-ci sont stockées sur le site de Highcharts. En cliquant sur le lien qu'ils utilisent on peut se rendre compte qu'ils ont utiliser une API de Google pour récupérer ses données au format JSON. Yahoo! Finance propose par ailleurs le même type de service.

L'avantage d'utiliser un service tel que Yahoo! Finance est que les données utilisées pour le graphe seront tout le temps à jour.

 

Les autres lignes de la fonction correspondent à d'autres options tels que le titre, le nom de la série, les couleurs utilisées ... Pour voir l'ensemble des paramètres possible je vous réfère à leur documentation car il y'en a un bon paquet.

 

Enfin les deux dernières lignes du code font appel aux scripts Javascript qui permettent justement d'utiliser Highcharts. C'est la ou je triche! Car vous remarquerez que ces derniers se situent sur le site de Highcharts.com et non sur le mien.

 

Utilisation de l'API de Markit pour récupérer les données

Markit propose des API qui permettent de récupérer les données en temps réel, à la façon de Yahoo! Finance à vrai dire. Markit récupère lui même les données qu'ils fournissent par Thomson-Reuters.

Je vais dans cette section vous montrer le script que j'utilise, fourni par Markit, qui permet de de récupérer des cotations puis des les afficher sur son site web.

 

Pour commencer vérifier que vous avez bien téléchargé le dossier contenant l'ensemble des scripts de Highcharts et de Hichstock. Si ce n'est pas fait, voici le lien: >>ICI<<. Une fois téléchargé, il faut ajouter ajouter les scripts highstock.js et highcharts.js au sein de votre page HTML.

 

</script><script src="http://shadowblog.fr/LIEN_VERS_DOSSIER_HIGHSTOCK/stock/highstock.js"></script>

 

Cela fait, nous pourrons à présent utiliser les jolis graphes de Highchart. L'étape suivante concerne la récupération des données via Markit. Pour cela voici un script tout prêt :

/** 
 * Script qui permet de récupérer les données Via Markit
 */
var Markit = {};
/**
 * Define the TimeseriesService.
 * First argument is symbol (string) for the quote. Examples: AAPL, MSFT, JNJ, GOOG.
 * Second argument is duration (int) for how many days of history to retrieve.
 */
Markit.TimeseriesService = function(symbol,duration){
    this.symbol = symbol;
    this.duration = duration;
    this.PlotChart();
};

Markit.TimeseriesService.prototype.PlotChart = function(){
    
    //Make JSON request for timeseries data
    $.ajax({
        beforeSend:function(){
            $("#chartDemoContainer").text("Loading chart...");
        },
        data: { 
            symbol: this.symbol, 
            duration: this.duration 
        },
        url: "http://dev.markitondemand.com/Api/Timeseries/jsonp",
        dataType: "jsonp",
        context: this,
        success: function(json){
        	//Catch errors
		    if (!json.Data || json.Message){
		        console.error("Error: ", json.Message);
		        return;
		    }
            this.BuildDataAndChart(json);
        },
        error: function(){
            alert("Couldn't generate chart.");
        }
    });
};

Markit.TimeseriesService.prototype.BuildDataAndChart = function(json){
    var dateDS = json.Data.SeriesDates,
        closeDS = json.Data.Series.close.values,
        openDS = json.Data.Series.open.values,
        closeDSLen = closeDS.length,
        irregularIntervalDS = [];

    /**
     * Build array of arrays of date & price values
     * Market data is inherently irregular and HighCharts doesn't 
     * really like irregularity (for axis intervals, anyway)
     */
    for (var i=0; i<closeDSLen;i++){
        var dat = new Date(dateDS[i]);
        var dateIn = Date.UTC(dat.getFullYear(), dat.getMonth(), dat.getDate());
        var val = closeDS[i];
        irregularIntervalDS.push([dateIn,val]);	
    }

    //set dataset and chart label
    this.oChartOptions.series[0].data = irregularIntervalDS;
    this.oChartOptions.title.text = "Price History of " + json.Data.Name + " (1 year)";
    
    //init chart
    new Highcharts.Chart(this.oChartOptions);
};

//Define the HighCharts options
Markit.TimeseriesService.prototype.oChartOptions = {
	chart: {
		renderTo: 'myChart'
	},
	title:{},
	subtitle: {
		text: 'Source: Thomson-Reuters/Markit On Demand'
	},
	xAxis: {
		type: 'datetime'
	},
	yAxis: [{ // left y axis
		title: {
			text: null
		},
		labels: {
			align: 'left',
			x: 3,
			y: 16,
			formatter: function() {
				return Highcharts.numberFormat(this.value, 0);
			}
		},
		showFirstLabel: false
	}, { // right y axis
		linkedTo: 0,
		gridLineWidth: 0,
		opposite: true,
		title: {
			text: null
		},
		labels: {
			align: 'right',
			x: -3,
			y: 16,
			formatter: function() {
				return Highcharts.numberFormat(this.value, 0);
			}
		},
		showFirstLabel: false
	}],
	tooltip: {
		shared: true,
		crosshairs: true
	},
	plotOptions: {
		series: {
			marker: {
				lineWidth: 1
			}
		}
	},
	series: [{
		name: "Prix de clôture",
		lineWidth: 2,
		marker: {
			radius: 0
		}
	}]
};

 

Sommairement, ce script contient 4 fonctions. La première, celle que nous appellerons plus tard, permettera de définir le nom de la cotation que nous voulons récupérer ainsi que la plage de dates. La seconde fait appel au service de Markit et récupère les données au format JSON. La troisième initialise les éléments de Highstock qui seront utilisés. Enfin la quatrième définit les paramètres du graphe Highstock que nous affichons.

 

Enregistrer ce script sous le nom de markit.js par exemple dans un répertoire accessible par votre site. Et ajoutez le à votre page HTML.

 

</script><script src="http://shadowblog.fr/LIEN_VERS_DOSSIER/markit.js"></script>

 

Nous allons récupérer la cotation de Google sur 365 jours par exemple. Le code de Google est "GOOG". Pour cela il faut faire appel à la fonction définie dans le script que nous venons d'ajouter. Toujours dans votre page HTML ajouter :

 

<script>new Markit.TimeseriesService("GOOG", 365);</script>

 

L'ensemble des tickers disponibles sont ceux qui sont côtés sur le Bats Exchange. La liste des codes utilisables est disponibles >>ICI<<.

Tout est enfin prêt, il ne reste plus qu'à ajouter la div contenant le graphe dans votre page HTML:

 

<div id="myChart" style="height: 500px; min-width: 500px; text-align: center;"></div>

 

Voici le résultat de cette opération:

 

 

Utiliser Yahoo! Finance avec HighCharts

C'est ce que j'utilise sur mon blog car Yahoo! met à disposition plusieurs données et ce sur un très long terme. Le code que je vais vous présenter ci-dessus permet de choisir la date de départ mais aussi de choisir plusieurs courbes à afficher. En ce qui concerne les paramètres d'affichages je vous laisse vous référer au site officiel de HighCharts.

$(function() {
    var seriesOptions = [],
        yAxisOptions = [],
        seriesCounter = 0,
        names = ['KN.PA', 'BNP.PA', 'SCGLY', 'ACA.PA'],
		namesDisplay = ['Natixis', 'BNP', 'SG', 'CA'],
        colors = Highcharts.getOptions().colors;
        $.each(names, function(i, name) {
        var YQL = format_YQL_request(name);
        $.getJSON(YQL, function(data) {
                var yahooData = parseYahooData(data);
                seriesOptions[i] = {
                    name: namesDisplay[i],
                    data: yahooData					
                };
                seriesCounter++;
                if (seriesCounter == names.length) {
                     createChart();
                }
            });
        });
		
    function format_YQL_request(symbol, start_date, end_date) {
        start_date = new Date(start_date || "2002/01/01");
        end_date   = new Date(end_date || Date() );    
        var URL = 'http://ichart.finance.yahoo.com/table.csv?s='
            + symbol 
            + '%26a=' + start_date.getMonth() 
            + '%26b=' + start_date.getDate() 
            + '%26c=' + start_date.getFullYear() 
            + '%26d=' + end_date.getMonth() 
            + '%26e=' + end_date.getDate() 
            + '%26f=' + end_date.getFullYear() 
            + '%26g=d%26ignore=.csv';
        console.log(URL);
        var YQL = 'http://query.yahooapis.com/v1/public/yql?q='
                  + 'select col0, col4 from csv where url=';
        YQL = YQL + "'" + URL + "'" + '&format=json&callback=?';
        return YQL;
    }
	
    function parseYahooData(data) {

          var rows = data.query.results.row;
        rows.shift();        // remove first row of headers
    
        var yahooData = new Array();

        $.each(rows, function(key,val) {
            
            var date  = + new Date(val.col0);
            var price = parseFloat(val.col4); 

            yahooData.push([date, price]);

        });
        
        return yahooData.reverse();
    }
	
    function createChart() {
        chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'banques'
            },			
			title : {
                text : 'Banque Françaises'
            },			
			subtitle: {
				text: 'Source: Yahoo! Finance'
			},			
            rangeSelector: {
                selected: 4
                  },
            yAxis: {
                labels: {
                    formatter: function() {
                        return (this.value > 0 ? '+' : '') + this.value + '%';
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 2,
                    color: 'silver'
                }]
            },            
            plotOptions: {
                series: {
                    compare: 'percent'
                }
            },            
            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                yDecimals: 2
            },            
            series: seriesOptions
        });
    }
});

 

Le code ci-dessus comporte quatre fonctions qui sont assez explicites par leur nom. La première permet de faire la requête vers le service de Yahoo! Fiannce, grâce aux paramètres que nous avons préalablement définis dans le premier bloc du code. La seconde fonction permet de parser les résultats ainsi obtenues par Yahoo! afin de les afficher sur le graphe HighChart. Enfin la dernière permet la configuration du graphique. Si le code n'est pas clair, n'hésitez pas à me contacter via les commentaires de ce billet.

 

Voici ce que rend le code ci-dessus:

 

 

 

Il s'agit des cours boursier des quatres banques françaises : BNP, Natixis, Société Générale et Crédit Agricole. En niveau de pourcentage par rapport au premier Janvier 2002. J'ai choisi l'affichage en niveau de pourcentage afin de voir l'effet de la crise de 2008 sur les différentes banques.

Faites virevolter cet article sur internet!

author_avatar

Auteur: Yacine

Ingénieur Financier et Ingénieur Informaticien.

Je suis passionné par la finance et l'économie le jour. Geek invétéré durant les heures les plus sombres, d'où le titre du blog : Le Shadow Blog.

Classé dans : Blogosphère, Finance - Mots clés : Finance, Graphe

38 commentaires

avatar

Déborah le dimanche 17 février 2013 à 12:42 #1

Donc c'est ça ce que tu fais à tes heures perdues? Impressive. Tu m'en dira plus mercredi j'ai vraiment envie d'en savoir plus.

avatar

jhonn le mardi 07 mai 2013 à 22:36 #2

Hello,

Merci pour le tuto!
je l'utilise actuellement et je rencontre des problèmes au niveau des caractères ex: é,°,etc sont visible comme �.

Le problème tous bête mais la rien ne change des idées ?

Merci d'avance

avatar

Yacine le mardi 07 mai 2013 à 23:44 #3

@jhonn :

Salut!
Oui Highcharts ne prend pas en compte les caractères spéciaux (pas d'accents, pour eux on écrit en anglais).
Si jamais tu trouves comment faire je veux bien que tu me dises.
Sinon tu peux aller sur leur forum. Ils sont assez réactifs la dessus.
Bon courage!

avatar

toronto marketing jobs in ontario le dimanche 04 décembre 2016 à 13:39 #4

Great article...i liked really!

avatar

simply fashions le jeudi 27 juillet 2017 à 10:37 #5

Sweet blog! I found it while surfing around on Yahoo News.
Do you have any tips on how to get listed
in Yahoo News? I've been trying for a while but
I never seem to get there! Thank you

avatar

simply fashion le jeudi 27 juillet 2017 à 23:49 #6

Good day I am so thrilled I found your web site, I really found you
by accident, while I was browsing on Google for something else, Anyways I am here now and would just like
to say thanks a lot for a remarkable post and a all round
interesting blog (I also love the theme/design), I don't have time to go
through it all at the minute but I have book-marked it and also added
your RSS feeds, so when I have time I will
be back to read a great deal more, Please do keep up the awesome job.

avatar

banque online le vendredi 25 août 2017 à 04:39 #7

Greaat blog һere! Also yolur website loads սp faѕt!
What web host aare yoᥙ using? Сan I
get your affiliate link tⲟ y᧐ur host? I wish my website loaded ᥙp as fаst as youгs lol

avatar

open bank account le vendredi 25 août 2017 à 08:14 #8

I likе what you guys aгe up too. Thiis sort of clever
wоrk аnd reporting! ᛕeep upp the verу ɡood woгks guys I've incorporated
yoս guys too blogroll.

avatar

Katherina le vendredi 25 août 2017 à 08:52 #9

Very g᧐od post. I'm experiencing many ᧐f these issues
ɑs welⅼ..

avatar

opening bank account le vendredi 25 août 2017 à 16:20 #10

Attractive ѕection of content. I just stumbled սpon yоur web site аnd in accession capital tߋ saʏ that Ι acquire іn fact loved account үour blog posts.

Any way I'll bе subscribing tо your feeds and even I
achievement y᧐u gеt entry tߋo consistently quiϲkly.

avatar

bank account le samedi 26 août 2017 à 07:28 #11

Ӏt's appropriate time to make some plans for the ⅼong run and it's tіme to be haрpy.
І've learn thіs submit and if Ι may jսst I want to recommend youu fеԝ attention-grabbing things or
tips. Maуbe yoս couⅼd wrіte next articles гegarding tis article.
Ӏ want to learn more issues aЬout it!

avatar

bank le dimanche 27 août 2017 à 07:30 #12

There's certainly a great deal to learn agout this
subject. Ӏ ike aⅼl the points you've made.

avatar

bank account le dimanche 27 août 2017 à 14:00 #13

Usualⅼy I don't reaɗ artihle on blogs, howevger Ӏ would like to ѕay that thiѕ write-up very forced
me toօ trү ɑnd dо sօ! Υour writing style һas
bеen surprised me. Τhanks, verү nice post.

avatar

finance online le dimanche 27 août 2017 à 14:05 #14

Υоu cοuld certainly see уour enthusiasm in thee
article үoᥙ write. Τһe sectopr hopes fоr even more passionate writers ѕuch as yoᥙ who are not afraid to sаy how thеy beliеѵe.
Always gо after your heart.

avatar

opening bank account le dimanche 27 août 2017 à 14:14 #15

Heey there Ӏ am so thrilled І found your web site, I reаlly found you
ƅу accident, while Ι waѕ researching οn Askjeeve for sometһing else, Regɑrdless I
аm һere now and would јust like tօ say cheers for a fantastic post аnd a alll round exciting blog (І aⅼso
love the theme/design), Ӏ don't have time to go througһ іt aⅼl att tһe momеnt bսt I haѵe book-marked it and alѕo ɑdded іn your RSS feeds, so ѡhen I havе time I wilⅼ
be back to read a gгeat deeal mߋre,Please do keеp up
the fantastic worқ.

avatar

offre banque ouverture compte le lundi 28 août 2017 à 20:39 #16

I've learn severaⅼ ɡood stuff here. Certainly worth bookmarking for revisiting.
I surprise how ɑ lоt effort you set to create this
sort ߋf excellent informative website.

avatar

Www.monmar.it le samedi 09 septembre 2017 à 01:26 #17

You could definitely see your enthusiasm within the article you write.
The arena hopes for more passionate writers like you who are not
afraid to mention how they believe. At all times go after your
heart.

avatar

http://yidebao.116.vipidc.com/co... le mardi 12 septembre 2017 à 23:13 #18

Greetings! Very useful advice within this article!
It is the little changes which will make the biggest changes.
Thanks for sharing!

avatar

banque online le mardi 17 octobre 2017 à 02:38 #19

Hmm іs аnyone elsе һaving problems ᴡith the images οn tһіѕ
blog loading? Ι'm trying too figure out if itts ɑ problem on my end or іf
іt's the blog. Ꭺny feed-baсk wⲟuld ƅe grеatly appreciated.

avatar

ouvrir compte le mercredi 18 octobre 2017 à 10:06 #20

I do not eᴠen know how I ended uр here, but
I thought tһiѕ post ԝaѕ good. I do not knopw who you are but certainly
you're going t᧐ a famous blogger if you ɑren't aⅼready
;) Cheers!

avatar

banques en ligne le samedi 21 octobre 2017 à 12:54 #21

Link exchange іs nothing elkse howevеr it is juѕt placing thee оther person'swebsite link ⲟn your ρage at appгopriate place and otheг
person ᴡill also ԁо same for yօu.

avatar

silver bullion le mercredi 25 octobre 2017 à 12:29 #22

This is a topic that's close to my heart... Cheers!
Where are your contact details though?

avatar

banques en ligne le jeudi 26 octobre 2017 à 09:52 #23

My spouse аnd I stumbled over hеre by ɑ dіfferent web pаge аnd thoսght I migһt as weⅼl check thіngs
out. I likle what I see so now i am folloԝing you. Lⲟok forwarrd tⲟ goіng ⲟver youir wweb pɑge aɡaіn.

avatar

Juegos para moviles le mercredi 08 novembre 2017 à 15:55 #24

Yoou actuaoly maке іt ѕeem ѕo easy with yoᥙr presentation Ƅut I find this topic to be reqlly sometyhing tһat І think Ι woukd neve understand.

Ӏt seemms toо complex and extremely broad f᧐r me. I'm looking forward f᧐r
yοur next post, I'll trʏ tⲟ get the hang oof it!

avatar

Juegos para moviles le samedi 11 novembre 2017 à 01:59 #25

It'ѕ a pity you Ԁon't hаve а donate button! I'ԁ moet
certainlу donate to tһіs excellent blog! Ι suppose for now і'll
settle fоr book-marking аnd adding youг RSS feed to myy Google account.
Ι ⅼߋok forward tо new updates ɑnd will
share this blog with my Facebook grouр. Chat ѕoon!

avatar

Juegos para moviles le dimanche 19 novembre 2017 à 17:44 #26

Helpful info. Lucky mе I foսnd your website unintentionally,
ɑnd I'm surpfised ᴡhy this coijcidence diԁn't toⲟk pⅼace eaгlier!
I boookmarked it.

avatar

climatisation le dimanche 19 novembre 2017 à 23:52 #27

Ⲟh my goodness! Amazing article dude! Many thanks,
Hоwever I am having difficulties ᴡith youг RSS. І don't understand whyy Ӏ am unable to join it.

Is there anybоdy ese having identical RSS ⲣroblems?
Ꭺnyone thаt knows thhe solution сɑn yⲟu kindly respond?
Thanks!!

avatar

Juegos para moviles le lundi 20 novembre 2017 à 01:33 #28

Todɑy, I went to tһe beach with my children. І found a sea shell annd gavе it to my 4 year
old daughter and said "You can hear the ocean if you put this to your ear."Shе puut
the shell t᧐ һeг ear and screamed. Ƭһere waѕ a hermit craab іnside ɑnd it pinched her ear.

She never wɑnts to go bacҝ! LoL I know this is totally off
topic but I hhad to tell someone!

avatar

lien le vendredi 24 novembre 2017 à 01:25 #29

Everything is very open with a very clear explanation of the issues.
It was really informative. Your website is useful.
Thank you for sharing!

avatar

roulette le jeudi 30 novembre 2017 à 02:34 #30

Now Ι am ցoing tߋ ⅾo my breakfast, later than haqving my breakfast сoming оᴠer again to rezd more
news.

avatar

online timer teacher le lundi 04 décembre 2017 à 00:55 #31

Hmm it seems like your website ate my first comment (it was extremely long) so I guess
I'll just sum it up what I submitted and say, I'm thoroughly enjoying
your blog. I as well am an aspiring blog blogger but I'm still new
to everything. Do you have any tips for first-time blog writers?
I'd really appreciate it.

avatar

banque en ligne le jeudi 07 décembre 2017 à 03:30 #32

My brother recommended Ӏ mіght liҝe thіs blog.
Не wаs entіrely гight. This post truⅼү made my
day. You cann't imagine simply hօѡ much timе I һad spent for thіѕ info!
Tһanks!

avatar

online one time registration psc le jeudi 07 décembre 2017 à 10:57 #33

I have been surfing on-line more than 3 hours as of late,
yet I by no means discovered any interesting article like yours.
It's lovely value sufficient for me. In my opinion, if all web owners and bloggers made just right
content as you probably did, the net will be a lot more useful than ever before.

avatar

set quartz alarm clock le jeudi 07 décembre 2017 à 21:31 #34

WOW just what I was looking for. Came here by searching for adidas online release time
yeezy

avatar

online timer zombie le dimanche 10 décembre 2017 à 11:30 #35

Excellent article. Keep writing such kind of info on your site.
Im really impressed by your blog.
Hey there, You've done a great job. I will certainly digg it and
individually suggest to my friends. I'm sure they'll be benefited from this
website.

avatar

online time management software le mercredi 20 décembre 2017 à 12:11 #36

Thank you for the auspicious writeup. It in reality was a leisure account it.

Glance complicated to far brought agreeable from you!
However, how can we keep up a correspondence?

avatar

online timer continuous le vendredi 22 décembre 2017 à 18:48 #37

I was wondering if you ever thought of changing
the layout of your blog? Its very well written; I love what youve got to say.
But maybe you could a little more in the way of
content so people could connect with it better. Youve got
an awful lot of text for only having one or 2 pictures.
Maybe you could space it out better?

avatar

view source le mardi 13 février 2018 à 08:05 #38

I'm extremely impressed with your writing skills as well as with the layout on your weblog.
Is this a paid theme or did you customize it yourself? Anyway keep up the excellent
quality writing, it’s rare to see a great blog like this one nowadays..

Écrire un commentaire

Quelle est la deuxième lettre du mot ejfbw ? : 

Réseaux Sociaux

Rechercher

Catégories

Derniers articles

Twitter

Mots clés