Библиотека для построения диаграмм средствами Google Chart API
9 367
4
Введение
Google Chart позволяет строить 11 типов различных диаграмм. Вот они:
- Линейный график
- Гистограмма
- Пузырьковый график
- Лепестковая диаграмма
- Японские свечи
- Диаграмма Венна
- QR-код
- Карта
- Формула
- Граф
- Круговая диаграмма
Вполне нормальный набор для работы. Как было сказано в описании статьи - всё, что необходимо для получения готовой диаграммы - это отправить специально собранный запрос на сервер Google. Простой пример того, как это сделать, был реализован в статье Создание информационных табло с использованием классов из Стандартной библиотеки и Google Chart API, но это даже не десятая часть того, на что способен этот сервис. Естественно, для того, чтобы правильно собрать запрос нужно изучить его структуру, ключевые слова, поэтому в статье будет произведена попытка создания библиотеки классов, используя которые, пользователь сможет быстро создать необходимую ему диаграмму и разместить её на графике, а также динамически обновлять данные, на основе которых была построена диаграмма.
Сразу уточню, что массивных выкладок кода библиотеки в статье не будет, вместо этого будет приложена справка, созданная с помощью 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;} //попытаемся создать подключение int rv=InternetAttemptConnect(0); if(rv!=0) {SetUserError(DIAGRAM_ERR_INTERNET_CONNECT_FAILED); return false;} //инициализируем структуры int hInternetSession=InternetOpenW("Microsoft Internet Explorer", 0, "", "", 0); if(hInternetSession<=0) {SetUserError(DIAGRAM_ERR_INTERNET_CONNECT_FAILED); return false;} //отправим запрос int hURL=InternetOpenUrlW(hInternetSession, request, "", 0, 0, 0); if(hURL<=0) SetUserError(DIAGRAM_ERR_INTERNET_CONNECT_FAILED); //подготовим пути для конвертера 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;//файл, куда считаем результат //создадим его chart_file.Open(name+".png",FILE_BIN|FILE_WRITE); //**************************** int dwBytesRead[1];// кол-во считанных данных char readed[1000];//сами данные //читаем данные, полученные от сервера после запроса while(InternetReadFile(hURL,readed,1000,dwBytesRead)) { if(dwBytesRead[0]<=0) break;//данных нет - выходим chart_file.WriteCharArray(readed,0,dwBytesRead[0]);//пишем данные в файл } InternetCloseHandle(hInternetSession);//закроем соединение chart_file.Close();//и файл //конвертируем файл if(!Convert_PNG(src.Str(), dst.Str())) SetUserError(DIAGRAM_ERR_IMAGE_CONVERSION_FAILED); //привяжем файл к графическому объекту 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; } //перерисуем график ChartRedraw(); }
Следует отметить широкое использование мною классов Стандартной библиотеки при создании библиотеки Google Charts, за что отдельное спасибо её разработчикам.
2. Обзор компонентов библиотеки Google Charts
Запрос на сервер должен начинаться так: http://chart.apis.google.com/chart?cht=, далее следует указать тип диаграммы, а уже потом остальные параметры. Запрос, помимо заголовка, состоит из команд и их параметров, команды разделяются между собой символом "&", например команда &chtt=Title установит в заголовок диаграммы слово "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();
В итоге, в компоненте с именем "test diagram" появится такое изображение:
Рисунок 1. Простой пример построения линейного графика
Напомню, что справку о методах классов можно будет найти в приложенной справке, здесь будут примеры использования.
Усложним график, добавим ещё одну линию, оси и сетку:
//создадим экземпляр касса CLineXYChart chart; //привяжем его к ранее созданному объекту chart.Attach(0, "test diagram"); //установим размер chart.SetSize(200,200); //подготовим данные 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}; //добавим линии chart.AddLine(Y, Red, 0, "Test line"); chart.AddLine(Y2, Blue, 0, "Test line 2"); //оси chart.SetAxis(DIAGRAM_AXIS_BOTTOM|DIAGRAM_AXIS_LEFT, -1, 0, 0, 10, 0); //и сетку chart.SetGrid(); //получим график chart.GetChart();
График принял такой вид, как на рисунке ниже. Следует отметить одну важную особенность - метод GetChart() следует вызывать после остальных методов т.к. именно он получает график.
Рисунок 2. Более сложный пример линейного графика
И это ещё далеко не всё. Добавим маркеры, заголовок, легенду и заливку:
//создадим экземпляр касса CLineXYChart chart; //привяжем его к ранее созданному объекту chart.Attach(0, "test diagram"); //установим размер chart.SetSize(500,300); //подготовим данные 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"); //оси chart.SetAxis(DIAGRAM_AXIS_BOTTOM|DIAGRAM_AXIS_LEFT, -1, 0, 0, 10, 0); //сетку chart.SetGrid(); //легенду chart.ShowLegend(); //заголовок chart.SetTitle("My Chart", Green, 15); //заливку chart.SetFill(Linen); //маркеры chart.SetLineMarker(first_line, DIAGRAM_LINE_MARKERS_DIAMOND, BlueViolet, 10); chart.SetLineMarker(second_line, DIAGRAM_LINE_MARKERS_CROSS, YellowGreen, 15); //получим график chart.GetChart();
Для установки свойств, присущих только какой-то конкретной линии используются идентификаторы (first_line и second_line), которые потом передаются в соответствующие методы.
Рисунок 3. Ещё более сложный пример линейного графика
Но и это не конец. Есть возможность добавления меток на линию, заливки области под линией и между линиями, масштабирования линий и добавления линии на второстепенную ось:
//создадим экземпляр касса CLineXYChart chart; //привяжем его к ранее созданному объекту chart.Attach(0, "test diagram"); //установим размер chart.SetSize(700,400); //подготовим данные 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}; //добавим линии 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"); //основные оси chart.SetAxis(DIAGRAM_AXIS_BOTTOM|DIAGRAM_AXIS_LEFT, -1, 0, 0, 10, 0); //второстепенные оси chart.SetAxis(DIAGRAM_AXIS_RIGHT|DIAGRAM_AXIS_TOP, third_line, 0, Red, 15, 2); //сетку chart.SetGrid(); //легенду chart.ShowLegend(DIAGRAM_LEGEND_POSITION_BOTTOM_HORIZONTAL); //заголовок chart.SetTitle("My Chart", Green, 15); //заливку графика chart.SetFill(Linen, Silver); //маркеры chart.SetLineMarker(first_line, DIAGRAM_LINE_MARKERS_DIAMOND, BlueViolet, 10); chart.SetLineMarker(second_line, DIAGRAM_LINE_MARKERS_CROSS, YellowGreen, 15); //установим заливку между двумя линиями chart.SetLineFilling(first_line, Lime , second_line); //добавим метки chart.AddLabel(first_line, DIAGRAM_LABEL_TYPE_FLAG, 5, "Flag", Red, 15); chart.AddLabel(second_line, DIAGRAM_LABELS_TYPE_ANNOTATION, 3, "annotation", Blue, 25); //немного сожмём линии (на 20%) chart.SetLineScaling(second_line, false, 20); //третью линию привяжем к второстепенным осям chart.SetLineScaling(third_line, true, 20); //получим график chart.GetChart();
Рисунок 4. Все возможности линейного графика
Если нужно динамически обновлять данные графика, то можно воспользоваться методом SetLineData(), или полностью удалить линию со старыми данными с помощью DeleteLine() и создать новую, однако первый метод предпочтительнее.
2.2 Гистограмма
Иными словами, это "столбиковый график". За его построение отвечает класс CBarChart. Отличиями от CLineXYChart являются отсутствие маркеров, необходимости задавать набор данных для X оси, а также некоторые особенности, присущие только диаграммам этого типа. В остальном всё так же, как и с CLineXYChart.
Пример:
CBarChart chart; chart.Attach(0, "test diagram"); //установим размер chart.SetSize(700,400); //подготовим данные 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 bar 1"); int second_line=chart.AddLine(Y2, Blue, 0, "Test bar 2"); int third_line=chart.AddLine(Y3, Green, 0, "Test bar 3"); //основные оси chart.SetAxis(DIAGRAM_AXIS_BOTTOM|DIAGRAM_AXIS_LEFT, -1, 0, 0, 10, 0); //сетку chart.SetGrid(); //легенду chart.ShowLegend(); //заголовок chart.SetTitle("My Chart", Green, 15); //заливку графика chart.SetFill(Linen, Silver); //получим график chart.GetChart();
Рисунок 5. Пример гистограммы
Обратите внимание на то, что у нас три набора данных, и столбики расположены друг над другом в порядке, наилучшем для отображения, однако существует и другой способ группировки столбцов. Он устанавливается при помощи метода SetGrouped():
//установим группировку
chart.SetGrouped(true);
Рисунок 6. Пример гистограммы с иным способом группировки столбцов
Как видите, теперь столбцы располагаются не друг над другом, а по порядку создания.
2.3 Круговая диаграмма
Класс CPieChart строит круговую диаграмму. Можно создать как двумерную, так и трёхмерную диаграмму:
CPieChart chart; chart.Attach(0, "test diagram"); //установим размер chart.SetSize(300,200); //добавим секторы 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"); //легенду chart.ShowLegend(); //заголовок chart.SetTitle("My Chart", Green, 15); //режим отображения - 2D chart.SetPieType(true); //получим график chart.GetChart();
Рисунок 7. 2D и 3D примеры круговой диаграммы
Тип отображения (2D или 3D) задаётся вызовом метода SetPieType(). Ещё одним полезным свойством является возможность задания нескольких колец, однако тогда будет доступен только 2D режим. Для задания второго кольца укажем параметр dimensional метода AddPieSlice() отличным от нуля:
//добавим второе кольцо 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"); //установим размер chart.SetSize(300,300); //добавим линии 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"); //установим заливку между двумя линиями chart.SetLineFilling(first_line, Lime , second_line); //маркеры chart.SetLineMarker(first_line, DIAGRAM_LINE_MARKERS_CIRCLE, BlueViolet, 10); chart.SetLineMarker(second_line, DIAGRAM_LINE_MARKERS_DIAMOND, YellowGreen, 15); //заголовок chart.SetTitle("My Chart", Green, 15); //сетку chart.SetGrid(); //легенду chart.ShowLegend(DIAGRAM_LEGEND_POSITION_BOTTOM_HORIZONTAL); //получим график chart.GetChart();
Рисунок 9. Лепестковая диаграмма
2.5 Свечной график
Класс CCandleChart строит свечной график. Свечи добавляются методом AddCandles():
CCandleChart chart; chart.Attach(0, "test diagram"); //установим размер chart.SetSize(300,300); //добавим 10 свечей с текущего графика 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); //заголовок chart.SetTitle(Symbol(), Green, 15); //сетку chart.SetGrid(); //основные оси chart.SetAxis(DIAGRAM_AXIS_LEFT, -1, 0, 0, 10, 4); //получим график chart.GetChart();
Рисунок 10. Свечной график
Маркеры, легенда и метки недоступны для этого типа графиков.
2.6 Формула
Класс CFormulaChart позволяет создать формулу. Формула передаётся в виде строки на языке TeX в метод SetFormulaString():
CFormulaChart chart; chart.Attach(0, "test diagram"); //установим размер chart.SetSize(300,75); //добавим формулу chart.SetFormulaString("x=-b\pm\sqrt{b^2-4ac}\over(2a)"); //её цвет chart.SetFormulaColor(Blue); //заголовок chart.GetChart();
Рисунок 11. Формула
Также можно установить заливку методом SetFill(). Никакие дополнительные возможности не поддерживаются.
2.7 Граф
Класс CGraphChart строит графы. Методы AddNode() и AddEdge() добавляют узлы и рёбра на граф:
CGraphChart chart; chart.Attach(0, "test diagram"); //установим размер chart.SetSize(300,220); //добавим рёбра и узлы 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); //установим движок chart.SetEngine(DIAGRAM_GRAPH_ENGINE_NEATO); //и стрелки chart.SetGraphType(false); //заголовок chart.GetChart();
Рисунок 11. Графы
Метод SetEngine() устанавливает специфический тип графического двигателя, используемого при построении графа. С этим можете поэкспериментировать сами. Методы DeleteNode() и DeleteEdge() удаляют узлы и рёбра с графа.
2.8 Диаграмма Венна
Класс CVennChart строит диаграмму Венна.
Метод SetCircleSizes() установит размеры множеств, SetCircleColors() их цвета, SetVennLegend() их подписи, а SetIntersections() размеры пересечений:
CVennChart chart; chart.Attach(0, "test diagram"); //установим размер chart.SetSize(300,220); //добавим множества(установим их размеры) chart.SetCircleSizes(100, 90, 80); //цвета chart.SetCircleColors(Yellow, Lime, Maroon); //подписи chart.SetVennLegend("EURUSD", "USDJPY", "EURJPY"); //размеры пересечений chart.SetIntersections(30,30,30,10); //легенда chart.ShowLegend(); //заголовок chart.SetTitle("Venn", Green, 15); //заголовок chart.GetChart();
Рисунок 11. Диаграмма Венна
2.9 QR-код
Класс CQRCode позволяет создать QR-код:
CQRCode chart; chart.Attach(0, "test diagram"); //установим размер chart.SetSize(300,220); //добавим данные chart.SetData("test data"); //установим уровень коррекции ошибка при кодировании chart.SetErrCorrection(DIAGRAM_QRCODE_ERROR_CORRECTION_LOW); //и кодировку chart.SetEncoding(DIAGRAM_QRCODE_ENCODING_UTF_8); //заголовок chart.GetChart();
Рисунок 11. QR-код
Метод SetData() установит данные, на основе которых будет создан код. Методы SetErrCorrection() и SetEncoding() установят коррекции ошибка при кодировании и кодировку.
2.10 Карта
Класс CMapChart создаёт карту мира или континента с возможностью выделить необходимые страны:
CMapChart chart; chart.Attach(0, "test diagram"); //установим размер chart.SetSize(440,220); //установм регион chart.SetZoomArea(DIAGRAM_MAP_AREA_AFRICA); //и страны chart.SetCountries("DZEGMGAOBWNGCFKECGCVSNDJTZGHMZZM"); //цвета chart.SetColors(White, Red, Blue); //цвет океана - голубой (2-й параметр) chart.SetFill(Gray, Blue); //заголовок chart.GetChart();
Рисунок 11. Карта Африки
Коды нужных стран передаются в метод SetCountries() в формате ISO 3166-1-alpha-2. SetZoomArea() установит континент карты, а SetColors() цвета стран.
2.11 Пузырьковый график
Класс CScatterChart строит пузырьковый график. Единственное отличие от CLineXYChart - способ задания данных.
Здесь для задания данных используется метод AddLineScatter(), в который нужно передать координаты точек и их размеры:
//создадим экземпляр касса CScatterChart chart; //привяжем его к ранее созданному объекту chart.Attach(0, "test diagram"); //установим размер chart.SetSize(300,300); //подготовим данные 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}; //добавим пузырьки int first_line=chart.AddLineScatter(Y, X, Z, Red, 0, "scatters 1"); int second_line=chart.AddLineScatter(Y2, X2, Z2, Blue, 0, "scatters 2"); //основные оси chart.SetAxis(DIAGRAM_AXIS_BOTTOM|DIAGRAM_AXIS_LEFT, -1, 0, 0, 10, 0); //сетку chart.SetGrid(); //легенду chart.ShowLegend(DIAGRAM_LEGEND_POSITION_BOTTOM_HORIZONTAL); //заголовок chart.SetTitle("My Chart", Green, 15); //заливку графика chart.SetFill(Linen, Silver); //получим график chart.GetChart();
Рисунок 11. Пузырьковый график
Заключение
Надеюсь, дорогой читатель, данная библиотека несколько облегчит Вам нелёгкую трейдерскую жизнь. Хотелось бы добавить, что использование ООП значительно облегчает написание больших проектов, делает их более гибкими и удобными при использовании.
Удачи.
Приложения:
| № | Имя файла | Описание |
|---|---|---|
| 1 | google_charts.mqh | Библиотека, поместить в MQL5\Include |
| 2 | google_charts_test.mq5 | Тестовый скрипт, поместить в MQL5\Script |
| 3 | google_charts_help.rar | Архив со справкой к библиотеке |
| 4 | Libraries.rar | Архив с библиотеками и их исходными кодами, распаковать в MQL5\Libraries (библиотеки написаны в C++ Builder) |
Принципы экономного пересчета индикаторов
Как заказать торгового робота на MQL5 и MQL4
Создание эксперта, торгующего на разных инструментах
Пошаговое руководство по написанию MQL5-советников для начинающих
- Бесплатные приложения для трейдинга
- 8 000+ сигналов для копирования
- Экономические новости для анализа финансовых рынков
Вы принимаете политику сайта и условия использования
Хотелось бы узнать а есть возможность строит цветные свечи??
можно задать цвет медвежьей свечи, для бычьих только белый
надо попробовать переташить график в веб...
с парочкой индикаторов
Выдает такую ошибку
Я так понял что эти библиотеки под 32 бита. Сделайте пожалуйста для 64 бита эти библиотеки