Real-time график в Yii с использованием ChartJS

Вступление

На сегодняшний день много компаний требуют системы статистики, и неотьемлемая часть статистики - это графики.
Сейчас я напиши о том как создать 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, но все же может помочь и новачку. Пишите замечания или предложения, буду рад.

DEMO