Писать такой код самостоятельно - только запутаться и увязнуть в деталях (поддержать кучу устройств, задизайнить мобильное представление, обработать разные события пользователя) которые к твоей задаче отобразить график и масштабировать его не относятся.
Я бы посоветовал взять готовую библиотеку для графиков (проверь лицензию других, эта - MIT что позволит использовать код без юридических последствий), например GitHub - danvk/dygraphs: Interactive visualizations of time series using JavaScript and the HTML canvas tag. В ней масштабирование есть из коробки.
Это концептуально несложная задача (для тех кто хоть сколько-то писал на js) - положить твой код в переменную на глобальный уровень. Пример как будет выглядеть html:
...
<script>
window.chartData = [{...}]
</script>
<!-- подключаемый файл с логикой инициализации графиков -->
<script src="script.js"></script>
в самом script.js
function initChart() {
// ... использование библиотеки и переменной window.chartData чтобы отобразить данные
}