График на canvas

1. Есть js код на CANVAS, который рисует графики. Графики динамические. Данные берутся из БД и каждые 3 секунды графики перерисовываются.

2. В данный момент работает TOOLTIP, т.е. при наведении на график появляется окошко с параметрами этого графика (Параметр, значение У). Нужно

вывести значение Х (время).

Что нужно сделать?

1. Оптимизировать код, убрать все лишнее и при необходимости заменить имеющиеся решения на более оптимальные для более

высокого быстродействия и простоты кода

2. Добавить оси. По горизонтали – время. По вертикали – слева от графика – одна ось, справа – 4 оси. А также нарисовать сетку

внутри координатной плоскости 10 линий по высоте и 20 по ширине. Предусмотреть,

чтобы можно было менять эти параметры в коде.

3. Снизу сделать слайдер с мини графиком, чтобы можно было передвигать и расширять (сужать) видимую область основного графика, при

этом соответственно должен перерисовываться основной график

4. Нужно, чтобы этот график мог выводиться в новом окне на всю ширину экрана при нажатии на кнопку на сайте. На новом окне также

должна быть кнопка закрыть это окно.

5. При скролле мышкой по плоскости этомго графика должен меняться масштаб графика (приближение-удаление) и соответственно, значения

на осях Х и У также должны меняться.

6. При нажатии и удержании кнопки мыши и при движении мышки плоскость должна двигаться.

7. Также нужно чтобы при движении мышкой по графику по оси Х (влево – вправо) менялось положение бегунка на видеопроигрывателе.

Надо привязывать изображение на видео к точке Х на графике и в

видеопроигрывателе выводить кадры соответствующие этому моменту времени. Это

желательно, но не обязательно.

8. Сделано сейчас так, что отключение какого-нибудь графика (серии) производится кликом по параметру. Но отключение происходит

только при перерисовке графиков. А нужно, чтобы мгновенно, не зависимо от

перерисовки.

9. Никакие библиотеки использовать не допускается.

https://grp3.mecamineft.com/graf/index6.html