tradingviewのチャートウィジェットを使って複数チャートを作成する

チャートを使っていると複数のチャートを同時に表示したマルチプルチャートを使いたいと思うことが多い。

しかし、その機能のあるinvesting.comは重いし、tradingviewの無料版では複数チャートの同時表示ができないといった問題がある。

そこで、tradingviewが無料で提供しているチャートウィジェットとHTMLを使って複数チャート(マルチプルチャート)を自作しようと思う。

ウィジェットの取得場所

tradingviewの提供しているチャートウィジェットはこちらから取得する。(ここでは英語版を使用)

リンク先で好みの指定で取得するチャートの設定を行う。
下記のスクリーンショットが設定画面。ここでWidthとHeightはAutosizeにして埋め込みコードを作っておく。


HTMLファイルの作成

上の方法で取得した埋め込みコードを埋め込むHTMLファイルを作成する。
下のHTMLファイルの<!–TradingView Widget BEGIN –>から<!– TradingView Widget END –>のところに埋め込みコードをいれる。この例だと2行3列の複数チャートが出来上がる。

コードを埋め込む際には、埋め込みコードの”autosize”:”true”,となっている部分を、
“width”:”auto”,”height”:”hoge(任意のサイズ)”に書き換えることをおすすめする。
(こうしないと非常に小さなチャートが表示されてしまう)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  
  <title>Forex Charts</title>
  <style>
   body{ background-color: black;}
   .block-columns{width:100%;}
   .block-column{float:left;
                 width:33%;}
  </style>

 </head>

 <body>
  <div class="block-columns">
   <div class="block-column">
    <!-- TradingView Widget BEGIN -->
    <!-- TradingView Widget END -->
    <!-- TradingView Widget BEGIN -->
    <!-- TradingView Widget END -->
   </div>
   
   <div class="block-column">
    <!-- TradingView Widget BEGIN -->
    <!-- TradingView Widget END -->
    <!-- TradingView Widget BEGIN -->
    <!-- TradingView Widget END -->
   </div>

   <div class="block-column">
    <!-- TradingView Widget BEGIN -->
    <!-- TradingView Widget END -->
    <!-- TradingView Widget BEGIN -->
    <!-- TradingView Widget END -->
   </div>
  </div>
 </body>
</html>

上記に為替データの埋め込みコードを入力してHTMLファイルを作成し、ブラウザ上で開くとこのようになる。
(実際のHTMLファイルはこちら)

きれいに表示され、非常にみやすい。また、自分の好きなチャートを組み合わせて、オリジナルの複数チャートを作成することができるため、一度作れば、活用できることは間違いないだろう。