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 :
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!
Auteur: Yacine
Ingénieur Financier et Ingénieur Informaticien.
Classé dans : Blogosphère, Finance - Mots clés : Finance, Graphe
75 commentaires