Пример кастомного вывода данных таблицы в виде графика

В данном примере мы используем кастом режим вывода таблицы (используем ее в качестве источника данных). А вывод осуществляется через JS коллбек и инициализацию внешнего JS плагина. 

Подобным образом можно использовать и любые другие плагины - получили данные, подключили плагин и выводим их через JS коллбек.

Документация к Apex Charts - https://apexcharts.com/docs/creating-first-javascript-chart/ У данного компонента есть множество различных настроек и вариаций - https://apexcharts.com/docs/chart-types/line-chart/

Примечание: данный вариант использования графиков подойдет, если по каким-то причинам не подходят стандартные графики, диаграммы платформы.

Как реализовать

1. Создаем таблицу, извлекаем нужные данные и ставим в SELECT 3 'custom' viewType: 

CREATE PROCEDURE [dbo].[crud_watch_customView_getItems]
	@filters CRUDFilterParameter READONLY,  
	@sort sql_variant,
	@direction nvarchar(8),
	@page int,
	@pageSize int,
	@username nvarchar(32)
AS
BEGIN	
	-- SELECT 1
	select '30,40,35,50,49,60,70,91,125' data, '1991,1992,1993,1994,1995,1996,1997, 1998,1999' xAxis
	
	-- SELECT 2 total count
	select 1

	-- SELECT 3
    select 'custom' viewType
		
	-- 4 SELECT Footer data or kanban/gantt data

END

На front подключаем внешнюю JS библиотеку Apex Charts и пишем коллбек к таблице и выводим график с указанием нужных настроек: 

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
$(function(){
  var renderChart = function(cont, data, xAxis){
    // https://apexcharts.com/docs/creating-first-javascript-chart/
    var options = {
      chart: {
        type: 'line'
      },
      series: [{
        name: 'sales',
        data: data //  [30,40,35,50,49,60,70,91,125]
      }],
      xaxis: {
        categories: xAxis // [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
      }
    }
    var chart = new ApexCharts(cont, options);
    chart.render();
  }  
  as.crud2callbacks["watch_customView_getItems"] = function(options, data){
  	console.log("table data", data)
    var cont = options.cont;
    var lineData = [];
    var xAxis = [];
    if(data.items.length){
      var item = data.items[0];
      lineData= item.data.split(',');
      xAxis= item.xAxis.split(',');      
    }    
   	renderChart(cont[0], lineData, xAxis);
  }
});
</script>

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

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

Виды таблицы: Календарь

Визуализация 24.10.2021

Виды таблицы: Диаграмма Chartbar

Визуализация 24.10.2021

Виды таблицы: Карточки

Визуализация 24.10.2021

Виды таблицы: Доска Канбан

Визуализация 24.10.2021

Виды менеджера ресурсов

Визуализация 24.10.2021

SQL-инструмент для создания личных кабинетов на сайте

Суть подхода и история создания Falcon Space

Платформа Falcon Space

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

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

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

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

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

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