Google Chart APIからチャートを構築するためのライブラリ

Евгений | 6 10月, 2015

はじめに

Google Chartにより11種の異なるタイプのチャートが作成できるようになりました。それは以下のようなものです。

1. 折れ線グラフ
2. バーチャート
3. 散布図
4. レーダーチャート
5. ろうそく足チャート
6. ベン図
7. QR コード
8. 地図チャート
9. 公式
10. グラフ図
11. 円グラフ

本稿で述べているようにかなり十分な作業のセット（すべてすぐに使えるグラフを取得するために必要なものです。）が特別にアセンブリーされたクエリーをGoogleサーバーに送信します。これを行う方法の簡単な例が記事『 標準ライブラリクラスとGoogle Chart APIによる情報ボードの作成』にありますが、それはこのサービスが提供する内容の10分の1にもおよびません。当然、適切に依頼を作成するためには、その構造とキーワードを分析する必要があります。そのため、本稿ではクラスライブラリを作成していきます。それを使用することで、ユーザーはすばやくお望みのグラフを作成し、チャートに配置することができます。また、チャートの構成に基づき動的にデータを更新することができます。

本稿にはライブラリコードの大量の計算は含まれていませんが、その代りDoxygen（詳細は、『MQL5コード用自動生成ドキュメンテーション』記事にあります。）を使用して作成された添付の証明書があります。そこでライブラリクラスのパブリックメソッドに関する記述と列挙とチャート作成プロセスに生じる例外に関するドキュメンテーションを見つけることができます。

1. チャートの取得と表示方法の記述

最後から始めていきます。依頼を問題なく作成したと仮定します。そうするとその依頼をサーバーに送信、回答をファイルに記録、チャートに表示するためグラフの図形オブジェクトにファイルを添付する必要があります。インターネットで作業するには、『 インターネットを介する端末間データ交換のためのWinInet.dllの使用 』記事にある関数を使用します。

が、そこには小さな落とし穴があります。画像（写真とグラフィックタグ）表示のために設計されているコンポーネントはBMP形式の画像にしか機能しないことです。 一方、Google ChartはPNG またはGIFだけを返します。ゆえに、画像は変換する必要があります。これはConvert_PNG ()関数によって行われます。チャート取得の関数コードは以下のようなものです。

bool CDiagram::GetChart()
{
   if(!ObjExist()) {SetUserError(DIAGRAM_ERR_OBJ_NOT_EXIST); return false;}
   string request=CreateRequest();
   //Print(request);
   if(StringLen(request)>2048) {SetUserError(DIAGRAM_ERR_TOO_LARGE_REQUEST); return false;}
   //try to establish a connection
   int rv=InternetAttemptConnect(0);
   if(rv!=0) {SetUserError(DIAGRAM_ERR_INTERNET_CONNECT_FAILED); return false;}
   //initialize the structures
   int hInternetSession=InternetOpenW("Microsoft Internet Explorer", 0, "", "", 0);
   if(hInternetSession<=0) {SetUserError(DIAGRAM_ERR_INTERNET_CONNECT_FAILED); return false;}
   //send request
   int hURL=InternetOpenUrlW(hInternetSession, request, "", 0, 0, 0);
   if(hURL<=0) SetUserError(DIAGRAM_ERR_INTERNET_CONNECT_FAILED);
   //prepare the paths for conversion 
   CString src;
   src.Assign(TerminalInfoString(TERMINAL_PATH));
   src.Append("\MQL5\Files\\"+name+".png");
   src.Replace("\\","\\\\");
   CString dst;
   dst.Assign(TerminalInfoString(TERMINAL_PATH));
   dst.Append("\MQL5\Images\\"+name+".bmp");
   dst.Replace("\\","\\\\");
   DeleteFileW(dst.Str());
   DeleteFileW(src.Str());
   CFileBin chart_file;//file into which the results are recorded
                       //create it
   chart_file.Open(name+".png",FILE_BIN|FILE_WRITE);
   //****************************   
   int dwBytesRead[1];// number of recorded documents
   char readed[1000];//the actual data
                    //read the data, received from the server after the request
   while(InternetReadFile(hURL,readed,1000,dwBytesRead))
     {
      if(dwBytesRead[0]<=0) break;//no data - exit
      chart_file.WriteCharArray(readed,0,dwBytesRead[0]);//record the data into the file
     }
   InternetCloseHandle(hInternetSession);//terminate the connection
   chart_file.Close();//and file
   //convert the file
   if(!Convert_PNG(src.Str(), dst.Str())) SetUserError(DIAGRAM_ERR_IMAGE_CONVERSION_FAILED);
   //attach the file to the graphic object
   switch (obj_type)
   {
      case OBJ_BITMAP: 
      {
         ObjectSetString(chart_ID, name, OBJPROP_BMPFILE, name+".bmp"); 
         return true;
      }
      case OBJ_BITMAP_LABEL:
      {
         ObjectSetString(chart_ID, name, OBJPROP_BMPFILE, 0, name+".bmp"); 
         ObjectSetString(chart_ID, name, OBJPROP_BMPFILE, 1, name+".bmp"); 
         return true;
      }
      default: return false;
   }
   //redraw the chart   
   ChartRedraw();
}

Google Chartsライブラリを作成するあいだ、 標準ライブラリ

クラスの拡張用法を知る価値はあります。それには私は開発者に特にお礼を述べたいと思っています。

2. Google Chartsライブラリのコンポーネントの概観

サーバーへの依頼は次のように始めます。： http://chart.apis.google.com/chart?cht = さらにグラフタイプを指定し、その他のパラメータもすべて指定する必要があります。ヘッダに加え、依頼はコマンドとパラメータで構成されています。コマンドは "&" 記号で区切ります。たとえば、コマンド & Chtt = Title は『タイトル』という語をチャートのヘッダに設定します。

できましたね。

2.1折れ線グラフ

折れ線グラフは最もよく利用されるグラフです。これには多くのプロパティがあります。グラフの作成はCLineXYChart クラスによって行われます。例

CLineXYChart chart;
chart.Attach(0, "test diagram");
chart.SetSize(200,200);
double Y[10]={-50, -40, -25, -35, 10, 50, 70, 40, 15, 80};
chart.AddLine(Y, Red, 0, "Test line");
chart.GetChart();

結果 『テストダイアグラム』の名前がついたコンポーネントで以下の画像を見ます。

図1　折れ線グラフのシンプルな作成例

クラスメソッドの証明書は添付の証明書の中にあることを思い出してください。ここではその使用例があります。

別の軸とグリッドの線を加えてグラフを複雑化します。

//create a copy of the class
CLineXYChart chart;
//attach it to the object constructed earlier
chart.Attach(0, "test diagram");
//set the size
chart.SetSize(200,200);
//prepare the data
double Y2[10]={-70, -5, 6, 8, 10, 20, 100, 130, 90, 60};
double Y[10]={-50, -40, -25, -35, 10, 50, 70, 40, 15, 80};
//add lines
chart.AddLine(Y, Red, 0, "Test line");
chart.AddLine(Y2, Blue, 0, "Test line 2");
//axis
chart.SetAxis(DIAGRAM_AXIS_BOTTOM|DIAGRAM_AXIS_LEFT, -1, 0, 0, 10, 0);
//and grid
chart.SetGrid();
//obtain the chart
chart.GetChart();

グラフは下図と同じように見えます。ひとつ重要な機能を知る価値があります。GetChart ()メソッドはその他のメソッドの 後に 呼ばれる必要があります。というのはそれはグラフを受け取るメソッドだからです。

図2　より複雑な折れ線グラフの例

まだまだあります。マーカー、タイトル、凡例を加え、グラフ領域に色を追加します。

//create a class copy
CLineXYChart chart;
//attach it to the object created earlier
chart.Attach(0, "test diagram");
//set the size
chart.SetSize(500,300);
//prepare the data
double Y2[10]={-70, -5, 6, 8, 10, 20, 100, 130, 90, 60};
double Y[10]={-50, -40, -25, -35, 10, 50, 70, 40, 15, 80};
//add lines
int first_line=chart.AddLine(Y, Red, 0, "Test line");
int second_line=chart.AddLine(Y2, Blue, 0, "Test line 2");
//axis
chart.SetAxis(DIAGRAM_AXIS_BOTTOM|DIAGRAM_AXIS_LEFT, -1, 0, 0, 10, 0);
//grid
chart.SetGrid();
//legend
chart.ShowLegend();
//title
chart.SetTitle("My Chart", Green, 15);
//filling
chart.SetFill(Linen);
//markers
chart.SetLineMarker(first_line, DIAGRAM_LINE_MARKERS_DIAMOND, BlueViolet, 10);
chart.SetLineMarker(second_line, DIAGRAM_LINE_MARKERS_CROSS, YellowGreen, 15);
//obtain the chart
chart.GetChart();

特別な線に特化したプロパティをコンフィギュレーションするには、識別子 (first_lineおよびsecond_line)を使います。それはその後適切なメソッドに転送されます。

図3　さらに b 複雑な折れ線グラフの例

まだこれで終わりではありません。線にタグをつけたり、線の下や線の間の領域に色をつけたり、線にメモリをうったり、短軸に線を足したりすることもできます。

//create a class copy
CLineXYChart chart;
//attach it to the object created earlier
chart.Attach(0, "test diagram");
//set the size
chart.SetSize(700,400);
//prepare the data
double Y3[10]={1000, 1200, 1800, 1700, 1300, 900, 700, 750, 800, 600};
double X3[10]={2, 4, 5, 6, 10, 15, 17, 20, 21, 23};
double Y2[10]={-70, -5, 6, 8, 10, 20, 100, 130, 90, 60};
double Y[10]={-50, -40, -25, -35, 10, 50, 70, 40, 15, 80};
//add lines
int first_line=chart.AddLine(Y, Red, 0, "Test line");
int second_line=chart.AddLine(Y2, Blue, 0, "Test line 2");
int third_line=chart.AddLine(Y3, X3, Green, 0, "Test line 3");
//major axis
chart.SetAxis(DIAGRAM_AXIS_BOTTOM|DIAGRAM_AXIS_LEFT, -1, 0, 0, 10, 0);
//minor axis 
chart.SetAxis(DIAGRAM_AXIS_RIGHT|DIAGRAM_AXIS_TOP, third_line, 0, Red, 15, 2);
//grid
chart.SetGrid();
//legend
chart.ShowLegend(DIAGRAM_LEGEND_POSITION_BOTTOM_HORIZONTAL);
//title
chart.SetTitle("My Chart", Green, 15);
//filling in the chart
chart.SetFill(Linen, Silver);
//markers
chart.SetLineMarker(first_line, DIAGRAM_LINE_MARKERS_DIAMOND, BlueViolet, 10);
chart.SetLineMarker(second_line, DIAGRAM_LINE_MARKERS_CROSS, YellowGreen, 15);
//set the filling between the two lines
chart.SetLineFilling(first_line, Lime , second_line);
//add tags
chart.AddLabel(first_line, DIAGRAM_LABEL_TYPE_FLAG, 5, "Flag", Red, 15); 
chart.AddLabel(second_line, DIAGRAM_LABELS_TYPE_ANNOTATION, 3, "annotation", Blue, 25);
//slightly compress the lines (by 20%)
chart.SetLineScaling(second_line, false, 20);
//attach the third line to the minor axis
chart.SetLineScaling(third_line, true, 20);
//obtain the chart
chart.GetChart();

図4　折れ線グラフの全機能

チャートのデータを動的に更新したい場合は、 SetLineData ()メソッドを使用するか、DeleteLine ()を使って古いデータの線をすべて削除し、新しい線を作ります。ただし、最初の手法が好ましいと思います。

2.2バーチャート

棒グラフとも言います。バーチャート作成にはCBarChartクラスを使います。 これはマーカーがない点で X 軸にデータセットを指定する必要のあるCLineXYChartと異なります。 そしてわずかな機能があり、それはこのタイプのグラフに特有のものです。それ以外は CLineXYChartと同じです。

例

CBarChart chart;
chart.Attach(0, "test diagram");
//set the size
chart.SetSize(700,400);
//prepare the data
double Y3[10]={100, 120, 18, 17, 13, 9, 70, 75, 80, 60};
double Y2[10]={70, 5, 6, 8, 10, 20, 100, 130, 90, 60};
double Y[10]={50, 40, 25, 35, 10, 50, 70, 40, 15, 80};
//add lines
int first_line=chart.AddLine(Y, Red, 0, "Test bar 1");
int second_line=chart.AddLine(Y2, Blue, 0, "Test bar 2");
int third_line=chart.AddLine(Y3, Green, 0, "Test bar 3");
//major axis
chart.SetAxis(DIAGRAM_AXIS_BOTTOM|DIAGRAM_AXIS_LEFT, -1, 0, 0, 10, 0);
//grid
chart.SetGrid();
//legend
chart.ShowLegend();
//title
chart.SetTitle("My Chart", Green, 15);
//chart filling
chart.SetFill(Linen, Silver);
//obtain the chart
chart.GetChart(); 

図5　バーチャート例

ここには3つのデータセットがあり、バーは順番にそれぞれの上に積み上げられており、最適な表示となっていることを了解ください。ただし、カラムをグループ化する別の方法もあります。SetGrouped ()メソッドを使って設定されるものです。

 / / Set the grouping  chart.SetGrouped (true);

図6　カラムの異なるグループ化によるバーチャート例

ご覧のように、ここではカラムは積み上っていません。作成順に並んでいます。

2.3円グラフ

CPieChart クラスにより円グラフを作成します。二次元、三次元グラフが作成可能です。

CPieChart chart;
chart.Attach(0, "test diagram");
//set the size
chart.SetSize(300,200);
//add sections
chart.AddPieSlice(10, 0, Red, 0, "Test slice 1");
chart.AddPieSlice(20, 0, Green, 0, "Test slice 2");
chart.AddPieSlice(30, 0, Blue, 0, "Test slice 3");
//legends
chart.ShowLegend();
//title
chart.SetTitle("My Chart", Green, 15);
//display mode - 2D
chart.SetPieType(true);
//obtain the chart
chart.GetChart(); 

図7　2Dおよび3Dの円グラフ例

SetPieType ()メソッドを呼ぶことで表示タイプ(2D または 3D)を設定します。その他便利な機能は複数リングを設定する機能ですが、今回は2Dモードのみとします。二番目の円を設定するには、AddPieSlice ()メソッドのディメンションパラメータをゼロ以外で指定します。

//add the second ring
chart.AddPieSlice(50, 1, YellowGreen, 0, "Test ring 1");
chart.AddPieSlice(20, 1, Magenta, 0, "Test ring 2");
chart.AddPieSlice(70, 1, Maroon, 0, "Test ring 3");

図8　同心円グラフ

上記のグラブもリモートセクタータグを含んでいることにご注意ください。SetPieLabels ()メソッドによって設定され、凡例を置き換えることができます。ただし、ひとつデメリットがあります。タグサイズがグラフサイズに併せて自動調整されず、境界線を越えてグラフ外に出てしまうことがあります。そのような場合には、グラフの幅を広げる必要があります。グリッド、軸、マーカー、スケールはこのグラフタイプにはありません。セクターはDeleteLine ()メソッドにより削除できます。

2.4レーダーチャート

CRadarChartクラスが レーダーチャートを作成します。CLineXYChartクラスと変わるところはくありません。すべてのメソッドがCRadarChartで使用可能です。

CRadarChart chart;
chart.Attach(0, "test diagram");
//set the size
chart.SetSize(300,300);
//add lines
double Y3[10]={100, 120, 18, 17, 13, 9, 70, 75, 80, 60};
double Y2[10]={70, 5, 6, 8, 10, 20, 100, 130, 90, 60};
double Y[10]={50, 40, 25, 35, 10, 50, 70, 40, 15, 80};
int first_line=chart.AddLine(Y, Red, 0, "Test line");
int second_line=chart.AddLine(Y2, Blue, 0, "Test line 2");
int third_line=chart.AddLine(Y3, Green, 0, "Test line 3");
//set the filling between the two lines
chart.SetLineFilling(first_line, Lime , second_line);
//markers
chart.SetLineMarker(first_line, DIAGRAM_LINE_MARKERS_CIRCLE, BlueViolet, 10);
chart.SetLineMarker(second_line, DIAGRAM_LINE_MARKERS_DIAMOND, YellowGreen, 15);
//title
chart.SetTitle("My Chart", Green, 15);
//grid
chart.SetGrid();
//legend
chart.ShowLegend(DIAGRAM_LEGEND_POSITION_BOTTOM_HORIZONTAL);
//obtain the chart
chart.GetChart();

図9　レーダーチャート

2.5ろうそく足チャート

CCandleChartクラスによりろうそく足チャートを作成します。ろうそく足は AddCandles ()メソッドにより追加されます。

CCandleChart chart;
chart.Attach(0, "test diagram");
//set the size
chart.SetSize(300,300);
//add 10 candlesticks to the current chart
double Open[10], Close[10], High[10], Low[10];
CopyOpen(Symbol(), PERIOD_CURRENT, 0, 10, Open);
CopyClose(Symbol(), PERIOD_CURRENT, 0, 10, Close);
CopyHigh(Symbol(), PERIOD_CURRENT, 0, 10, High);
CopyLow(Symbol(), PERIOD_CURRENT, 0, 10, Low);
chart.AddCandles(Open, Close, High, Low);
//title
chart.SetTitle(Symbol(), Green, 15);
//grid
chart.SetGrid();
//major axis
chart.SetAxis(DIAGRAM_AXIS_LEFT, -1, 0, 0, 10, 4);
//obtain the chart
chart.GetChart();

図10　ろうそく足チャート

マーカー、凡例、ラベルはこのタイプのグラフにはありません。

2.6公式

CFormulaChartクラスにより公式の作成ができます。TeX言語により公式は線の形式でSetFormulaString ()メソッドに渡されます。

CFormulaChart chart;
chart.Attach(0, "test diagram");
//set the size
chart.SetSize(300,75);
//add the formula
chart.SetFormulaString("x=-b\pm\sqrt{b^2-4ac}\over(2a)");
//its color
chart.SetFormulaColor(Blue);
//title
chart.GetChart();

図11　公式

塗りつぶしもSetFill () メソッドにより設定できます。それ以外の機能はサポートされていません。

2.7グラフ図

CGraphChart クラスによりグラフが作成されます。AddNode ()メソッドおよびAddEdge () メソッドがグラフにノードとエッジを加えます。

CGraphChart chart;
chart.Attach(0, "test diagram");
//set the size
chart.SetSize(300,220);
//add nodes and edges
int A=chart.AddNode("A");
int B=chart.AddNode("B");
int C=chart.AddNode("C");
int D=chart.AddNode("D");
chart.AddEdge(A,B);
chart.AddEdge(B,C);
chart.AddEdge(C,D);
chart.AddEdge(A,C);
//set the engine
chart.SetEngine(DIAGRAM_GRAPH_ENGINE_NEATO);
//and arrows
chart.SetGraphType(false);
//title
chart.GetChart();

図11　グラフ図

SetEngine () メソッドがグラフ作成に使用されるグラフエンジンの特定タイプを設定します。みなさんはご自身でお試しください。DeleteNode () メソッドおよびDeleteEdge ()メソッドはグラフからノードとエッジを削除します。

2.8ベン図

CVennChart クラスがベン図を作成します。

SetCircleSizes () メソッドがセットのサイズを、SetCircleColors ()メソッドがセット色を, their color, SetVennLegend ()メソッドがサインを、 SetIntersections () メソッドが交点の面積を決定します。

CVennChart chart;
chart.Attach(0, "test diagram");
//set the size
chart.SetSize(300,220);
//add sets(set their sizes)
chart.SetCircleSizes(100, 90, 80);
//color
chart.SetCircleColors(Yellow, Lime, Maroon);
//signatures
chart.SetVennLegend("EURUSD", "USDJPY", "EURJPY");
//dimensions of intersections
chart.SetIntersections(30,30,30,10);
//legend
chart.ShowLegend();
//title
chart.SetTitle("Venn", Green, 15);
//title
chart.GetChart();

図11　ベン図

2.9QR コード

CQRCodeクラスによりQRコードの作成ができます。

CQRCode chart;
chart.Attach(0, "test diagram");
//set the size
chart.SetSize(300,220);
//add data
chart.SetData("test data");
//set the level of error correction during coding
chart.SetErrCorrection(DIAGRAM_QRCODE_ERROR_CORRECTION_LOW);
//and the coding
chart.SetEncoding(DIAGRAM_QRCODE_ENCODING_UTF_8);
//title
chart.GetChart();

図11　 QR-code

SetData () メソッドがコードが作成される元のデータを設定します。SetErrCorrection () メソッドおよびSetEncoding ()メソッドは コーディング中のエラー修正 とコーディングを設定します。

2.10地図チャート

CMapChart クラスが世界地図、または大陸地図を作成します。必要な国の選択も可能です。

CMapChart chart;
chart.Attach(0, "test diagram");
//set the size
chart.SetSize(440,220);
//set the region
chart.SetZoomArea(DIAGRAM_MAP_AREA_AFRICA);
//and the country
chart.SetCountries("DZEGMGAOBWNGCFKECGCVSNDJTZGHMZZM");
//color
chart.SetColors(White, Red, Blue);
//color of the ocean - blue (2nd parameter)
chart.SetFill(Gray, Blue);
//title
chart.GetChart();

図11　 アフリカ地図

必要な国のコードは ISO 3166-1-alpha-2形式でSetCountries () メソッドに発信されます。SetZoomArea() は地図の大陸を設定し、SetColors() は国の色を設定します。

2.11散布図

CScatterChartクラスが 散布図を作成します。CLineXYChartとの唯一の違いはデータが指定される方法です。

ここでは、データを指定するためにAddLineScatter ()メソッドを使います。そこでは点の座標とそのディメンションが送信されます。

//create a class copy
CScatterChart chart;
//attach it to the object created earlier
chart.Attach(0, "test diagram");
//set the size
chart.SetSize(300,300);
//prepare the data
double Y2[10]={70, 5, 6, 8, 10, 20, 100, 130, 90, 60};
double X2[10]={1, 2, 3, 4, 5, 6, 7, 8, 9, 10};
double Z2[10]={90, 80, 75, 90, 10, 700, 80, 90, 90, 88};
double Y[10]={50, 40, 25, 35, 10, 50, 70, 40, 105, 80};
double X[10]={1, 2, 3, 4, 5, 6, 7, 8, 9, 10};
double Z[10]={60, 90, 90, 80, 70, 90, 73, 80, 77, 100};
//add the scatters
int first_line=chart.AddLineScatter(Y, X, Z, Red, 0, "scatters 1");
int second_line=chart.AddLineScatter(Y2, X2, Z2, Blue, 0, "scatters 2");
//major axis
chart.SetAxis(DIAGRAM_AXIS_BOTTOM|DIAGRAM_AXIS_LEFT, -1, 0, 0, 10, 0);
//grid
chart.SetGrid();
//legend
chart.ShowLegend(DIAGRAM_LEGEND_POSITION_BOTTOM_HORIZONTAL);
//title
chart.SetTitle("My Chart", Green, 15);
//filling the chart
chart.SetFill(Linen, Silver);
//obtain the chart
chart.GetChart();

図11　 Scatter chart

おわりに

読者のみなさん、このライブラリがみなさんのトレーダーとしての困難な生活を和らげることを希望しています。IOOPを使用することで大規模プロジェクトを劇的に簡素化し、より柔軟でユーザーが使いやすいものになることを付け加えたいと思います。

ご成功をお祈りしています。

添付資料

№	ファイル名	説明
1	google_charts.mqh	ライブラリ：保存場所 MQL5 \\ Include
2	google_charts_test.mq5	検証スクリプト：保存場所 MQL5 \\ Script
3	google_charts_help.zip	ライブラリクラスへのDoxygen生成ドキュメンテーションのアーカイブ
4	Libraries.zip	ライブラリとソースコードのアーカイブ。以下にてアンパックMQL5\\Libraries (C++ Builderでかかれたライブラリ)