Вывод диаграммы по дням из данных таблицы

Для вывода данных в примере используется внешний плагин https://p.bdir.in/p/Dynamic-Flat-Block-Chart-Plugin-With-jQuery---TimelineHeatmap/15094

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

Создаем таблицу - источник данных. 

CREATE PROCEDURE [dbo].[crud_customViewTimeline_getItems]
	@filters CRUDFilterParameter READONLY,  
	@sort sql_variant,
	@direction nvarchar(8),
	@page int,
	@pageSize int,
	@username nvarchar(32)
AS
BEGIN
	-- SELECT 1
    select 'Mar 01' Label, 1 Color, 56 Height,  '03/01/2018' date
	union
    select 'Mar 02' Label, 2 Color, 16 Height,  '03/02/2018' date
	union
    select 'Mar 03' Label, 5 Color, 20 Height,  '03/03/2018' date
	union
    select 'Mar 04' Label, 3 Color, 100 Height,  '03/04/2018' date
	union
    select 'Mar 05' Label, 1 Color, 5 Height,  '03/05/2018' date
	union
    select 'Mar 06' Label, 3 Color, 1 Height,  '03/06/2018' date
	union
    select 'Mar 07' Label, 6 Color, 63 Height,  '03/07/2018' date
	union
    select 'Mar 08' Label, 3 Color, 27 Height,  '03/08/2018' date
	union
    select 'Mar 09' Label, 2 Color, 12 Height,  '03/09/2018' date
	union
    select 'Mar 10' Label, 5 Color, 56 Height,  '03/10/2018' date
	union
    select 'Mar 11' Label, 2 Color, 23 Height,  '03/11/2018' date
	union
    select 'Mar 12' Label, 4 Color, 18 Height,  '03/12/2018' date
	union
    select 'Mar 13' Label, 1 Color, 81 Height,  '03/13/2018' date
	union
    select 'Mar 14' Label, 2 Color, 20 Height,  '03/14/2018' date
	union
    select 'Mar 15' Label, 4 Color, 10 Height,  '03/15/2018' date
	union
    select 'Mar 16' Label, 1 Color, 45 Height,  '03/16/2018' date
	union
    select 'Mar 17' Label, 5 Color, 45 Height,  '03/17/2018' date
	union
    select 'Mar 18' Label, 1 Color, 5 Height,  '03/18/2018' date
	union
    select 'Mar 19' Label, 5 Color, 45 Height,  '03/19/2018' date
	union
    select 'Mar 20' Label, 2 Color, 25 Height,  '03/20/2018' date
	union
    select 'Mar 21' Label, 5 Color, 75 Height,  '03/21/2018' date
	union
    select 'Mar 22' Label, 5 Color, 45 Height,  '03/22/2018' date
	union
    select 'Mar 23' Label, 2 Color, 35 Height,  '03/23/2018' date
	union
    select 'Mar 24' Label, 3 Color, 85 Height,  '03/24/2018' date
	union
    select 'Mar 25' Label, 4 Color, 15 Height,  '03/25/2018' date
	union
    select 'Mar 26' Label, 1 Color, 45 Height,  '03/26/2018' date
	union
    select 'Mar 27' Label, 5 Color, 45 Height,  '03/27/2018' date
	union
    select 'Mar 28' Label, 6 Color, 95 Height,  '03/28/2018' date
	union
    select 'Mar 29' Label, 2 Color, 45 Height,  '03/29/2018' date
	union
    select 'Mar 30' Label, 6 Color, 65 Height,  '03/30/2018' date
	union
    select 'Mar 31' Label, 5 Color, 25 Height,  '03/31/2018' date
	
	-- SELECT 2
	select 1

	-- SELECT 3
    select 'custom' viewType, 1 HideTitleCount, 'h3' headerTag
END

Подключаем JS библиотеку и обрабатываем данные таблицы для визуализации в виде диаграммы: 

  <link href="/uploads/js/timeline-heatmap/TimelineHeatmap.css" media="screen" rel="stylesheet" type="text/css" />
  <script src="/uploads/js/timeline-heatmap/TimelineHeatmap.js" type="text/javascript"></script>
<style>
.chart-container {
      height: 75px;
      width: auto;
      overflow-x: scroll;
      background-color: white;
    }
</style>
<script>
  as.crud2callbacks["customViewTimeline_getItems"] = function(options, data){
  	console.log("table data", data)
    var cont = options.cont;
   
    cont.html('<div id="chart-container-3" class="noselect chart-container"></div>');
    var els = [];
    for (var i = 0; i< data.items.length; i++){
      var el = data.items[i];
      els.push([el["label"], el["color"], el["height"], el["date"]]);
    };
    var data1=  { 
      "columnNames": [
    	"label",
    	"color",
    	"height",
    	"custom_field"
  	  ],
  	  "data": [
      	els
      ]
                
    };
    // 3D data with color and height
  	var chart_settings_3 = {
      data: data1["data"],
      columnNames: data1["columnNames"],
      dataIndexForLabels: 0, // columnNames[0] is used for the label of the block
      dataIndexForColors: 1, // columnNames[1] is used for the color of the block
      dataIndexForHeights: 2, // columnNames[2] is used for the height of the block
      useColorQuantiles: true, // use quantile color scale instead of the default linear one
      noColorForSelectedBlock: true,
      colorBin: [0, 2, 4, 8, 16],
      colorRange: ["#dcdcdc", "#52b947", "#f3ec19", "#f57e20", "#ed1f24", "#991b4f"],
      heightBin: [10, 40],
      heightRange: ["33%", "66%", "100%"],
      click:  function ($e, obj) {   
        var dt = $e.data();
        console.log("click", dt, obj);
        var s = 'Date: '+dt.label+' <br>'+ 
             'Index: '+dt.index+' <br>'+ 
             'Value: '+dt.height+' <br>'; 
        as.sys.bootstrapAlert(s, {type: "success", hidePrev: true, delay: 100000});    
            
      }
    };
    chart_3 = new edaplotjs.TimelineHeatmap("chart-container-3", chart_settings_3);
    chart_3.selectLastBlock();
  }
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Платформа Falcon Space

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

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

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

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

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

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