Интерактивные диаграммы, графики

Введение

Есть замечательные графики ApexCharts. В Falcon Space можно через SQL визуализировать данные на основе ApexCharts. 

Демо графиков от Apex - https://apexcharts.com/javascript-chart-demos/

Наш демостенд для примера ниже - https://demo.web-automation.ru/list/watch/primer-vyvoda-interaktivnogo-grafika---1144

Эти графики хороши тем, что они отлично смотрятся и на мобильном экране, и на ПК, а также являются интерактивными - при наведении появляется информация по точкам + можно увеличивать график, а также есть возможность скачать картинку графика. 

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

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

1. Создаем таблицу без столбцов. 

2. В Getitems прописываем: 

	-- SELECT 1
	select   1
    
	-- SELECT 2 
	select 1

	-- SELECT 3
    select 'apexchart' viewType, 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

Используем 2 опции в SELECT 3: 

• viewType='apexChart'
• apexChartOptions - указываем корректный JSON.

ВАЖНО! Все параметры должны быть указаны в кавычках, иначе будет ошибка Invalid JSON.  Примеры из документации не содержат кавычек - есть простой способ как быстро добавить кавычки к полям - https://www.freeformatter.com/json-formatter.html#before-output , либо используйте этот способ https://dev.to/clickpesa/add-quotes-to-your-unquoted-json-objects-3clc (через Chrome Console - делаем console.log({...}) и затем выполняем CopyObject - в итоге получаем объект с кавычками у полей). 

В данном примере выводятся 2 линии на графике. 

Наша задача - просто подменить данные в параметрах data и categories (сформировать их заранее и потом вставить).

Вы можете задействовать и другие настройки графиков. Для этого надо смотреть документацию по каждому типу графиков. К примеру для линий (line) можно посмотреть здесь настройки JSON - https://apexcharts.com/docs/chart-types/line-chart/

В целом можно задействовать любой из типов графиков - важно просто верно настроить JSON. 

Как может выглядеть рабочая процедура для вывода неких показателей по кварталам GetItems: 

    declare @dt datetime = dateadd(year, -10, getdate()), @dt2 datetime
    declare @prixod nvarchar(max) = '', @rashod nvarchar(max) = '',  @x nvarchar(max) = ''
    
    while @dt < getdate() begin 
    	set @dt2 = dateadd(quarter, 1, @dt)
    	set @prixod  = @prixod + cast(isnull((select cast(sum([sum])/ 1000 as int) 
        from finances 
        where typeID = 1 and factPayed >= @dt and factPayed < @dt2 ), 0) as nvarchar)
 + ',' 
        set @rashod  = @rashod + cast(isnull((select cast(sum([sum])/ 1000 as int) 
        from finances 
        where typeID = 2 and factPayed >= @dt and factPayed < @dt2 ), 0) as nvarchar)
 + ',' 
        set @x = @x + '"'+ cast(year(@dt) as nvarchar) + '-' + cast(datepart(quarter, @dt) as nvarchar) + '",'
        set @dt = @dt2
    end 
     -- убираем последние запятые в строках
    if(len(@prixod)>0) set @prixod = left(@prixod , len(@prixod ) - 1)
    if(len(@rashod)>0) set @rashod = left(@rashod , len(@rashod ) - 1)
    if(len(@x)>0) set @x = left(@x , len(@x) - 1)
   
	-- SELECT 1
	select   1 
    
	-- SELECT 2 
	select 1

	-- SELECT 3
    select 'apexchart' viewType, 1 HideTitleCount, '{
      "chart": {
        "type": "line"
      },
      "series": [{
        "name": "Выручка",
        "data":   ['+@prixod+'],
        "color": "#afa"
      }, 
      {
        "name": "Затраты",
        "data":  ['+@rashod+'],
        "color": "#faa"
      }],
      "xaxis": {
        "categories": ['+@x+']
      }
    }
    ' apexChartOptions
		

Ну и конечно мы можем задействовать обычные фильтры таблиц, которые извлекаем в начале Getitems и на основе них строим наши данные, которые попадут в JSON.

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

Для этого указываем настройку apexChartOptions, но не указываем viewType. В этом случае график будет выведен фильтрами. 

Также график можно поместить и в другую область - для этого указываем разметку div с классом  as-apexchart (например, можно поместить в footerText). 

Дополнительные материалы

1. Диаграммы и графики в личном кабинете
2. Диаграмма Ганта
3. Диаграмма Chartbar