---

Класс xtables\base\Flot обеспечивает построение различных диаграмм с использованием библиотеки для jquery Flot (flotcharts.org).

---

Для использования необходимо подключить плагин flot через HeadConnector (значение в параметрах 'js' - 'flot').
Возможно подключение дополнительный плагинов данной библиотеки. Все файлы, относящиеся к плагину flot расположены в папке /js/flot.
Файлы для подключения через HeadConnector нужно добавлять в массив в файле /config/all-head.php.

Затем нужно создать div. Присвоить ему css идентификатор.
После этого будет возможно вызывать плагин для этого элемента.

<div id="chart-id"></div>
    

Для подключения плагина можно создать js функцию или воспользоваться одним из двух методов:

• xtables\base\Flot::get($cssId, $allData) - данный метод добавит js на страницу с подключенным плагином;
  в данный метод нужно передать:
  • $cssId - css идентификатор в формате css, например: "#some_id";
  • $allData - массив с двумя ключами:
    • 'options' - необязательно настройки для плагина (см. официальное руководство плагина flotcharts.org);
    • 'data' - массив с данными для вставки.
• xtables\base\Flot::getDataByAjax($url, $cssId) - данный метод добавит на страницу js, котороый сделает ajax запрос по указанному пути для получения данных;
  отличия от предыдущего метода заключаются в том, что здесь нужно создать страницу, которую можно вызвать по роуту, соответствующему 'url', и которая будет отдавать то же самый массив, как и для предыдущего метода, только json_encoded.

Пример массива для методов класса Flot:

$allData = [
    'options' => [
        'series' => [
            'lines' => [
                'show' => true
            ],
            'points' => [
                'show' => true
            ]
        ]
    ],
    'data' => [
        [
            'label' => 'Line1',
            'data' => [
                [10, 1],
                [17, 8],
                [23, 15],
                [30, 22],
            ]
        ],
        [
            'label' => 'Line2',
            'data' => [
                [10, 4],
                [17, 3],
                [23, 10],
                [30, 18],
            ]
        ],
        [
            'label' => 'Line3',
            'data' => [
                [10, 6],
                [17, 8],
                [23, 12],
                [30, 16],
            ]
        ]
    ]
];
return json_encode($allData); // as ajax reply
// return $allData // for simple get method
    

Также можно воспользоваться js функцией xtables.plot(cssId, url, preloader), в которую нужно передать в качестве параметров:

• cssId - css идентификатор, куда будет добавлена диаграмма;
• url - url, по которому будет сделан ajax запрос, в качестве ответа должен поступить указанный выше массив в формате json;
• preloader - прелоадер в html тегах, который необходимо показывать в период выполнения запроса к url.

---

Настройки библиотеки подробно описаны на указанном официальном сайте.