[Alikberov]

Увы! Код написан довольно быстро и местами небрежно. Имеет ряд недоработок:

• Отсутствует сетка, хотя параметр (строка 12) для указания размера ячеек имеется
• Отсутствует клиппинг рабочей области и график может выйти за её пределы
• Строка математического выражения к графику выводится чуть ли ни хаотически: Нужно добавить параметр для ручного позиционирования текста
• Стиль текста никак не настраивается
• Нужно добавить опцию подавления пунктирного разделителя
• Самое неприятное: Построение графиков по оси Y (строки 127-134) имеет много грубых досадных ошибок (привет двойкам по математике) и я не успел отладить (методом проб и ошибок) эту часть кода

Было бы здорово, если бы Вы, общий код разделили на три кода

А там специально я код вызова функции разделил на три части (строки 152-170, 172-200 и 202-230), чтобы можно было скопировать и изменять по своему усмотрению.
Вот только комментарии не успел раскидать, из-за чего код слишком мутно выглядит.

Вот фрагмент с пояснениями.

var	meine_diagramme = {
	min_x: 0,		// Минимум по оси X на графике
	max_x: 10,		// Максимум по оси X на графике
	min_y: 0,		// Минимум по оси Y на графике
	max_y: 100,		// Максимум по оси Y на графике
	step_x: 1,		// Шаг цифровой разметки по оси X под графиком
	step_y: 20,		// Наш цифровой разметки по оси Y слева от графика
	width: 390,		// Ширина Canvas-области - масштаб графика 
	height: 120,	// Высота Canvas-области
	fn: [			// Здесь можем перечислить массивом все наши функции
		{
			x1: 0,			// Начальная точка на оси X
			x2: 100,		// Конечная точка на оси X
			color: "red",	// Цвет линии построения графика
			fn: "x**2"		// Ведущая функция на графике
		}
	]
};

// Создаём объект графика и передаём ему реквизиты
var grafik = new Functions(meine_diagramme);

// Добавляем его на страницу
document.body.appendChild(grafik.domElement);

// Теперь добавим вторую функцию
var mein_diagramm = {
		x1: 2.5,			// Начальная точка на оси X
		x2: 7.5,			// Конечная точка на оси X
		color: "blue",	// Цвет линии построения графика
		fn: "30*sin(10*x)+60"
	};

// Пауза перед добавлением второго графика
setTimeout(`grafik.draw([mein_diagramm])`, 5000);

// Пауза перед очищением области графика
setTimeout(`grafik.clear()`, 10000);

// Пауза перед отображением только второго графика`);
setTimeout(`grafik.draw([mein_diagramm])`, 15000);

// Пауза перед смещением оси путём коррекции минимума на сетке
setTimeout(`grafik.grid.min_x = -12; grafik.clear()`, 20000);

// Пауза перед отображением двух графиков
setTimeout(`mein_diagramm.x1 = -10; grafik.draw([mein_diagramm, meine_diagramme.fn[0]])`, 25000);