В последнее время было несколько сообщений о визуализации данных ваших временных рядов с использованием различных библиотек построения диаграмм, таких как интеграция с plotly.js и библиотекой Rickshaw. Сегодня мы рассмотрим библиотеку диаграмм Highcharts — еще один отличный инструмент для визуализации ваших данных. Конечно, если вы не хотите использовать внешние графические библиотеки, вы всегда можете воспользоваться Grafana или Chronograf. Grafana легко интегрируется с InfluxDB, а Chronograf был создан специально для использования с InfluxDB.

Прежде чем мы начнем размещать эти графики на странице, вам нужно убедиться, что у вас есть запущенный и работающий экземпляр InfluxDB. Вы можете настроить все компоненты TICK Stack локально или раскрутить стек в нашем удобном режиме песочницы.

Недавно я опубликовал руководство для начинающих по клиентской библиотеке Node-influx как вариант интеграции с InfluxDB без обязательного использования Telegraf для сбора ваших данных. Эта визуализация построена с использованием тех же данных об океанских приливах из этого поста. Вы можете клонировать репозиторий здесь, если хотите проверить конечный продукт.

Первые шаги

Вытягивание библиотеки — наш первый шаг. Я добавил следующий тег script в раздел head файла index.html.

<script src="https://code.highcharts.com/highcharts.js"></script>

Для body файла index.html вам понадобится контейнер div с id «контейнером», чтобы мы могли позже настроить его в файле скрипта, например так:

<div id="container"></div>

График Highcharts будет отображаться в этом контейнере.

В нашем файле сервера мы уже настроили конечную точку для запроса данных из нашей базы данных океанских приливов (см. ниже), поэтому нам нужно будет получить данные в нашем файле сценария и установить их в нашу функцию-конструктор Highcharts.

app.get('/api/v1/tide/:place', (request, response) => {
  const { place } = request.params;
  influx.query(`
    select * from tide
    where location =~ /(?i)(${place})/
  `)
  .then( result => response.status(200).json(result) )
  .catch( error => response.status(500).json({ error }) );
});

В файле сценария я написал простую функцию выборки, которая извлекает данные на основе переданного имени местоположения.

const fetchData = (place) => {
  return fetch(`/api/v1/tide/${place}`)
    .then(res => {
      if (res.status !== 200) {
        console.log(res);
      }
      return res;
    })
    .then(res => res.json())
    .catch(error => console.log(error));
}

Чтобы получить все данные для четырех разных местоположений, я использовал Promise.all(), а затем изменил результаты, чтобы они соответствовали требуемому формату, указанному в Документации Highcharts.

return Promise.all([
            fetchData('hilo'),
            fetchData('hanalei'),
            fetchData('honolulu'),
            fetchData('kahului')
         ])
        .then(parsedRes => {
          const mutatedArray = parsedRes.map( arr => {
            return Object.assign({}, {
              name: arr[0].location,
              data: arr.map( obj => Object.assign({}, {
                x: (moment(obj.time).unix())*1000,
                y:obj.height
              }))
            });
          });
        })
        .catch(error => console.log(error));

Теперь, когда у нас есть готовые данные, мы можем построить наш график.

Highcharts.chart('container', {
            colors: ['#508991', '#175456', '#09BC8A', '#78CAD2'],
            chart: {
              backgroundColor: {
                  linearGradient: [0, 600, 0, 0],
                  stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(161, 210, 206)']
                  ]
              },
              type: 'spline'
            },
            title: {
              text: 'Hawaii Ocean Tides',
              style: {
                'color': '#175456',
              }
            },
            xAxis: {
              type: 'datetime'
            },
            yAxis: {
              title: {
                text: 'Height (ft)'
              }
            },
            plotOptions: {
              series: {
                turboThreshold: 2000,
              }
            },
            series: mutatedArray
          });

Здесь определенно многое происходит. Библиотека Highcharts поставляется с методом chart(), который принимает два аргумента: целевой элемент, в котором отображается диаграмма, и объект параметров, в котором вы можете указать различные свойства, такие как стиль, заголовок, легенда, серия, тип, plotOptions , и так далее. Давайте рассмотрим каждый из вариантов один за другим.

  • colors: [array] — свойство colors принимает массив шестнадцатеричных кодов, которые будут представлять цветовую схему по умолчанию для диаграммы. Если все цвета израсходованы, любые новые необходимые цвета приведут к повторному циклу массива.
  • chart: {object} — свойство диаграммы принимает объект с различными дополнительными свойствами, включая тип, тип масштабирования, анимацию, события, описание и ряд свойств стиля. В данном случае я придал фону линейный градиент и обозначил тип как сплайн.
  • title: {object} — представляет основной заголовок диаграммы и может быть дополнен объектом стиля, чтобы немного оживить ситуацию.
  • xAxis: {object} — в этом сценарии, поскольку я использую данные временных рядов, я знаю, что по оси x всегда будет время, поэтому я могу обозначить тип как дата-время, и масштаб будет автоматически настроен на соответствующий единица времени. Однако здесь есть множество других опций, включая стили, метки, настраиваемое размещение галочек, а также логарифмический или линейный тип.
  • yAxis: {object} — аналогично свойству xAxis, ось y принимает объект и имеет доступ к ряду параметров для настройки дизайна и стиля оси y диаграммы. В этом случае я указал только заголовок по оси Y и отложил автоматическое размещение меток Highcharts.
  • plotOptions: {object} — свойство plotOptions является объектом-оболочкой для объектов конфигурации для каждого типа серии. Объекты конфигурации для каждой серии также могут быть переопределены для отдельного элемента серии, как указано в массиве серий. Здесь я использовал свойство plotOptions.series, чтобы переопределить значение turboThreshold по умолчанию, равное 1000, и изменить его на 2000. Это позволяет отображать на диаграмме большее количество точек данных (по сравнению с 1000 по умолчанию). Согласно документам, параметры conf для этой серии доступны на трех разных уровнях. Если вы хотите настроить таргетинг на все серии на диаграмме, вы должны использовать объект plotOptions.series. Для серии определенного типа вы должны получить доступ к plotOptions этого типа. Например, чтобы настроить plotOptions для типа диаграммы линия, вы должны получить доступ к объекту plotOptions.line. Наконец, параметры для конкретной серии задаются в свойстве серии (см. следующий пункт).
  • серия: [массив] или {объект} — здесь вы будете передавать свои данные. Вы можете дополнительно определить тип передаваемых данных, дать им имя и определить для них дополнительные plotOptions.

Проверьте результат!

Эта информация на самом деле лишь покрывает верхушку айсберга. Возможности кажутся бесконечными с точки зрения того, что вы можете создать, используя графическую библиотеку Highcharts. Почему бы не взглянуть на их документацию или демонстрации и не сообщить нам все о ваших новых творениях с InfluxDB и Highcharts? Вопросы и комментарии? Вы всегда можете связаться со мной в Твиттере: @mschae16. Удачного составления графиков!

Первоначально опубликовано на www.influxdata.com 19 апреля 2018 г.