Stock/forex candle chart using canvas api
0/5 (2 avis)
Vue 5 771 fois - Téléchargée 385 fois
Description
Hello,
J'ai créé une class javascript permettant de générer un graph de type Japanese Candlestick à la volée, avec possibilité d'ajouter des indicateurs.
C'est une version basique mais fonctionnelle, qui permet deja de faire des analyses de marché grace à la possibilité d'ajouter des indicateurs.
La class analyses les données au format CSV, tel qu'exportées par une plateforme de type MetaTrader.
Si vous êtes un trader, stock ou forex, cela vous permettra de coder vos indicateurs en javascript
J'ai créé une class javascript permettant de générer un graph de type Japanese Candlestick à la volée, avec possibilité d'ajouter des indicateurs.
C'est une version basique mais fonctionnelle, qui permet deja de faire des analyses de marché grace à la possibilité d'ajouter des indicateurs.
La class analyses les données au format CSV, tel qu'exportées par une plateforme de type MetaTrader.
Source / Exemple :
var candles = new jscandles();
candles.init($('graph1'), {
design: {
width:600,
height:300,
bg:'0,0,0',
bull:'0,200,0',
bear:'255,255,255'
}
});
initCandles($('datainput').value);
candles.addIndicator("MA2", MA, [5,'line','0,255,0',2]);
candles.addIndicator("MA3", MA, [15,'points','0,120,0',2]);
candles.addIndicator("mmbands", mmbands, [10,'line','255,255,255',1]);
candles.applyIndicators();
function initCandles(rawData) {
candles.setData(candles.parseData(rawData));
candles.drawCandles(0,$('candleNumber').value);
}
Exemple de donnée (pair EUR/USD exportées dans un fichier CSV par MetaTrader):
2009.11.30,06:00,1.50622,1.50830,1.50612,1.50651,1743
2009.11.30,07:00,1.50654,1.50776,1.50289,1.50501,3086
2009.11.30,08:00,1.50498,1.50729,1.50445,1.50449,1960
2009.11.30,09:00,1.50448,1.50699,1.50445,1.50633,2633
2009.11.30,10:00,1.50631,1.50631,1.50208,1.50408,3444
2009.11.30,11:00,1.50407,1.50529,1.50338,1.50414,2524
2009.11.30,12:00,1.50411,1.50573,1.50270,1.50552,2658
2009.11.30,13:00,1.50550,1.50647,1.50238,1.50319,2936
2009.11.30,14:00,1.50323,1.50356,1.50128,1.50290,2466
2009.11.30,15:00,1.50287,1.50404,1.50128,1.50161,3052
2009.11.30,16:00,1.50163,1.50228,1.49964,1.50195,4107
2009.11.30,17:00,1.50196,1.50464,1.50043,1.50128,3634
2009.11.30,18:00,1.50129,1.50150,1.49770,1.49926,3872
2009.11.30,19:00,1.49925,1.50039,1.49728,1.49749,2370
2009.11.30,20:00,1.49750,1.50074,1.49749,1.50018,2059
2009.11.30,21:00,1.50016,1.50030,1.49838,1.49916,1815
2009.11.30,22:00,1.49918,1.50228,1.49907,1.50140,2049
2009.11.30,23:00,1.50138,1.50142,1.50039,1.50039,996
2009.12.01,00:00,1.50041,1.50104,1.49996,1.50076,1048
2009.12.01,01:00,1.50075,1.50394,1.50028,1.50346,1291
2009.12.01,02:00,1.50345,1.50351,1.50091,1.50099,1509
2009.12.01,03:00,1.50098,1.50234,1.50078,1.50162,1366
2009.12.01,04:00,1.50163,1.50197,1.50030,1.50147,1656
2009.12.01,05:00,1.50148,1.50250,1.50021,1.50147,2120
2009.12.01,06:00,1.50146,1.50180,1.50015,1.50101,1420
2009.12.01,07:00,1.50104,1.50112,1.49712,1.50003,2200
2009.12.01,08:00,1.50002,1.50193,1.49891,1.50186,2195
2009.12.01,09:00,1.50194,1.50386,1.50194,1.50272,2706
2009.12.01,10:00,1.50275,1.50677,1.50273,1.50677,2973
2009.12.01,11:00,1.50676,1.50744,1.50578,1.50611,2580
2009.12.01,12:00,1.50612,1.50809,1.50591,1.50752,2241
2009.12.01,13:00,1.50751,1.50794,1.50609,1.50644,1794
2009.12.01,14:00,1.50642,1.50736,1.50602,1.50608,2020
2009.12.01,15:00,1.50609,1.50952,1.50592,1.50767,3002
2009.12.01,16:00,1.50769,1.51013,1.50722,1.50837,3485
2009.12.01,17:00,1.50834,1.51012,1.50743,1.50925,3787
2009.12.01,18:00,1.50923,1.51164,1.50891,1.51019,2963
2009.12.01,19:00,1.51008,1.51128,1.50930,1.50932,1271
2009.12.01,20:00,1.50931,1.51143,1.50926,1.51090,1513
2009.12.01,21:00,1.51093,1.51106,1.50911,1.50945,1684
2009.12.01,22:00,1.50946,1.50948,1.50754,1.50841,1712
2009.12.01,23:00,1.50840,1.50903,1.50807,1.50812,1299
2009.12.02,00:00,1.50817,1.50848,1.50746,1.50760,955
2009.12.02,01:00,1.50757,1.50905,1.50757,1.50892,841
2009.12.02,02:00,1.50890,1.50953,1.50802,1.50890,1311
2009.12.02,03:00,1.50891,1.50915,1.50744,1.50799,1345
2009.12.02,04:00,1.50798,1.50943,1.50791,1.50850,1306
2009.12.02,05:00,1.50849,1.51017,1.50846,1.50896,1266
2009.12.02,06:00,1.50897,1.50923,1.50834,1.50912,917
2009.12.02,07:00,1.50911,1.51001,1.50810,1.50899,1060
2009.12.02,08:00,1.50892,1.50985,1.50823,1.50860,1683
2009.12.02,09:00,1.50859,1.50905,1.50647,1.50861,2775
2009.12.02,10:00,1.50863,1.51089,1.50819,1.50949,2698
2009.12.02,11:00,1.50947,1.51033,1.50845,1.50994,2103
2009.12.02,12:00,1.50998,1.51088,1.50900,1.51020,2200
2009.12.02,13:00,1.51021,1.51048,1.50820,1.50851,2017
2009.12.02,14:00,1.50850,1.50907,1.50806,1.50897,1626
2009.12.02,15:00,1.50899,1.50946,1.50687,1.50746,2551
2009.12.02,16:00,1.50749,1.50856,1.50618,1.50737,3371
2009.12.02,17:00,1.50736,1.50929,1.50705,1.50758,3418
2009.12.02,18:00,1.50757,1.50760,1.50412,1.50580,3515
2009.12.02,19:00,1.50581,1.50679,1.50320,1.50426,2715
2009.12.02,20:00,1.50430,1.50492,1.50347,1.50463,1560
2009.12.02,21:00,1.50465,1.50492,1.50343,1.50355,2062
2009.12.02,22:00,1.50354,1.50461,1.50346,1.50458,1359
2009.12.02,23:00,1.50454,1.50466,1.50417,1.50433,1008
2009.12.03,00:00,1.50431,1.50497,1.50425,1.50470,803
2009.12.03,01:00,1.50473,1.50739,1.50473,1.50666,1377
2009.12.03,02:00,1.50660,1.50824,1.50632,1.50773,1742
2009.12.03,03:00,1.50776,1.50874,1.50773,1.50785,1340
2009.12.03,04:00,1.50784,1.50937,1.50769,1.50874,1071
2009.12.03,05:00,1.50873,1.50951,1.50869,1.50923,1144
2009.12.03,06:00,1.50923,1.50927,1.50842,1.50866,920
2009.12.03,07:00,1.50867,1.50887,1.50784,1.50787,1264
2009.12.03,08:00,1.50788,1.51114,1.50759,1.51064,1694
2009.12.03,09:00,1.51063,1.51269,1.51023,1.51150,2737
2009.12.03,10:00,1.51152,1.51201,1.51059,1.51091,2397
2009.12.03,11:00,1.51093,1.51174,1.51020,1.51164,2241
2009.12.03,12:00,1.51163,1.51327,1.51140,1.51217,2168
2009.12.03,13:00,1.51212,1.51300,1.51192,1.51222,1871
2009.12.03,14:00,1.51223,1.51268,1.51124,1.51260,1847
2009.12.03,15:00,1.51262,1.51399,1.50826,1.50887,3909
2009.12.03,16:00,1.50888,1.51066,1.50635,1.50772,4379
2009.12.03,17:00,1.50771,1.50890,1.50611,1.50866,3533
2009.12.03,18:00,1.50867,1.51008,1.50770,1.50806,2893
2009.12.03,19:00,1.50801,1.50842,1.50753,1.50833,1845
2009.12.03,20:00,1.50833,1.50959,1.50752,1.50912,1604
2009.12.03,21:00,1.50911,1.50963,1.50849,1.50896,1330
2009.12.03,22:00,1.50897,1.50949,1.50711,1.50731,1548
2009.12.03,23:00,1.50732,1.50745,1.50449,1.50522,1755
2009.12.04,00:00,1.50523,1.50605,1.50371,1.50532,1365
2009.12.04,01:00,1.50529,1.50665,1.50512,1.50622,1049
2009.12.04,02:00,1.50621,1.50637,1.50483,1.50520,1718
2009.12.04,03:00,1.50521,1.50621,1.50455,1.50571,1634
2009.12.04,04:00,1.50572,1.50632,1.50542,1.50617,883
2009.12.04,05:00,1.50616,1.50653,1.50561,1.50588,814
2009.12.04,06:00,1.50589,1.50596,1.50520,1.50577,836
2009.12.04,07:00,1.50575,1.50595,1.50451,1.50497,1075
2009.12.04,08:00,1.50496,1.50716,1.50448,1.50672,1446
2009.12.04,09:00,1.50674,1.50890,1.50659,1.50834,2172
2009.12.04,10:00,1.50833,1.50835,1.50604,1.50653,2290
2009.12.04,11:00,1.50654,1.50724,1.50569,1.50652,1631
2009.12.04,12:00,1.50651,1.50672,1.50562,1.50592,1563
2009.12.04,13:00,1.50590,1.50666,1.50583,1.50601,1504
2009.12.04,14:00,1.50600,1.50753,1.50599,1.50687,1625
2009.12.04,15:00,1.50685,1.50750,1.49268,1.49416,4033
2009.12.04,16:00,1.49412,1.49623,1.49104,1.49474,4791
2009.12.04,17:00,1.49470,1.49493,1.48854,1.48868,4399
2009.12.04,18:00,1.48866,1.49023,1.48684,1.48818,4189
2009.12.04,19:00,1.48815,1.48938,1.48762,1.48866,2800
2009.12.04,20:00,1.48865,1.48877,1.48310,1.48343,2818
2009.12.04,21:00,1.48344,1.48433,1.48198,1.48234,2679
2009.12.04,22:00,1.48233,1.48481,1.48228,1.48426,2144
2009.12.04,23:00,1.48423,1.48581,1.48423,1.48560,1389
Conclusion :
Si vous êtes un trader, stock ou forex, cela vous permettra de coder vos indicateurs en javascript
Codes Sources
A voir également
- Stock/forex candle chart using canvas api
- Api j2se ✓ - Forum Java
- Logiciel gestion de stock avec douchette - Forum PHP
- Librairie api - Forum C
- Vb.net chart ✓ - Forum VB.NET
- Api sms php - Forum PHP
15 janv. 2010 à 03:10
C'est un projet perso, codé pour mes besoins, et destiné à tourner sous Chrome, donc la compatibilité IE c'est pas un soucis.
highcharts est une lib interessante, je connaissait pas :) Par contre, ils ne gerent pas les Chandeliers japonnais, qui est essentiel pour ce genre d'application (chaque barre indique à la fois la valeur à l'ouverture, fermeture, plus haute et plus basse valeur)
J'ai appliqué l'astuce pour les array.length dans les boucles for, ça ne change pas grand chose dans ce cas, car le plus gros du temps de calcul viens des indicateurs. Mais c'est bon à savoir :)
Le but du projet est de pouvoir analyser le marché des devises via des indicateurs que je développe moi même. L'analyse permet de prendre des décisions: acheter, vendre, fermer une position, ou attendre une opportunité.
L'alternative est d'utiliser la plateforme de trading MT4, et de programmer les indicateurs en MQL (http://codebase.mql4.com/indicators), mais ce langage est tres basique et ne convient pas à certains indicateurs complexes que je souhaite développer. L'ideal serais de programmer tout ça en Java, C ou autre langage compilé, mais je ne suis pas assez bon pour ça, et étant donné que je n'ai pas besoin de calculs en temps reel, le javascript est une solution qui convient.
Pour les graph, j'ai aussi besoin d'options précises: Plusieurs indicateurs sur un meme graph, différentes options de scaling: scaling par courbe, par indicateur (certains indicateurs ont plusieurs courbes), scaling basé sur le graphique principal, ...
Le code posté n'est qu'un travail en progrès, et la version actuel est bien plus évoluée. Je posterai une update quand ce sera plus lisible (ajout des labels, ...)
15 janv. 2010 à 00:30
Je sais pas tros à quoi sert ton cript, n'étant pas un pro de la finance.
Est-ce que ton script pourrais s'adapter à d'autre données, enfin pour faire de simple graph?
Là y'a pas de légende, description c'est normale?
Ta classe jscandles n'exploite pas le prototype, qui est le modèle de classe en javascript, c'est là ou l'on définit les membres de la classe, sans, pas d'héritage, de plus ca ralentie l'instanciation (du moin si tu dois créer plusieurs instances).
Ta méthodes setData est inutile, pas d'encapsulation en js, pas besoin d'un setters juste pour initialiser une valeur.
Quand tu boucles sur un tableaux, n'utilises pas dans ta zone conditionnelle une comparaison sur la variable length du tableau , mais enregistre celle ci avant dans une variable, sans quoi a chaque itérations l'interpréteur recalculera la taille du tableau.
La fonction inverseArray est inutile, il existe la méthode Array, reverse pour ça.
Perso j'aurais utilisé une librairie comme excanvas pour générer le canvas (12 ko compilé), car ie il connait pas :(
Il existe une super librairie de graph http://highcharts.com/ jette un coup d'œil je suis sur que ca t'intéressera.
a++
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.