Неофициальный форум пользователей Qlik Sense & Qlikview

Для разработчиков => Вопросы по Qlik Sense & QlikView => Тема начата: Tatsiana от 12 апреля 2018, 10:16:48

Название: Gantt-Timeline
Отправлено: Tatsiana от 12 апреля 2018, 10:16:48
Всем привет!
Очень нужна Gantt-Timeline. Пыталась загрузить с Qlik Branch, но все три имеющиеся там варианта не загружаются полностью. У кого-нибудь работает Gantt-Timeline загруженная с Qlik Branch?
Название: Re: Gantt-Timeline
Отправлено: admin от 12 апреля 2018, 11:13:50
Привет, что значит не загружается полностью?
Вот проверенные:

https://github.com/ralfbecher/QlikSense_Extension_Timeline
https://github.com/kai/qlik-sense-timeline
Название: Re: Gantt-Timeline
Отправлено: Tatsiana от 12 апреля 2018, 01:14:45
В первом случае загружается только один файл,  во втором  пишет:
The googtimeline is incomplete and cannot be opend or dublicated(wbfolder.wbl file missing).

Другие расширения с Qlik Branch загружаются и работают, только они мне не нужны.
Название: Re: Gantt-Timeline
Отправлено: admin от 12 апреля 2018, 03:08:48
Какая версия QS ?
Название: Re: Gantt-Timeline
Отправлено: Tatsiana от 12 апреля 2018, 03:39:56
Скорее всего:
Qlik Sense September 2017, т.е. последняя.
Название: Re: Gantt-Timeline
Отправлено: admin от 12 апреля 2018, 07:05:43
Странно,
Сделайте следующее:
Проверьте на персональной версии Qlik Sense проблемное расширение. Если все ОК, то:
Удалите через консоль расширение на сервере, если оно установлено.
Посмотрите в каталоге на сервере, нет ли там каталогов этого расширения.
Заархивируйте папку рабочего расширения с персональной версии и выгрузите обычным способом на сервер.

P.S. В указанных расширениях нет файла *.wbl



Название: Re: Gantt-Timeline
Отправлено: admin от 13 апреля 2018, 07:43:56
Состав расширений:
Цитировать
Содержимое папки ....\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 байт
Название: Re: Gantt-Timeline
Отправлено: LoryMax от 16 апреля 2018, 12:33:27
Цитата: 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.
Название: Re: Gantt-Timeline
Отправлено: admin от 16 апреля 2018, 12:43:15
На базе Operations Monitor ?
Название: Re: Gantt-Timeline
Отправлено: LoryMax от 16 апреля 2018, 01:22:10
Нет. Создаю свой лог с метками времени создания QVD или какой то части скрипта.
Название: Re: Gantt-Timeline
Отправлено: Tatsiana от 16 апреля 2018, 04:38:10
Спасибо, со вторым вариантом получилось, но это не совсем то. Нужна интерактивность и различные цвета.
В первом варианте при вводе измерений нет изображения.

Я не понимаю, почему в Dev Hub  у  работающих расширений почти все файлы пустые или их не возможно открыть? Так и должно быть?
Название: Re: Gantt-Timeline
Отправлено: Tatsiana от 18 апреля 2018, 08:28:29
Цветной вариант с Qlik Branch  тоже работает

https://github.com/plzaart/multicolored_timeline ,

но показывает после группировки только одну строку, а после применения фильтров максимум три, а у в моём случае до фильтрации должно быть шесть.
Название: Re: Gantt-Timeline
Отправлено: Tatsiana от 20 апреля 2018, 01:40:35
От отчаяния поставила  в сортировке End Time на первое место, в сортировке убрала все галочки и получила свои все шесть строк. Теперь осталось присвоить нужные цвета, пока не понимаю как.
Название: Re: Gantt-Timeline
Отправлено: Tatsiana от 24 апреля 2018, 10:20:34
Для того, чтобы настроить цвета нужно создать 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.
Название: Re: Gantt-Timeline
Отправлено: admin от 24 апреля 2018, 10:32:17
Отлично!
Поздравляю!
:)
Название: Re: Gantt-Timeline
Отправлено: Tatsiana от 24 апреля 2018, 11:17:37
Спасибо!

Теперь нужно, чтобы при наведении курсора длительность была в формате hh:mm.
Название: Re: Gantt-Timeline
Отправлено: admin от 24 апреля 2018, 02:00:57
 :(
В ближайшие дни не смогу подключиться к этой интересной задаче, но я уверен, что у Вас получится. :)
Потом картинку скинете?
Название: Re: Gantt-Timeline
Отправлено: Tatsiana от 23 мая 2018, 10:42:47
Вот что у меня получилось:

// 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);

}
};

});




Но, к сожалению, в этом случае теряются пользовательские цвета.