Диаграмма Ганта и графическая схема сторонними средствами

Недавно возникла необходимость формировать отчеты на мобильных устройствах. Для реализации идеи решили попробовать мобильный клиент.
С обычными отчетами проблем не возникло, но были два отчета, которые "не смогли".
Один из них - Диаграмма Гантта, другой - построен при помощи Географической схемы. Эти типы не имеют отображения на мобильном клиенте.

Было решено попробовать вывести данные отчетов в поле html.

Диаграмма Гантта.

Самым простым способом показалось использовать amCharts. Спасибо публикации за примеры работы с библиотеками. 
 

В обработке подготовлен шаблон html, который всего лишь нужно дополнить выводимыми данными.
Формируем таблицу данных:
 

Функция ПолучитьДанные()
	
	Данные = Новый ТаблицаЗначений;
	
	Данные.Колонки.Добавить("category");
	Данные.Колонки.Добавить("segments");
	
	ТаблицаСегментов = Новый ТаблицаЗначений;
	ТаблицаСегментов.Колонки.Добавить("start");
	ТаблицаСегментов.Колонки.Добавить("end");
	ТаблицаСегментов.Колонки.Добавить("color");
	ТаблицаСегментов.Колонки.Добавить("task");
	
	НоваяСтрока = Данные.Добавить();
	НоваяСтрока.category = "Авиа";
	ТаблицаСегментов.Очистить();
	
	НоваяСтрокаСегментов = ТаблицаСегментов.Добавить();
	НоваяСтрокаСегментов.start = "2016-01-01";
	НоваяСтрокаСегментов.end = "2016-01-14";
	НоваяСтрокаСегментов.color = "#b9783f";
	НоваяСтрокаСегментов.task = "Gathering requirements";
	
	НоваяСтрокаСегментов = ТаблицаСегментов.Добавить();
	НоваяСтрокаСегментов.start = "2016-02-01";
	НоваяСтрокаСегментов.end = "2016-02-14";
	НоваяСтрокаСегментов.color = "#b9783f";
	НоваяСтрокаСегментов.task = "Gathering requirements";
	
	НоваяСтрока.segments = ТаблицаСегментов;
	
	НоваяСтрока = Данные.Добавить();
	НоваяСтрока.category = "Прокат";
	
	ТаблицаСегментов = Новый ТаблицаЗначений;
	ТаблицаСегментов.Колонки.Добавить("start");
	ТаблицаСегментов.Колонки.Добавить("end");
	ТаблицаСегментов.Колонки.Добавить("color");
	ТаблицаСегментов.Колонки.Добавить("task");
	ТаблицаСегментов.Очистить();
	
	НоваяСтрокаСегментов = ТаблицаСегментов.Добавить();
	НоваяСтрокаСегментов.start = "2016-01-02";
	НоваяСтрокаСегментов.end = "2016-01-18";
	НоваяСтрокаСегментов.color = "#cc4748";
	НоваяСтрокаСегментов.task = "Producing specifications";
	НоваяСтрока.segments = ТаблицаСегментов;
	
	НоваяСтрокаСегментов = ТаблицаСегментов.Добавить();
	НоваяСтрокаСегментов.start = "2016-02-02";
	НоваяСтрокаСегментов.end = "2016-02-18";
	НоваяСтрокаСегментов.color = "#cc4748";
	НоваяСтрокаСегментов.task = "Producing specifications";
	НоваяСтрока.segments = ТаблицаСегментов;
	
	НоваяСтрокаСегментов = ТаблицаСегментов.Добавить();
	НоваяСтрокаСегментов.start = "2016-03-02";
	НоваяСтрокаСегментов.end = "2016-03-18";
	НоваяСтрокаСегментов.color = "#cc4748";
	НоваяСтрокаСегментов.task = "Producing specifications";
	НоваяСтрока.segments = ТаблицаСегментов;
	
	Возврат Данные;
	
КонецФункции

Далее таблица преобразуется в строку и передается в шаблон.

В итоге получаем: 

Графическая схема.

В свое время возникла необходимость графически отображать цепочки продаж.

При анализе различных способов была найдена публикация, которая и помогла реализовать такой отчет.

При решении текущей задачи вспомнилась работа с графикой на js при помощи библиотеки raphael.
В итоге все свелось просто к рисованию фигур по точкам. Точки брались прямо из графической схемы:
 

Процедура ЗаполнитьПример()
	
	СписокИдентификаторов.Очистить();
	Уровень1 = ДеревоОбъектов.ПолучитьЭлементы();
	Уровень1.Очистить();
	
	ГрафСхемаXDTO=СериализаторXDTO.ЗаписатьXDTO(ГрафСхема);
	
	Для Каждого ОбъектГС Из ГрафСхемаXDTO.Item Цикл
		
		Если ОбъектГС.itemtype = 9 Тогда
			
			НовСтр = Уровень1.Добавить();
			
			ТочкиСтрокой = "";
			
			Для Каждого Точка Из ОбъектГС.point Цикл
				
				ТочкиСтрокой = ТочкиСтрокой + ?(ПустаяСтрока(ТочкиСтрокой), "", ", ") + СтрЗаменить(Строка(Точка.x), Символы.НПП, "") + ", " + СтрЗаменить(Строка(Точка.y), Символы.НПП, "");
				
			КонецЦикла;
			
			НовСтр.Шейп = ТочкиСтрокой;
			НовСтр.Цвет = "#ffa0e0";
			НовСтр.Описание = ОбъектГС.itemCode;
			НовСтр.Описание_Точка = "0, 0";
			СписокИдентификаторов.Добавить(НовСтр.ПолучитьИдентификатор());
			
		ИначеЕсли ОбъектГС.itemtype = 1 Тогда
			
			НовСтр = Уровень1.Добавить();
			
			ТочкиСтрокой = "";
			
			МассивТочек = Новый Массив;
			
			Для Каждого Точка Из ОбъектГС.point Цикл
				
				ТочкиСтрокой = ТочкиСтрокой + ?(ПустаяСтрока(ТочкиСтрокой), "", ", ") + СтрЗаменить(Строка(Точка.x), Символы.НПП, "") + ", " + СтрЗаменить(Строка(Точка.y), Символы.НПП, "");
				МассивТочек.Добавить(СтрЗаменить(Строка(Точка.x + 1), Символы.НПП, "") + ", " + СтрЗаменить(Строка(Точка.y), Символы.НПП, ""));
				
			КонецЦикла;
			
			Сч = МассивТочек.Количество() - 1;
			Пока Сч >= 0 Цикл
				
				ТочкиСтрокой = ТочкиСтрокой + ", " + МассивТочек[Сч];
				
				Сч = Сч - 1;
				
			КонецЦикла;
			
			НовСтр.Шейп = ТочкиСтрокой;
			НовСтр.Цвет = "#999999";
			НовСтр.Описание = "";
			НовСтр.Описание_Точка = "0, 0";
			НовСтр.Линия = Истина;
			СписокИдентификаторов.Добавить(НовСтр.ПолучитьИдентификатор());
			
		КонецЕсли;
		
	КонецЦикла;	
	
КонецПроцедуры

В итоге получаем:

Стрелочки рисовать уже не стал. Но, при желании, это можно сделать.

Обе обработки делались на платформе 8.3.11.2867

Тестировалось на конфигурации Управление нашей фирмой, редакция 1.6 (1.6.13.60), но должно работать на любой другой конфигурации под управляемыми формами.