С началом существования HTML 5 возможности веб-приложений в браузерах возросли фантастически. Один из примеров – canvas элемент, который позволяет, с помощью JavaScript, рисовать 2D и 3D модели, равно как и растровую графику (bitmaps).

Благодаря этим возможностям, статистические графики могут быть нарисованы прямо в браузере. Типы графиков могут быть различными. В прошлом, чтобы изобразить график, использовались различные подходы. Если внешний вид графика позволял, использовался стандартный HTML и CSS. Однако, подходы для более сложных графиков использовали различные технологии встроенных в браузеры HTML, CSS и JavaScript. Популярным было использование Flash, или графики вычерчивались на сервере, с последующей передачей их изображения клиенту. Эти подходы требовали много времени для поддержки, нарушали консистенцию приложений, вынуждали клиента устанавливать дополнительное ПО и дополнительно нагружали сервера.

Основным же недостатком при использовании canvas и JavaScript являются различная поддержка [1] браузерами и полное отсутствие поддержки в старых версиях.

При реализации графиков очень важен этап передачи статистических данных. Одним из возможных сценариев является прямое получение JS-файла с сервера, который содержит массивы со статистическими данными. Такой подход был бы абсолютно достаточен, если бы эти данные использовались бы только JavaScript –приложениями.

Но, когда данные требуют независимости от конкретного приложения, необходимо использовать другой подход. В нашем случае мы используем JSON[2]. JSON прост для понимания JavaScript-ом, а так же его синтаксис позволяет легко реализовать полный парсер.

Source github

В JavaScript есть встроенный парсер для JSON. В ECMA-262-5-стандарт был включен JSON.parse, который имплементирован в последнии версии браузеров. В старых версиях браузеров можно использовать json[3] от Douglas Crockford. Вопреки тому, что парсер от Douglas Crockford не полностью совместим с JSON.parse в ECMA-262-5, он достаточно надежен в отличие от прямого използования eval.

После того как данные обработаны и готовы для использования приложением, следует вычерчивание графика. В этом случае подходы различаются согласно типу графика. В нашем случае мы будем рисовать график со столбцами. Мы будем использовать API для текста для canvas, и также, нарисуем легенду к графику.

Эти графики мы используем в WebSitePulse Current Status расширение для Google Chrome. Add-on позволяет мониторить ваши сервера в процессе использования вашего любимого браузера. Статистический график будет показывать вам стабильность в определенный период времени.

Вы можете попробывать WebSitePulse Current Status с следующими настройками:

Username: wspdemo

API Key: 35e6340814655582a79039dbc1cb0b65

Поддержка canvas в браузерах — caniuse.com/#search=canvas
JavaScript Object Notation — www.json.org
json — github.com/douglascrockford/JSON-js/blob/master/json.js

Создание графиков с JavaScript