Вывод таблицы и графика в одном компоненте

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

Как это сделать: 

Выводим таблицу как обычно и в SELECT 3 ставим JSON настройку для графика apexChartOptions (при этом viewType мы не заполняем). 

Также мы можем добавить куда-то разметку с классом as-apexChart (но если ее не будет в таблице, то она просто ее добавит перед выводом таблицы, но в общем случае ее лучше явно указать).

 Пример процедуры: 

CREATE PROCEDURE [dbo].[crud_tableAndChart_getItems]
	@filters CRUDFilterParameter READONLY,  
	@sort sql_variant,
	@direction nvarchar(8),
	@page int,
	@pageSize int,
	@username nvarchar(32)
AS
BEGIN
	declare   @ids TABLE (id int)

	-- filters...
	declare @filterName nvarchar(128)
	select @filterName = Value from @filters where [Key] = 'name'
	
	insert into @ids
	select id
	from tst_customers
	where (isnull(@filterName, '')='' or name like '%'+@filterName+'%')
	
	-- SELECT 1
	select id, name, fio
	from tst_customers 
	where id in (select id from @ids)
	order by  name		
	OFFSET @PageSize * (@Page - 1) ROWS
	FETCH NEXT @PageSize ROWS ONLY;
	
	-- SELECT 2
	select count(*) from @ids	

		-- SELECT 3
    select 'h3' headerTag, '<div class="as-apexchart"></div>' Subtitle, 1 HideTitleCount, '{
      "chart": {
        "type": "line"
      },
      "series": [{
        "name": "Выручка",
        "data":   [30,40,35,50,49,60,70,91,125],
        "color": "#afa"
      }, 
      {
        "name": "Затраты",
        "data":  [20,10,15,40,29,50,20,15,45],
        "color": "#faa"
      }],
      "xaxis": {
        "categories": [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
      }
    }
    ' apexChartOptions

END
Насколько полезна эта возможность?

Другие модули

Рабочий стол в личном кабинете на сайте. Что видит пользователь в личном кабинете

Дашборд пользователя с фильтром по времени. Создание панели управления на сайте

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

Вывод полосок прогресса - отображение статуса процесса в личном кабинете

Вывод круговой диаграммы polarArea

Как отобразить гистограмму bar на странице

Графики в личном кабинете. Вывод графика типа line

Диаграмма радар на сайте - radar bar

Последние обновления

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства

Сайт использует Cookie. Правила конфиденциальности OK