Всем привет!
Очень нужна Gantt-Timeline. Пыталась загрузить с Qlik Branch, но все три имеющиеся там варианта не загружаются полностью. У кого-нибудь работает Gantt-Timeline загруженная с Qlik Branch?
Привет, что значит не загружается полностью?
Вот проверенные:
https://github.com/ralfbecher/QlikSense_Extension_Timeline
https://github.com/kai/qlik-sense-timeline
В первом случае загружается только один файл, во втором пишет:
The googtimeline is incomplete and cannot be opend or dublicated(wbfolder.wbl file missing).
Другие расширения с Qlik Branch загружаются и работают, только они мне не нужны.
Какая версия QS ?
Скорее всего:
Qlik Sense September 2017, т.е. последняя.
Странно,
Сделайте следующее:
Проверьте на персональной версии Qlik Sense проблемное расширение. Если все ОК, то:
Удалите через консоль расширение на сервере, если оно установлено.
Посмотрите в каталоге на сервере, нет ли там каталогов этого расширения.
Заархивируйте папку рабочего расширения с персональной версии и выгрузите обычным способом на сервер.
P.S. В указанных расширениях нет файла *.wbl
Состав расширений:
Цитировать
Содержимое папки ....\StaticContent\Extensions\googtimeline
13.04.2018 08:39 <DIR> .
13.04.2018 08:39 <DIR> ..
15.08.2017 00:11 1 383 async.js
15.08.2017 00:11 1 168 goog.js
15.08.2017 00:11 3 651 googtimeline.js
15.08.2017 00:11 196 googtimeline.qext
15.08.2017 00:11 1 188 propertyParser.js
13.04.2018 08:39 0 q
6 файлов 7 586 байт
Содержимое папки ...\StaticContent\Extensions\bi-irregular-timeline
13.04.2018 08:42 <DIR> .
13.04.2018 08:42 <DIR> ..
31.01.2017 16:15 36 800 bi-irregular-timeline.js
26.09.2015 11:01 221 bi-irregular-timeline.qext
17.11.2017 09:19 <DIR> scripts
17.11.2017 09:19 <DIR> styles
26.09.2015 11:01 3 894 Timeline.PNG
25.01.2017 08:37 146 wbfolder.wbl
13.04.2018 08:42 0 ww
5 файлов 41 061 байт
Содержимое папки ...\StaticContent\Extensions\bi-irregular-timeline\scripts
17.11.2017 09:19 <DIR> .
17.11.2017 09:19 <DIR> ..
25.01.2017 08:27 659 542 vis-fix2628.min.js
1 файлов 659 542 байт
Содержимое папки ...\StaticContent\Extensions\bi-irregular-timeline\styles
17.11.2017 09:19 <DIR> .
17.11.2017 09:19 <DIR> ..
11.12.2015 16:58 3 661 style.css
15.01.2017 02:31 24 249 vis.min.css
2 файлов 27 910 байт
Всего файлов:
8 файлов 728 513 байт
Цитата: Tatsiana от 12 апреля 2018, 01:14:45
В первом случае загружается только один файл, во втором пишет:
The googtimeline is incomplete and cannot be opend or dublicated(wbfolder.wbl file missing).
Другие расширения с Qlik Branch загружаются и работают, только они мне не нужны.
У меня работает первый - https://github.com/ralfbecher/QlikSense_Extension_Timeline (https://github.com/ralfbecher/QlikSense_Extension_Timeline)
Нелегко было настроить цвета, чтобы все было читаемым.
Что пока отложил на потом, это при выборе "задачи", показывать "подзадачи". не пойму как это реализовать. Если кто готов помочь разобраться, откликнитесь - опишу подробности проблемы.
В моем конкретном примере использую диаграмму Ганта, чтобы видеть последовательность загрузок приложений и создаваемых в них QVD.
На базе Operations Monitor ?
Нет. Создаю свой лог с метками времени создания QVD или какой то части скрипта.
Спасибо, со вторым вариантом получилось, но это не совсем то. Нужна интерактивность и различные цвета.
В первом варианте при вводе измерений нет изображения.
Я не понимаю, почему в Dev Hub у работающих расширений почти все файлы пустые или их не возможно открыть? Так и должно быть?
Цветной вариант с Qlik Branch тоже работает
https://github.com/plzaart/multicolored_timeline ,
но показывает после группировки только одну строку, а после применения фильтров максимум три, а у в моём случае до фильтрации должно быть шесть.
От отчаяния поставила в сортировке End Time на первое место, в сортировке убрала все галочки и получила свои все шесть строк. Теперь осталось присвоить нужные цвета, пока не понимаю как.
Для того, чтобы настроить цвета нужно создать INLINE-таблицу с нужными цветами:
Color:
LOAD*INLINE [
Field, Style,
содержание_1, '#32bb6a',
содержание_2, '#468c64'
]
Это весь файл googtimeline.js c изменениями:
// Hacked together aimlessly by Kai Hilton-Jones
// Improved by Tim Payne
// Improved by Vojta Plzak 3.2.2018
require.config({
paths : {
//create alias to plugins
async : '/extensions/googtimeline/async',
goog : '/extensions/googtimeline/goog',
propertyParser : '/extensions/googtimeline/propertyParser',
}
});
define(["jquery", 'goog!visualization,1,packages:[corechart,table,timeline]'], function($) {'use strict';
return {
initialProperties : {
version : 1.0,
qHyperCubeDef : {
qDimensions : [],
qMeasures : [],
qInitialDataFetch : [{
qWidth : 20,
qHeight : 400
}]
},
chartType : "timeline",
showRowLabels : true,
groupByRowLabel : false
},
//property panel
definition : {
type : "items",
component : "accordion",
items : {
dimensions : {
uses : "dimensions",
min : 4,
max : 5
},
sorting : {
uses : "sorting"
},
settings : {
uses : "settings",
items :
{
selection1 :
{
type : "boolean",
component : "switch",
label : "Show Row Labels",
ref : "showRowLabels",
options : [{
value : true,
label : "On"
},{
value : false,
label : "Off"
}]
},
selection2 :
{
type : "boolean",
component : "switch",
label : "Group Row Label",
ref : "groupByRowLabel",
options : [{
value : true,
label : "On"
},{
value : false,
label : "Off"
}]
}
}
}
}
},
snapshot : {
canTakeSnapshot : true
},
paint : function($element, layout) {
var self = this, elemNos = [], dimCount = this.backendApi.getDimensionInfos().length;
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'Campaign' });
if(dimCount==5) {
data.addColumn({ type: 'string', id: 'Name' });
}
data.addColumn({ type: 'string', role: 'style' });
data.addColumn({ type: 'date', id: 'Start' });
data.addColumn({ type: 'date', id: 'End' });
this.backendApi.eachDataRow(function(key, row) {
var values = [];
row.forEach(function(cell, col) {
//values.push(cell.qText);
if(dimCount==5) {
if(col<3)
{
values.push(cell.qText);
} else {
var myDate = new Date(cell.qText);
values.push(myDate);
}
} else {
if(col<2)
{
values.push(cell.qText);
} else {
var myDate = new Date(cell.qText);
values.push(myDate);
}
}
});
data.addRows([values]);
//selections will always be on first dimension
elemNos.push(row[0].qElemNumber);
});
var chart = new google.visualization.Timeline($element[0]);
//Instantiating and drawing the chart
//var chart = new google.visualization[layout.chartType]($element[0]);
chart.draw(data, {
chartArea : {
left : 20,
top : 20,
width : "100%",
height : "100%"
},
timeline: { showRowLabels : layout.showRowLabels,
groupByRowLabel : layout.groupByRowLabel,
//singleColor: '#960000',
//colorByRowLabel: 'true',
//colorByRowLabel: layout.colorByRowLabel,
rowLabelStyle: {fontName: 'Arial', fontSize: 15 },
barLabelStyle: { fontName: 'Arial', fontSize: 10 }}
//barLabelStyle: { fontName: 'Verdana', fontSize: 13 , background: '#960000'}}
});
//selections
var selections = [];
var tim= [];
google.visualization.events.addListener(chart, 'select', function(e) {
var sel = chart.getSelection();
tim=sel;
//sel.forEach(function(val) {
selections[0]=elemNos[sel[0].row]
self.selectValues(0, selections, true);
//});
//chart.setSelection(tim);
//selections = selections.concat(sel);
});
//chart.setSelection([]);
//chart.setSelection(tim);
}
};
});
Третьим измерением должен быть Style.
Отлично!
Поздравляю!
:)
Спасибо!
Теперь нужно, чтобы при наведении курсора длительность была в формате hh:mm.
:(
В ближайшие дни не смогу подключиться к этой интересной задаче, но я уверен, что у Вас получится. :)
Потом картинку скинете?
Вот что у меня получилось:
// Hacked together aimlessly by Kai Hilton-Jones
// Improved by Tim Payne
// Improved by Vojta Plzak 3.2.2018
require.config({
paths : {
//create alias to plugins
async : '/extensions/timeline/async',
goog : '/extensions/timeline/goog',
propertyParser : '/extensions/timeline/propertyParser',
}
});
define(["jquery", 'goog!visualization,1,packages:[corechart,table,timeline]'], function($) {'use strict';
return {
initialProperties : {
version : 1.0,
qHyperCubeDef : {
qDimensions : [],
qMeasures : [],
qInitialDataFetch : [{
qWidth : 20,
qHeight : 400
}]
},
chartType : "timeline",
showRowLabels : true,
groupByRowLabel : false
},
//property panel
definition : {
type : "items",
component : "accordion",
items : {
dimensions : {
uses : "dimensions",
min : 4,
max : 5
},
sorting : {
uses : "sorting"
},
settings : {
uses : "settings",
items :
{
selection1 :
{
type : "boolean",
component : "switch",
label : "Show Row Labels",
ref : "showRowLabels",
options : [{
value : true,
label : "On"
},{
value : false,
label : "Off"
}]
},
selection2 :
{
type : "boolean",
component : "switch",
label : "Group Row Label",
ref : "groupByRowLabel",
options : [{
value : true,
label : "On"
},{
value : false,
label : "Off"
}]
}
}
}
}
},
snapshot : {
canTakeSnapshot : true
},
paint : function($element, layout) {
var self = this, elemNos = [], dimCount = this.backendApi.getDimensionInfos().length;
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'Campaign' });
data.addColumn({ type: 'string', id: 'Name' });
//data.addColumn({ type: 'string', role: 'style' });
data.addColumn({ type: 'date', id: 'Start' });
data.addColumn({ type: 'date', id: 'End' });
this.backendApi.eachDataRow(function(key, row) {
var values = [];
row.forEach(function(cell, col) {
//values.push(cell.qText);
if(dimCount==5) {
if(col<3)
{
values.push(cell.qText);
} else {
var myDate = new Date(cell.qText);
values.push(myDate);
}
} else {
if(col<2)
{
values.push(cell.qText);
} else {
var myDate = new Date(cell.qText);
values.push(myDate);
}
}
});
data.addRows([values]);
//selections will always be on first dimension
elemNos.push(row[0].qElemNumber);
});
data.insertColumn(2,{ type: 'string', 'role': 'tooltip', p: {html: true}});
var startDate;
var endDate;
var describe;
var start;
var end;
var duration;
var date;
var number;
var i;
for(i=0; i < data.getNumberOfRows(); i++){
number = data.getValue(i,0)
describe = data.getValue(i,1);
start = data.getValue(i,3);
end = data.getValue(i,4);
date = getDurDate(start, end);
duration = calcDuration(start, end);
data.setValue(i,2, getHtmlCode(describe, date, duration))
}
function getDurDate(start, end){
var durDate = start.getDate() + '.' + (start.getMonth()+1) + '.' + start.getFullYear() + ' ';
durDate += (start.getHours() < 10 ? '0' + start.getHours() : start.getHours()) + ':';
durDate += (start.getMinutes() < 10 ? '0' + start.getMinutes() : start.getMinutes()) + ':';
durDate += (start.getSeconds() < 10 ? '0' + start.getSeconds() : start.getSeconds()) + ' - ';
durDate += end.getDate() + '.' + (end.getMonth()+1) + '.' + end.getFullYear() + ' ';
durDate += (end.getHours() < 10 ? '0' + end.getHours(): end.getHours()) + ':';
durDate += (end.getMinutes() < 10 ? '0' + end.getMinutes() : end.getMinutes()) + ':';
durDate += (end.getSeconds() < 10 ? '0' + end.getSeconds(): end.getSeconds());
return durDate;
}
function calcDuration(start, end){
var seconds = (end.getTime() - start.getTime()) / 1000;
var hours = Math.floor(seconds / 3600);
seconds -= hours * 3600;
var minutes = Math.floor(seconds / 60);
seconds -= minutes *60;
return(hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
}
function getHtmlCode(describe, date, duration){
return '<div style="padding:5px;"><p style="border-bottom:1px solid #bdbdbd; padding-bottom: 10px;"><b>' + describe +'</b></p><p><b>' + number +': </b>' + date + '<br />'+ '<b>Длительность: </b>' + duration + '</p></div>';
}
var chart = new google.visualization.Timeline($element[0]);
chart.draw(data, {
chartArea : {
left : 20,
top : 20,
width : "100%",
height : "100%"
},
timeline: { showRowLabels : layout.showRowLabels,
groupByRowLabel : layout.groupByRowLabel,
//singleColor: '#960000',
//colorByRowLabel: 'true',
//colorByRowLabel: layout.colorByRowLabel,
rowLabelStyle: {fontName: 'Arial', fontSize: 15 },
barLabelStyle: { fontName: 'Arial', fontSize: 10 }},
tooltip: { isHtml: true}
//barLabelStyle: { fontName: 'Verdana', fontSize: 13 , background: '#960000'}}
});
//selections
var selections = [];
var tim= [];
google.visualization.events.addListener(chart, 'select', function(e) {
var sel = chart.getSelection();
tim=sel;
//sel.forEach(function(val) {
selections[0]=elemNos[sel[0].row]
self.selectValues(0, selections, true);
//});
//chart.setSelection(tim);
//selections = selections.concat(sel);
});
//chart.setSelection([]);
//chart.setSelection(tim);
}
};
});
Но, к сожалению, в этом случае теряются пользовательские цвета.