Скрещиваем jqGrid и Open Flash Chart

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

А если мы хотим отображать данные выводимые в jqGrid в виде графика. Причем синхронно обновлять график вместе с данными в таблице. Например так.

Для построения графика я выбрал флешь библиотеку Open Flash Chart, которая себе прекрасно зарекомендовала. Если вам что то, придется не по душе в этой библиотеки, вы всегда сможете изменить . Так как Open Flash Chart – open source проект.

Еще нам понадобиться js библиотека – SWFobject. Ее задача поместить флешку в нужное нам место. В принципе мы смогли бы обойтись и без нее, но она позволяет решить: проблемы кросс-браузерности, наличие нужной версии флешь проигрывателя и  т.д.

Основная идея скрипта.

1. у jqGrid есть событие loadComplete – на него мы подвешиваем генерацию графика. То есть каждый раз когда грид обновляется, у нас будет обновятся график.
2. а данные для графика мы будем получать через пользовательский массив , с помощью функции getUserData()

Вот пример кода.

<script type="text/javascript" src="/js/swfobject.js"></script>

$(document).ready(function(){
	var chartCreate = false;
	var data_statistics_chart = '';

	$("#statistics-list").jqGrid({
		...некоторый ваш код...

		// функция вызывается в тот момент когда приходят данные в грид
		loadComplete: function() {
			// получаем пользовательские данные
			var udata = $("#statistics-list").getUserData();
			// вызываем функцию loadChartData с нашими данными udata.chart_data для флеши
			loadChartData(udata.chart_data);
		}
	}).navGrid('#statistics-pager', {refresh:true,add:false,edit:false,del:false,search:false});

	function loadChartData(data) {
		data_statistics_chart = data;
		// проверяем мы создали объект флешь
		if (chartCreate) { // если да, то
			// находим флешку
			chart = swfobject.getObjectById('statistics_chart');
			// загружаем в нее полученные данные
			chart.load(data);
		} else { // создаем флешку с помощью js библиотеки swfobject
			chartCreate = true;
			swfobject.embedSWF(
				// откуда берем саму флешку
				'/flash/open-flash-chart.swf',
				// куда ее помещаем
				'statistics_chart',
				// настройки флешки
				'734', '270', '9.0.0', 'expressInstall.swf',
				// данные откуда флешка будет брать
				// обратите внимания! флешка ждет на входе имя функции, 
				// поэтому сразу передать данные не получаетьса
				{'get-data': 'get_data_statistics_chart'},
				{'wmode':'opaque'}
			);
		}
	}

	// сама функция которая вернет нужные данные флешки
	function get_data_statistics_chart() {
		return data_statistics_chart;
	}
});
</script>

<div id='statistics_chart'></div>

<div class="grid">
	<table id="statistics-list" class="scroll"></table>
	<div id="statistics-pager" class="scroll"></div>
</div>