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

Для вывода данных в примере используется внешний плагин 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>