-
Notifications
You must be signed in to change notification settings - Fork 1
/
custom_viz_gantt.js
127 lines (114 loc) · 4.36 KB
/
custom_viz_gantt.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
/**
* This is a Custom Visualization for Looker
*
* It shows the first 2 dimension columns as a title and a paragraph
*
* CREATED BY: Egbert Schroeder
*
* DEPENDENCIES:
*
*
* TODO:
*
*
**/
const customVizGanttChart = {
options: {},
/**
* The create function gets called when the visualization is mounted but before any
* data is passed to it.
**/
create: function (element, config) {
// Insert Highcharts css file
// Create a container element to let us center the text.
this._vizContainer = element.appendChild(document.createElement("div"));
},
/**
* UpdateAsync is the function that gets called (potentially) multiple times. It receives
* the data and should update the visualization with the new data.
**/
updateAsync: function (data, element, config, queryResponse, details, doneRendering) {
// set the dimensions and margins of the graph
var $first_column_key = Object.keys(data[0])[0];
var $second_column_key = Object.keys(data[0])[1];
var $third_column_key = Object.keys(data[0])[2];
var $fourth_column_key = Object.keys(data[0])[3];
var $first_column_values = [];
var $seriesObject = [];
var $catCounter = 0;
// Create list of unique values from first column
for (var x = 0; x < data.length; x++) {
var row = data[x];
$first_column_values.push(row[$first_column_key].value);
}
var $categories = [...new Set($first_column_values)];
//console.log($categories);
$categories.forEach(function (category) {
var $categoryData = [];
var $rowCounter = 0;
data.forEach(function (row) {
if (row[$first_column_key].value === category) {
$categoryData[$rowCounter] = {
'name': row[$second_column_key].value,
'start': Date.UTC(2019, 11, 1),
'end': Date.UTC(2019, 12, 31),
'y': $catCounter
};
$rowCounter++;
}
});
$seriesObject[$catCounter] = {'name': category, 'data': $categoryData};
$catCounter++;
});
// console.log($seriesObject);
var html = '<div id="ganttContainer"></div>';
// Insert the generated html into the page
this._vizContainer.innerHTML = html;
$(document).ready(function () {
// Create the chart
var chart = Highcharts.ganttChart('ganttContainer', {
chart: {
spacingLeft: 1
},
title: {
text: ''
},
subtitle: {
text: ''
},
plotOptions: {
series: {
animation: false, // Do not animate dependency connectors
dataLabels: {
enabled: true,
format: '{point.name}',
style: {
cursor: 'default',
color: 'red',
border: false,
pointerEvents: 'none',
}
},
allowPointSelect: true,
}
},
yAxis: {
type: 'category',
categories: ['Metingen', 'Campagnes', 'Vakanties'],
min: 0,
max: 2
},
xAxis: {
currentDateIndicator: true
},
tooltip: {
xDateFormat: '%a %b %d, %H:%M'
},
series: $seriesObject
});
});
doneRendering()
}
}
;
looker.plugins.visualizations.add(customVizGanttChart);