Александр

Как и для других сайтов. Ставишь новую версию пыхи, переключаешь апач/нджинкс на новую пыху. В зависимости от разницы между версиями, офигеваешь от сломанного сайта и ошибок. Откатываешься назад, ибо обычно просто так апнуть версию без изменения кода не получиться. Поднимаешь версию для разработки на тестовом сервере с новой пыхой, фиксишь/обновляешь код, потом выливаешь это на прод и обновляешь пыху снова. Если руки прямые и из плеч то должно получиться.

https://codepen.io/anon/pen/YvEOpy

https://www.chartjs.org/

Хотелось бы сделать из этой палки изогнутую палку

Боюсь спросить на сколько изогнутую, как пример не?
https://jsfiddle.net/vtLn0596/1/

Разделите этот параметр на 2 разных. Они будут суррогатными. Разделение делайте через событие сохранения элемента инфоблока, тогда и 1с подхватится и ручное сохранение. И сортируйте по суррогатному. Разве что первый раз для товаров придется скриптом все выставить.

Ошибку 404 отдаёт сам битрикс в вашем шаблоне. Содержимое ошибки лежит в файле 404.php в корне.
Чтобы поймать ошибку нужно ставить блок:

location / {
    try_files $uri $uri/ @bitrix;
}

Если кроссбраузерность не требуется, то можно посмотреть в сторону масок: www.w3.org/TR/css-masking/#the-mask-image - кладем изображение в виде фона, затемняем его, к координатам мышки привязываем блок с фоном и маской. Для хрома приблизительно вот так: jsfiddle.net/JkuR9/3

Второй вариант - canvas.