Raphaël library and webix.protoUI

Hello!
I attempt to create webix.protoUI with Raphael libraries. I write his structure, methods. It’s created, but it’s not possible to draw some objects in the Paper. Their size is 0x0. Why so?

Hello,

We’ve got the ready-made integration with Raphael chart: sample and its source code.

Please, check the “raphael.js” file for the proto UI and its $setSize method. You need to explicitly adjust the dimensions of Raphael view to the dimensions of Webix view.

If it doesn’t not help, please share your code here.

webix.protoUI({
name: “stationChart”,
$init: function (/* config */) {
// this.$ready.push(this.createChart);
this.$ready.push(this.initChart);
},
initChart: function (isResize) { // инициализация компонент, подготовка SVG к рисованию графиков
var config = this.config,
view = this;
config.clientWidth = window.innerWidth;
// при необходимости генерировать id для контейнера
if (!config.containerId.length) {
config.containerId = “roadChart” + webix.uid();
}
this.getData(config);

	var wait = setTimeout(function () { // дождаться инициализации контейнера
		clearTimeout(wait);

		// сгенерировать контейнер для SVG
		if (!$("#" + config.containerId)) {
			var parent = $("div[view_id='" + config.id + "'] .webix_template");
			parent.append("<div id='" + config.containerId + "'></div>");
			config.$container = parent.find("#" + config.containerId);
		}
		else {
			config.$container = $("#" + config.containerId);
		}

		// объект для хранения данных графика
		var plot = {
			title: null,
			path: null,
			bgPath: null,
			coords: {
				x: [],
				y: []
			},
			axis: {
				x: null,
				y: null
			}
		};

		// объект для хранения данных об осях координат
		var axis = {
			line: null,
			marks: null,
			grid: null,
			labels: null,
			end: null,
			zero: null
		};

		// инициализация нужных переменных и массивов
		for (var i = 0; i < config.numPlots; i++) {
			if (!view.plots[i]) { // схитрим и скопируем объекты-заготовки, если ячейка массива пустая
				view.plots.push(JSON.parse(JSON.stringify(plot)));
				view.plots[i].axis.x = JSON.parse(JSON.stringify(axis));
				view.plots[i].axis.y = JSON.parse(JSON.stringify(axis));
			}

			config.x.stepPx = 0; // обнулим заданный в пикселях шаг
			config.bottomGutter = 70;
			if (config.clientWidth < 800) {
				config.leftGutter = 0;
				config.gap = 50;
				config.topGutter = config.gap - 10;
				config.x.interval = 2 * 24 * 60 * 60 * 1000; // интервал оси X для маленьких дисплеев
				config.x.step = 8 * 60 * 60 * 1000; //
				config.x.minStepPx = 40;
			}
			else {
				config.leftGutter = 50;
				config.gap = 70;
				config.topGutter = 20;
				config.x.interval = config.x.interval || 3 * 24 * 60 * 60 * 1000; // интервал оси X для обычных дисплеев
				config.x.step = 60 * 60 * 1000;
				config.x.minStepPx = 50;
			}

			var delta; // опеределим min и max у шкалы Y
			if (!config.y.min)
				config.y.min = [];
			if (!config.y.max)
				config.y.max = [];
			config.y.min[i] = isFinite(config.y.min[i]) ? config.y.min[i] : (Math.round(Math.min.apply(null, config.y.datasets[i])) - 5);
			config.y.max[i] = isFinite(config.y.max[i]) ? config.y.max[i] : (Math.round(Math.max.apply(null, config.y.datasets[i])) + 5);
			delta = Math.abs(config.y.max[i] - config.y.min[i]);
			if (!config.y.step)
				config.y.step = [];
			config.y.step[i] = isFinite(config.y.step[i]) ? config.y.step[i] : delta > 70 ? 20 : delta >= 40 && delta < 70 ? 10 : delta >= 15 && delta < 40 ? 5 : 1;

			if (!config.y.zero)
				config.y.zero = [];

			if (config.y.min[i] >= 0) {
				config.y.zero.push(config.topGutter + config.height);
			}
			else if (config.y.max[i] <= 0) {
				config.y.zero.push(config.topGutter);
			}
			else {
				config.y.zero.push(undefined);
			}
		}
		// вычислим ширину и высоту SVG
		var height = config.height * config.numPlots + config.gap * (config.numPlots - 1) + config.bottomGutter + config.topGutter;
		config.width = config.$container.width();
		if (isResize) { // если будет вызвано событие resize
			config.paper.setSize(width, height);
		}
		else { // создадим SVG
			config.paper = Raphael(config.$container[0], config.width, height);
		}
	}, 500);

},
// my own methods goes here

Next I attempt to create some lines, and they’re added in the SVG, but it’s invisible. And I totally misunderstood about integration Raphael lib in the webix, but I’m sure that’s not enough to do the trick. I try to create Paper in the view separately from the whole project (in a “vacuum”), it draws everything. But in the project it fails… I can’t understand why so. May be U have any ideas?