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

В данном примере мы используем кастом режим вывода таблицы (используем ее в качестве источника данных). А вывод осуществляется через 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>