WEB画面上に、ローソク足と移動平均線の複合チャートを表示したい！
過去のチャートだったら、画面ハードコピーでもいいけれども、
それをリアルタイムに表示させようと思えば、それなりのツールが必要になる。
幸い、現在は、無料で高機能なチャートを表示できるツールが溢れていて、
サンプルのコードをコピーしながら作れば、何となく作れてしまうので、
それほど難しい技術は必要としない。
ということで、メジャーで、利用者も多く、ノウハウ情報も多く見つかる
「Google Chart」を使ってみたら、実に簡単に、実現することができた。
ところが、試しに、
日経平均株価の直近100日分のチャートを表示させてみたところ、
途中で ズレ と 切れ が発生して、表示が崩れてしまう。
オプションのパラメータをいろいろといじってみたが、分からない。
しかも、その切れた部分に該当する日のデータは、
飛んでいたり順番も違っていたりして、やっぱりおかしい。
結局、ローソク足が９本以内だったら、この影響は受けず、
１０本以上になると、何かがおかしくなる。
「Google Chart」以外にも、ローソク足が表示できるツールは
まだまだ他にもいくつかあるので、解決が難しければ、
他のツールを試してみようと思う。
この画面のチャートのソースコードは、次のとおり。
一体、何が、ダメなのだろう？
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<title>Chart</title>
</head>
<body>
<!— ローソク足及び移動平均線グラフを配置 —>
<div id=’chart’></div>
<!— ここでGoogle Chartの読み込み —>
<script type=”text/javascript” src=”https://www.gstatic.com/charts/loader.js”>
</script>
<script type=”text/javascript”>
google.charts.load(‘current’, {‘packages’:[‘corechart’]});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
//チャートに描画するためのデータを入れる
var chartData = new google.visualization.DataTable();
//日付用のString型を一つ、四本値と５本ＭＡ用の数値型を計９個作成
chartData.addColumn(‘string’);
for(var x = 0;x < 9; x++){
chartData.addColumn(‘number’);
}
//行数
var length = 100;
//描画用のデータを一時的に入れる
var insertingData = new Array(length);
//[安値,終値,始値,高値,5MA,20MA,60MA,100MA,300MA]
insertingData[000] = [‘2019/08/19’,20502,20563,20590,20633,20499,21061,21176,21361,21770]
insertingData[001] = [‘2019/08/20’,20582,20677,20605,20684,20544,21024,21169,21352,21764]
insertingData[002] = [‘2019/08/21’,20482,20618,20489,20626,20536,20974,21159,21342,21758]
insertingData[003] = [‘2019/08/22’,20584,20628,20706,20731,20581,20920,21149,21339,21753]
insertingData[004] = [‘2019/08/23’,20579,20710,20579,20719,20639,20868,21144,21331,21748]
insertingData[005] = [‘2019/08/26’,20173,20261,20325,20329,20579,20798,21133,21320,21742]
insertingData[006] = [‘2019/08/27’,20439,20456,20467,20529,20535,20740,21130,21314,21735]
insertingData[007] = [‘2019/08/28’,20433,20479,20474,20511,20507,20679,21131,21307,21728]
insertingData[008] = [‘2019/08/29’,20361,20460,20500,20520,20473,20626,21132,21297,21721]
insertingData[009] = [‘2019/08/30’,20633,20704,20641,20748,20472,20584,21131,21289,21714]
insertingData[010] = [‘2019/09/02’,20614,20620,20625,20667,20544,20560,21128,21278,21707]
insertingData[011] = [‘2019/09/03’,20578,20625,20581,20662,20578,20556,21124,21267,21700]
insertingData[012] = [‘2019/09/04’,20554,20649,20578,20694,20612,20559,21116,21255,21692]
insertingData[013] = [‘2019/09/05’,20787,21085,20800,21164,20737,20587,21114,21248,21686]
insertingData[014] = [‘2019/09/06’,21145,21199,21201,21241,20836,20618,21115,21242,21681]
insertingData[015] = [‘2019/09/09’,21182,21318,21214,21333,20975,20649,21120,21239,21676]
insertingData[016] = [‘2019/09/10’,21350,21392,21363,21438,21129,20696,21125,21236,21672]
insertingData[017] = [‘2019/09/11’,21437,21597,21466,21619,21318,20743,21133,21233,21669]
insertingData[018] = [‘2019/09/12’,21743,21759,21761,21825,21453,20811,21146,21229,21667]
insertingData[019] = [‘2019/09/13’,21820,21988,21907,22019,21611,20889,21157,21226,21664]
insertingData[020] = [‘2019/09/17’,21878,22001,21947,22041,21747,20961,21166,21224,21663]
insertingData[021] = [‘2019/09/18’,21942,21960,22014,22027,21861,21025,21177,21222,21661]
insertingData[022] = [‘2019/09/19’,22003,22044,22064,22255,21950,21097,21190,21221,21660]
insertingData[023] = [‘2019/09/20’,22047,22079,22130,22204,22014,21169,21205,21219,21660]
insertingData[024] = [‘2019/09/24’,22077,22098,22095,22168,22036,21239,21222,21218,21659]
insertingData[025] = [‘2019/09/25’,21906,22020,21961,22036,22040,21327,21233,21216,21658]
insertingData[026] = [‘2019/09/26’,21986,22048,22160,22184,22058,21406,21246,21213,21659]
insertingData[027] = [‘2019/09/27’,21733,21878,21934,21955,22025,21476,21248,21210,21659]
insertingData[028] = [‘2019/09/30’,21666,21755,21793,21811,21960,21541,21248,21208,21660]
insertingData[029] = [‘2019/10/01’,21811,21885,21831,21938,21917,21600,21252,21211,21661]
insertingData[030] = [‘2019/10/02’,21725,21778,21744,21795,21869,21658,21254,21214,21661]
insertingData[031] = [‘2019/10/03’,21277,21341,21422,21437,21727,21694,21247,21214,21658]
insertingData[032] = [‘2019/10/04’,21276,21410,21316,21410,21634,21732,21245,21217,21656]
insertingData[033] = [‘2019/10/07’,21328,21375,21445,21475,21558,21746,21242,21220,21654]
insertingData[034] = [‘2019/10/08’,21483,21587,21494,21629,21498,21766,21243,21224,21652]
insertingData[035] = [‘2019/10/09’,21359,21456,21359,21467,21434,21773,21239,21228,21648]
insertingData[036] = [‘2019/10/10’,21308,21551,21456,21601,21476,21780,21237,21231,21644]
insertingData[037] = [‘2019/10/11’,21658,21798,21749,21820,21553,21791,21242,21236,21641]
insertingData[038] = [‘2019/10/15’,22049,22207,22063,22219,21720,21813,21254,21245,21639]
insertingData[039] = [‘2019/10/16’,22434,22472,22479,22615,21897,21837,21278,21257,21638]
insertingData[040] = [‘2019/10/17’,22424,22451,22451,22522,22096,21860,21294,21270,21638]
insertingData[041] = [‘2019/10/18’,22466,22492,22528,22649,22284,21886,21312,21284,21638]
insertingData[042] = [‘2019/10/21’,22515,22548,22541,22581,22434,21911,21327,21297,21638]
insertingData[043] = [‘2019/10/23’,22457,22625,22619,22648,22518,21939,21343,21311,21638]
insertingData[044] = [‘2019/10/24’,22704,22750,22725,22780,22573,21971,21359,21328,21638]
insertingData[045] = [‘2019/10/25’,22715,22799,22753,22819,22643,22010,21378,21347,21639]
insertingData[046] = [‘2019/10/28’,22830,22867,22854,22896,22718,22051,21399,21370,21640]
insertingData[047] = [‘2019/10/29’,22935,22974,22950,23008,22803,22106,21420,21395,21641]
insertingData[048] = [‘2019/10/30’,22827,22843,22953,22961,22847,22160,21442,21420,21642]
insertingData[049] = [‘2019/10/31’,22875,22927,22910,22988,22882,22213,21465,21441,21643]
insertingData[050] = [‘2019/11/01’,22705,22850,22730,22852,22892,22266,21495,21462,21645]
insertingData[051] = [‘2019/11/05’,23090,23251,23118,23328,22969,22362,21537,21486,21647]
insertingData[052] = [‘2019/11/06’,23246,23303,23343,23352,23035,22456,21582,21507,21649]
insertingData[053] = [‘2019/11/07’,23253,23330,23283,23336,23132,22554,21629,21529,21651]
insertingData[054] = [‘2019/11/08’,23313,23391,23550,23591,23225,22644,21676,21551,21655]
insertingData[055] = [‘2019/11/11’,23323,23331,23422,23471,23321,22738,21720,21574,21660]
insertingData[056] = [‘2019/11/12’,23312,23520,23336,23545,23375,22836,21771,21598,21664]
insertingData[057] = [‘2019/11/13’,23270,23319,23439,23452,23378,22912,21815,21620,21667]
insertingData[058] = [‘2019/11/14’,23062,23141,23325,23360,23340,22959,21861,21642,21671]
insertingData[059] = [‘2019/11/15’,23121,23303,23160,23340,23323,23001,21909,21662,21674]
insertingData[060] = [‘2019/11/18’,23271,23416,23304,23420,23340,23049,21957,21681,21678]
insertingData[061] = [‘2019/11/19’,23244,23292,23366,23389,23294,23089,22000,21701,21682]
insertingData[062] = [‘2019/11/20’,23086,23148,23176,23303,23260,23119,22042,21720,21684]
insertingData[063] = [‘2019/11/21’,22726,23038,23071,23108,23239,23140,22083,21738,21686]
insertingData[064] = [‘2019/11/22’,23030,23112,23030,23219,23201,23158,22123,21759,21688]
insertingData[065] = [‘2019/11/25’,23255,23292,23292,23347,23176,23182,22173,21778,21690]
insertingData[066] = [‘2019/11/26’,23350,23373,23451,23608,23193,23208,22222,21799,21692]
insertingData[067] = [‘2019/11/27’,23418,23437,23452,23507,23250,23231,22271,21816,21693]
insertingData[068] = [‘2019/11/28’,23367,23409,23458,23482,23325,23259,22320,21833,21695]
insertingData[069] = [‘2019/11/29’,23273,23293,23497,23498,23361,23277,22363,21849,21697]
insertingData[070] = [‘2019/12/02’,23378,23529,23388,23562,23408,23311,22412,21868,21699]
insertingData[071] = [‘2019/12/03’,23186,23379,23231,23388,23409,23318,22458,21884,21702]
insertingData[072] = [‘2019/12/04’,23044,23135,23186,23203,23349,23309,22499,21900,21704]
insertingData[073] = [‘2019/12/05’,23259,23300,23292,23363,23327,23308,22536,21917,21706]
insertingData[074] = [‘2019/12/06’,23338,23354,23347,23412,23339,23306,22572,21936,21710]
insertingData[075] = [‘2019/12/09’,23360,23430,23544,23544,23320,23311,22607,21953,21713]
insertingData[076] = [‘2019/12/10’,23336,23410,23372,23449,23326,23306,22641,21971,21716]
insertingData[077] = [‘2019/12/11’,23333,23391,23421,23438,23377,23309,22671,21989,21718]
insertingData[078] = [‘2019/12/12’,23360,23424,23449,23468,23402,23323,22698,22009,21720]
insertingData[079] = [‘2019/12/13’,23775,24023,23810,24050,23536,23359,22732,22039,21724]
insertingData[080] = [‘2019/12/16’,23950,23952,23955,24036,23640,23386,22765,22063,21725]
insertingData[081] = [‘2019/12/17’,23996,24066,24091,24091,23771,23425,22800,22090,21727]
insertingData[082] = [‘2019/12/18’,23919,23934,24023,24046,23880,23464,22831,22113,21727]
insertingData[083] = [‘2019/12/19’,23835,23864,23911,23945,23968,23505,22861,22135,21727]
insertingData[084] = [‘2019/12/20’,23746,23816,23893,23908,23926,23541,22890,22155,21727]
insertingData[085] = [‘2019/12/23’,23810,23821,23921,23923,23900,23567,22920,22177,21726]
insertingData[086] = [‘2019/12/24’,23796,23830,23839,23853,23853,23590,22950,22199,21726]
insertingData[087] = [‘2019/12/25’,23782,23782,23813,23824,23823,23607,22981,22220,21725]
insertingData[088] = [‘2019/12/26’,23775,23924,23787,23931,23835,23633,23017,22244,21724]
insertingData[089] = [‘2019/12/27’,23837,23837,23953,23967,23839,23660,23050,22267,21723]
insertingData[090] = [‘2019/12/30’,23656,23656,23770,23782,23806,23666,23081,22292,21721]
insertingData[091] = [‘2020/01/06’,23148,23204,23319,23365,23681,23658,23112,22317,21719]
insertingData[092] = [‘2020/01/07’,23299,23575,23320,23577,23639,23680,23148,22347,21718]
insertingData[093] = [‘2020/01/08’,22951,23204,23217,23303,23495,23675,23179,22374,21717]
insertingData[094] = [‘2020/01/09’,23506,23739,23530,23767,23476,23694,23215,22406,21718]
insertingData[095] = [‘2020/01/10’,23761,23850,23813,23903,23514,23715,23255,22437,21722]
insertingData[096] = [‘2020/01/14’,23951,24025,23969,24059,23679,23746,23296,22473,21727]
insertingData[097] = [‘2020/01/15’,23875,23916,23923,23997,23747,23772,23331,22505,21732]
insertingData[098] = [‘2020/01/16’,23905,23933,23960,23975,23893,23798,23360,22541,21737]
insertingData[099] = [‘2020/01/17’,24013,24041,24103,24115,23953,23798,23386,22577,21741]
//チャート描画用の配列の中に、insertingDataの値を入れ込む
for (var i = length; i > 0; i–){
chartData.addRow(insertingData[i]);
}
//チャートの見た目に関する記述、詳細は公式ドキュメントをご覧になってください
var options = {
chartArea:{left:80,top:0,right:0,bottom:0},
legend: { position: ‘none’},
backgroundColor: ‘white’,
colors: [‘black’],
hAxis: {
format: ‘yyyy/MM/dd’,
direction: -1,
viewWindowMode: ‘maximized’,
},
bar: {
groupWidth: ‘90%’
},
width: 1920,
height: 1920,
lineWidth: 2,
//チャートのタイプとして、ローソク足を指定
seriesType: “candlesticks”,
//ローソク足だでなく、線グラフも表示することを記述
series: {
1:{
type: “line”,
color: ‘red’,
},
2:{
type: “line”,
color: ‘green’,
},
3:{
type: “line”,
color: ‘blue’,
},
4:{
type: “line”,
color: ‘purple’,
},
5:{
type: “line”,
color: ‘orange’,
},
}
};
//描画の処理
var chart = new google.visualization.ComboChart(document.getElementById(‘chart’));
chart.draw(chartData, options);
}
</script>
</body>
</html>