Вступление
На сегодняшний день много компаний требуют системы статистики, и неотьемлемая часть статистики - это графики.
Сейчас я напиши о том как создать real-time график(график, который мониторит даные в реальном времени)
на Yii2 с использованием js библиотеки для графиков ChartJS(вы можете использовать любую библиотеку, по-этому я буду писать вместо chartjs lib.js).
1. Скачиваем и подключаем ChartJS
Думаю скачать проблем не должно быть)). Любой js файл или библиотеку лучше подключать через Asset-и(правельный путь), но вы можете подключить и по-другому.
Копируем библиотеку в папку с js файлами и в классе Asset, к примеру, AppAsset дописываем наш новый файл следующим образом:
class AppAsset extends AssetBundle
{
...
public $css = [
...
];
public $js = [
...
'js/lib.js',
...
];
public $depends = [
...
];
}
Другой способ использования ChartJS - это установить одноименный виджет, вы можете найти его по этой ссылке.
Но не будем углублятса в изучение этого виджета, а сделаем все по старому методу.
2. Создаем контроллер и отображение для него.
Можно создать контроллер через Gii или же самому, на ваш выбор. Я назвал контроллер DemoController, а вьюшку real_time_chart.
3. Добавим канву и js файл, который создаст график, во вьюху
//Еще один способ подключить js файл в Yii Framework
$this->registerJsFile(Yii::$app->request->baseUrl.'/frontend/web/js/real-time-chart-demo.js');
$this->title = Yii::t('app', 'Real-Time chart Demo');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="demo-real-time-chart">
<h2>Real-time data stream</h2>
<canvas id="realTime" width="1000" height="500"></canvas>
</div>
4. Создаем js файл который будет инициализировать и обновлять график в реальном времени.
jQuery(document).ready(function () {
function init() {
var data = {
'labels': [],
'data': [],
};
for(var i = 0; i < 50; i++){
data.labels[i] = i;
data.data[i] = Math.round(100 + Math.random() *(100));
}
return data;
}
/*
* Use this function to update the chart
* @param Chart
*/
function update(realTimeChart) {
var length = realTimeChart.datasets[0].points.length;
for(var i = 0; i < length - 1; i++){
realTimeChart.scale.xLabels[i] = realTimeChart.scale.xLabels[i+1];
realTimeChart.datasets[0].points[i].value = realTimeChart.datasets[0].points[i + 1].value;
}
realTimeChart.scale.xLabels[length-1] = parseInt(realTimeChart.scale.xLabels[length-1]) + 1;
realTimeChart.datasets[0].points[length-1].value = Math.round(100 + Math.random() *(100));
realTimeChart.update();
}
var init = init();
var data = {
labels: init.labels,
datasets: [
{
label: "Real-time",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data : init.data,
},
]
};
//Chart initialization
var realTimeChart = new Chart(document.getElementById('realTime')
.getContext('2d')).Line(data, {showTooltips : false,});
//Chart update
var interval = setInterval(function() {
update(realTimeChart);
}, 1000);
});
init() - используется для инициализации графика, здесь вы можете доставать какие-то даные с базы даных, к примеру, за последние 15 минут.
update() - используется для обновления графика, каждую секунду. Для запуска обновлений я использовал js функцию setInterval
Заключение
Это статья более для тех, кто уже немножко разбирается в js, но все же может помочь и новачку. Пишите замечания или предложения, буду рад.