Построение линейного графика и диаграммы от Morris.js

Добрый день друзья сегодня с Вами рассмотрим замечательный плагин построения графиков на сайте. Существует много различных плагинов построение графиков на сайте, в нашем случаи мы будем использовать плагин от Morris.js. Данный плагин позволяет строить четыре вида графиков:

В первой части статьи мы будем рассматривать два вида графика это создание ломанной прямой и создание графика в виде диаграммы. Данные графики имеют общие свойства и методы.

Таблица свойств и методов для линейного графика .

hoverCallback: function (index, options, content, row) {
  return "sin(" + row.x + ") = " + row.y;
}

Создание диаграммы области с помощью Morris.Area(option). Диаграммы с областями принимают все те же опции, линейных диаграммы, а также следующие дополнительные опции:

Для построения графика необходимо иметь изначальные данные для построения точек ломанной линии на графике. в своем примере я буду использовать данные цены на нефть начиная с 2008 года по 2016 год, а также цену рубля относительно доллара за этот же период. Данные для построения графиков я буду брать с сервиса Яндекс.

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

Скачиваем плагин с офф. сайта разработчика или подключаем плагин через CDN

Для работы плагина нам понадобиться библиотеки (jQuery & Raphaël).

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

Далее нам необходим контейнер в который мы поместим наш график. Внимани: у контейнера должен быть явно указана высота блока.

<div id="myfirstchart" style="height: 250px;"></div>

Далее дабавляем между тегами <script></script> следующий код:

Мои настройки плагина Morris.js

  Morris.Line({
  //Контейнер для вывода графика
  element: 'myfirstchart',
  //Данные для графика
  data: [
    { y: '2008', oil: 144, ruble: 24.48 },
    { y: '2009', oil: 41,  ruble: 28.26 },
    { y: '2010', oil: 80,  ruble: 29.59 },
    { y: '2011', oil: 94,  ruble: 30.60 },
    { y: '2012', oil: 124, ruble: 31.22 },
    { y: '2013', oil: 115, ruble: 30.42 },
    { y: '2014', oil: 105, ruble: 33.15 },
    { y: '2015', oil: 56,  ruble: 56.49 },
    { y: '2016', oil: 36,  ruble: 75.95 }
  ],
  //Массив занчений для оси X
  xkey: 'y',
  
  //Префикс в конце для оси Y
  postUnits:' $',
  
  //Коридор цены за 1 доллар
  goals:[45.0, 27.0],
  goalStrokeWidth:2,
  goalLineColors:['#d9534f'],
  
  //Событийные линии по оси X
  events: ['2014-01-01', '2015-10-01'],
  eventStrokeWidth:2,
  eventLineColors:['#428bca'],
    
  //Цвет линий
  lineColors:['#5cb85c','#f0ad4e'],
  //Выводимые линии
  ykeys: ['oil', 'ruble'],
  //Названия линий
  labels: ['Нефть', 'Рубль']
});

График цены на нефть и курса доллара с 2008 по 2016 гг.

Диаграмма цены на нефть и курса доллара с 2008 по 2016 гг.

 Morris.Area({
 //Контейнер
 element: 'area-example',
 //Данные
 data: [
    { y: '2008', oil: 144, ruble: 24.48 },
    { y: '2009', oil: 41,  ruble: 28.26 },
    { y: '2010', oil: 80,  ruble: 29.59 },
    { y: '2011', oil: 94,  ruble: 30.60 },
    { y: '2012', oil: 124, ruble: 31.22 },
    { y: '2013', oil: 115, ruble: 30.42 },
    { y: '2014', oil: 105, ruble: 33.15 },
    { y: '2015', oil: 56,  ruble: 56.49 },
    { y: '2016', oil: 36,  ruble: 75.95 }
  ],
  //Массив занчений для оси X
  xkey: 'y',
  //Массив цветов для линий
  lineColors:['#5cb85c','#f0ad4e'],
  //Выводимые линии
  ykeys: ['ruble', 'oil'],
  //Префикс в конце для оси Y
  postUnits:' $',
  //Названия линий
  labels: ['Рубль', 'Нефть']
});

Диаграмма

В следующей части посвященной построению графиков на базе плагина Morris.js мы рассмотрим графики в виде Bar.